@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/



/* ============================================================
   【全体レイアウト安定化】
   スマホで横スクロールやズーム拡大が起きるのを防止する。
   以前、横に空白が出る現象が発生。
   これにより全デバイスでレイアウトが安定。
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================
   【全体レイアウト安定化】
   スマホで横スクロールやズーム拡大が起きるのを防止する。
   以前、横に空白が出る現象が発生。
   これにより全デバイスでレイアウトが安定。
   ============================================================ */









/* =========================
スマホ版ヘッダー画像の大きさ
   ========================= */	
	

/* PC用 */
@media screen and (min-width: 769px) {
  .custom-header-full img.header-img {
    height: 115px !important;   /* 好きな高さ */
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .custom-header-full img.header-img {
    width: 100% !important;
    height: 55px !important;       /* ← 高さを強制 */
    object-fit: cover !important;  /* 縦横比維持しつつ切り抜き */
    object-position: center top !important;  /* 上側を優先 */
  }
}



/* =========================
スマホ版ヘッダー画像の大きさここまで
  ========================= */



/* 個別作品 ACF コンテナ */


body.single-post div[style*="display: flex"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

body.single-post div[style*="display: flex"] .acf-thumbnail {
  flex: 0 0 60% !important;
  max-width: 60% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.single-post div[style*="display: flex"] .acf-thumbnail img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
	object-position: center center;
}



body.single-post div[style*="display: flex"] .acf-details {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  display: flex !important;
  align-items: stretch !important;
	display: block !important; 
	padding-left: 15px;
	box-sizing: border-box;
}



body.single-post div[style*="display: flex"] .acf-details table {
  width: 100% !important;
　table-layout: fixed;
  word-break: break-word;
}







body.single-post div[style*="display: flex"] .acf-details table {
  width: 100% !important;
  height: 100% !important;
  border-collapse: collapse !important;
}

body.single-post div[style*="display: flex"] .acf-details th,
body.single-post div[style*="display: flex"] .acf-details td {
  padding: 0.75em !important;
  border: 1px solid #e0e0e0 !important;
  vertical-align: middle !important;
}

body.single-post div[style*="display: flex"] .acf-details th {
  width: 30% !important;
  background-color: #fff0f5 !important;
  text-align: left !important;
}












/* モバイル対応（縦並び） */
@media screen and (max-width: 768px) {
  body.single-post div[style*="display: flex"] {
    display: block !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  body.single-post div[style*="display: flex"] .acf-thumbnail,
  body.single-post div[style*="display: flex"] .acf-details {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1rem !important;
  }
  body.single-post div[style*="display: flex"] .acf-thumbnail img {
    height: auto !important;
    object-fit: contain !important;
  }
  body.single-post div[style*="display: flex"] .acf-details table {
    height: auto !important;
  }
}



/* 個別作品 ACF コンテナここまで */





.post-main-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
}

.package-left {
  flex: 0 0 45%;
  max-width: 45%;
}

.acf-details-left {
  flex: 1;
  max-width: 55%;
}

@media screen and (max-width: 768px) {
  .post-main-wrap {
    display: block;
  }
}





/* 投稿詳細ページの画像＋ACF上に表示するタイトル */

.entry-card-title {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: left;
  font-weight: bold;
}


/* 投稿詳細ページの画像＋ACF上に表示するタイトルここまで */






/* スマホ用の投稿詳細ページの画像＋ACF上に表示するタイトルサイズ調整 */

@media screen and (max-width: 768px) {
  .entry-card-title {
    font-size: 13px;
    margin-bottom: 8px;   
  }
}

/* スマホ用の投稿詳細ページの画像＋ACF上に表示するタイトルサイズ調整ここまで */











/* 投稿一覧のレイアウト：PC3カラム／スマホ2カラム */

.post-list,
.post-list-3col {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* ← 4カラム間の余白に合わせて増やします（任意調整可） */
justify-content: space-between;
  margin: 0;
  padding: 0;
}

.post-list .entry-card,
.post-list-3col .entry-card {

 width: calc((100% - 40px) / 5); /* gap: 10px × 4 = 40px分を除いた100%を5分割 */

  box-sizing: border-box;
}






/* スマホ：2カラム */
@media screen and (max-width: 834px) {
  .post-list .entry-card,
  .post-list-3col .entry-card {
    width: calc((100% - 10px) / 2); /* gap:10px */
  }
}






.acf-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}
.acf-thumbnail {
  flex: 0 0 300px;
}
.acf-details {
  flex: 1;
}
@media (max-width: 768px) {
  .acf-container {
    flex-direction: column;
  }
}







/* ─────────── PC専用週間ランキングスタイル ─────────── */
  /* ランキング横スクロール領域 */
  .ga4-horizontal-ranking {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 3px;
    padding: 4px 8px !important;/* ← 上下の余白を狭くしてバランスを取る */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ga4-horizontal-ranking::-webkit-scrollbar {
    display: none;
  }

  /* 各ランキングアイテム */
  .ga4-horizontal-ranking .ga4-item {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 220px;
    overflow: hidden;
	
  }

  /* ランキング画像 */
  .ga4-horizontal-ranking .ga4-item img {
    width: 100%;
   height: 100%;
    display: block;
    border-radius: 0; /* 角丸をやめてラベルぴったり密着 */
	 object-fit: cover;
  }






  /* ランキングラベル */
  .ga4-horizontal-ranking .ga4-rank-label {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #ff0066 0%, #cc0077 100%);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 0 0 6px 0; /* 左上角のみピッタリに */
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}






/* 優先度MAXのセレクタで上書き */
body .ga4-horizontal-ranking {
  padding: 4px 8px !important;
}





























/*  人気ランキング位置 */

.widget-title {
  display: inline-block;
  margin-left: 12px;
  margin-top: 10px !important;　
}

/*  人気ランキング位置ここまで */





























/* アイキャッチ画像（左寄せ＋上下調整） */

.single-post .eye-catch img {
  width: 70% !important;
  height: auto !important;
  display: block;
  margin: 0em 0 1.5em 1em !important; /* 上0em / 右0 / 下1.5em / 左1em（←ここで左余白） */
}








@media screen and (max-width: 768px) {
  .custom-header-full {
    overflow: hidden; /* ← 横スクロール防止 */
  }

  .custom-header-full img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: scale(1.2);
    transform-origin: top center;
    display: block;
    margin: 0 auto;
  }
}








/* 投稿詳細ページの背景など */
.single-post .article {
  background-color: #FFF9FA;
  padding: 0px;
  border: 1px solid #f3eaea; 
}


/* 関連記事セクション全体 */
.single-post .under-entry-content {
  background-color: #FFF9FA;
  padding: 8px;
  margin-top: 2px; /* 本文との余白 */
  border-radius: 6px;
}



/* 関連記事1件ごとのカード */
.single-post .related-entry-card {
  background-color: #FFF9FA;
  border: 1px solid #f0dede; /* やさしい淡ピンクの枠線 */
  border-radius: 6px;
  padding: 5px;
  margin-bottom: 1px;
}










 /* 記事本文エリアと関連記事エリアの余白 */
.article {
  margin-bottom: 0 !important; 
  padding-bottom: 0 !important;
}


 /* フッターエリアバックカラー */
.footer {
  background-color: #fdf8f4;
}







/* カテゴリラベルを全体的に非表示（投稿一覧・関連記事など） */
.cat-label,
.entry-card .cat-label,
.related-entry-card-thumb .cat-label {
  display: none !important;
}









/* --- 共通PCスタイル（上記の3カラム・画像下にタイトル） --- */
.single-post .related-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  justify-content: center !important;
}

.single-post .related-entry-card,
.single-post .related-entry-card-wrap,
.single-post .related-entry-card-content {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  text-align: center;
}

.single-post .related-entry-card-thumb {
  width: 100% !important;
  display: block !important;
  text-align: center;
}

.single-post .related-entry-card-thumb img {
  width: 320px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  margin: 0 auto 8px !important;
  border-radius: 8px;
}

.single-post .related-entry-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  width: 320px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.4;
}

.single-post .related-entry-card-snippet,
.single-post .related-entry-card-thumb .cat-label {
  display: none !important;
}










@media screen and (max-width: 768px) {
  .single-post .related-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .single-post .related-entry-card-wrap {
    display: flex !important;
    flex-direction: row-reverse !important; /* 右画像 */
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }

  .single-post .related-entry-card-thumb {
    width: 50% !important;
    flex-shrink: 0 !important;
  }

  .single-post .related-entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  .single-post .related-entry-card-content {
    width: 50% !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
  }

  .single-post .related-entry-card-title {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    text-align: left !important;
  }

  .single-post .related-entry-card-snippet,
  .single-post .related-entry-card-thumb .cat-label {
    display: none !important;
  }
}





@media screen and (max-width: 768px) {
  .text-pc,
  .widget_pc_text {
    display: block !important;
  }
}
























/* ===== 一般：ギャラリー画像＆単体画像：整列・拡大対応（共通） ===== */
figure.wp-block-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 4px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ===== スマホ専用：タップで拡大（共通対応） ===== */
@media screen and (max-width: 768px) {
  figure.wp-block-image {
    width: 100% !important;
    margin: 8px 0;
  }

  figure.wp-block-image.enlarged {
    transform: scale(1.8);
    transform-origin: left center;
    z-index: 10;
  }

  figure.wp-block-image.enlarged img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ===== PCホバー拡大：均一・整列表示（共通対応） ===== */
@media screen and (min-width: 769px) {
  .img-hover-zoom-preview {
    position: absolute !important;
    z-index: 9999;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% * 1.8);  /* 拡大率 */
    max-height: 90vh;
    object-fit: contain !important;
    pointer-events: none;
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease;
    background: #fff;
  }
}






















/* 投稿ページの関連記事表示を8列にする */
.single-post .related-list {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 12px !important;
  justify-content: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* 関連記事カードのスタイル調整 */
.single-post .related-entry-card-wrap {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* 関連記事の画像調整 */
.single-post .related-entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 6px;
}

/* 画像下のタイトル・抜粋・日付・著者・カテゴリなどをすべて非表示にする */
.related-entry-card-title,
.related-entry-card-snippet,
.related-entry-card-meta,
.related-entry-card-content,
.related-entry-card-categorys,
.related-entry-card-info {
  display: none !important;
}






@media screen and (max-width: 768px) {
  /* 投稿ページの関連記事をスマホで4列にする */
  .single-post .related-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* 関連記事カード調整 */
  .single-post .related-entry-card-wrap {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 関連画像 */
  .single-post .related-entry-card-thumb img {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 6px;
  }
}









/* ─── ボタン＋画質アイコン横並び＆中央寄せ ─── */
.cv-and-quality {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;              /* PC時のアイコンとボタンの間隔 */
  margin: 20px auto;      /* 上下余白 */
}

/* ボタンラッパー */
.cv-box {
  flex-shrink: 0;
}

/* =============================================================
   作品詳細ページページ（CV大ボタン）
   ============================================================= */
.cv-and-quality .cv-btn {
  display: inline-block;
  padding: 12px 100px;   /* 上下12pxに調整 */
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(to bottom, #ffd9aa 0%, #fecd97 100%);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.cv-and-quality .cv-btn:hover {
  background: linear-gradient(to top, #ffd9aa 0%, #fecd97 100%);
}

/* キラリン（個別ページのみで OK） */
.cv-and-quality .cv-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmerPause 6s linear infinite;
}

/* =========================
   ③ 画質アイコンまわり
   ========================= */
.quality-icons {
  display: flex;
  gap: 10px;
}

.quality-icon {
  width: 60px;
  height: auto;
}

/* =========================
   ④ グラデーション線との間隔調整
   ========================= */
.gradation-line {
  margin-top: 8px !important;   /* ボタンとの間隔を狭く */
  margin-bottom: 10px;          /* 下の余白も少なめに */
}

/* =========================
   ⑤ スマホ調整（統合版）
   ========================= */
@media screen and (max-width: 768px) {
  /* 個別ページ中央ボタン */
  .cv-and-quality .cv-btn {
    width: 90%;         /* スマホは幅広め */
    font-size: 1.1rem;
    padding: 15px 0;    /* 上下余白をスマホ用に少し広めに */
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 一覧カード内ボタン */
  .entry-card .cv-btn,
  .entry-card .cv-button .cv-btn {
    width: 90%;
    padding: 8px 0;
    font-size: 0.95em;
  }

  /* 縦並びに切り替え */
  .cv-and-quality {
    flex-direction: column;
    gap: 15px;
  }

  .quality-icons {
    justify-content: center;
  }

  /* スマホ時のグラデーション線間隔もさらに詰める */
  .gradation-line {
    margin-top: 6px !important;
    margin-bottom: 8px;
  }
}

/* shimmer アニメーション */
@keyframes shimmerPause {
  0%   { left: -150%; }
  10%  { left: 150%; }
  100% { left: 150%; }
}

















/* =========================
   ② TOPページ一覧カード内（小ボタン）
   ========================= */
.entry-card .cv-btn,
.entry-card .cv-button .cv-btn {      /* 一覧カードのボタンを絞り込み */
  display: inline-block;
  padding: 6px 0;                    /* 高さを抑える */
  width: 80%;                         /* カード中央に収める */
  font-size: 0.85em;                 /* 控えめ */
  font-weight: normal;
  color: #4d2c00;
  background: linear-gradient(to bottom, #ffe0b3 0%, #ffd199 100%);
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin: 0 auto 10px;
}

.entry-card .cv-btn:hover,
.entry-card .cv-button .cv-btn:hover {
  background: linear-gradient(to top, #ffe0b3 0%, #ffd199 100%);
  color: #000;
}















.ga4-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.ga4-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}











.performer-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  padding: 1px 0;
  background: rgba(20, 20, 20, 0.30);
  color: #fff;
  font: 600 12px/1.2 "Noto Sans JP", sans-serif;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 6px 6px;
  box-sizing: border-box;
  letter-spacing: 0.03em;

  /* ▼ 以下を追加（1行で省略「…」） */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}



















  /* 1件だけでも幅・配置を一定に保つ */

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  justify-items: center;
  align-items: start;
  margin-bottom: 40px;
}







/* ===========================================================================================
タグのアイコンのデザイン等
=========================================================================================== */

/* ▼ タグのアイコンを非表示にする */
.entry-tags .tag-icon,
.entry-tags .tax-icon,
.entry-tags .fas.fa-tag {
  display: none !important;
}

/* ▼ タグリンクの装飾を上書き */
.entry-tags .tag-link {
  display: inline-block;
  margin: 8px 6px 0 0;
  padding: 4px 10px;  /* ← これで効くようになります */
  font-size: 14px;
  line-height: 1.6;
  background-color: #eaf4ff;
  color: #004c8c;
  border-radius: 5px;  /* CVボタンに合わせて角丸を小さめに */
  border: 1px solid #bcdffb;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}


/* ▼ ホバー時の装飾 */
.entry-tags .tag-link:hover {
  background-color: #d0eaff;
  border-color: #a1d2fa;
  color: #003a6e;
}

/* ▼ スマホ専用で上下余白をさらに狭める */
@media screen and (max-width: 768px) {
  .entry-tags .tag-link {
    margin: 0px 6px 0 0;  /* ← 上下余白を 2px に縮小 */
    padding: 1px 6px;    /* ← 内側余白も少しコンパクトに */
  }
}





/* ===========================================================================================
タグのアイコンのデザイン等
=========================================================================================== */





/* ===========================================================================================
 タグエリアの下余白を共通で狭くする
=========================================================================================== */
.entry-categories-tags {
  margin-bottom: 8px !important; /* ← 共通で8pxに */
}














/* =========================================================================================
   エントリーカード表示用スタイル（枠や内部構成）　　　　　　　現在効いている
========================================================================================= */
.entry-card {
  border: 1px solid #ccc;
  margin: 12px 8px !important;  /* 上下12px、左右8px */
  padding: 2px 2px 8px 2px !important;
  background: #fff;
  border-radius: 4px;
  transition: transform 0.2s ease;
  text-align: center;
  box-shadow: none;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.entry-card:hover {
  transform: scale(1.02);
}

/* =========================================================================================
   エントリーカード表示用スタイル（枠や内部構成）　　　　現在効いている　　　　ここまで
========================================================================================= */








/* ▼ サムネイル統一表示 */
.entry-thumb img {
  display: block !important;
  margin: 0 auto !important;
  width: 150px !important;
  height: 204px !important;
  object-fit: contain !important;
  vertical-align: bottom !important;
  background-color: #fff;
}







/* エントリーカード内の収録時間 */
.entry-runtime {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 8px; 
  text-align: center;
}








/* ▼ タイトル・メタの余白調整（1行制限） */
.entry-title,
body .entry-title {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* ▼ タイトルリンク（1行＋省略） */
.entry-title a {
  font-size: 14px !mportant;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
}









.entry-meta {
	font-size: 15px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
	 /* ▼ 女優名1行〜2行まで対応して整列を保つ */
  min-height: 2.6em; /* = 1.3行 × 2行分 */
	 /* ▼ 以下で2行で省略（…）させる */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
}








/* CVボタン（PC・スマホ共通ベース） */
.fanza-button,
.cv-btn {
  display: inline-block;
  padding: 6px 25px;
  font-size: 0.85em;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(to bottom, #ffe0b3 0%, #ffd199 100%);
  color: #4d2c00;
  text-decoration: none;
  margin: 0 auto 10px;
  width: fit-content;
}
.fanza-button:hover,
.cv-btn:hover {
 background: linear-gradient(to top,  #ffe0b3 0%, #ffd199 100%);
  color: #1a0dab !important; 
}





/* スマホエントリーカード最適化 */
@media screen and (max-width: 768px) {
  .post-list,
  .post-list-3col {
    align-items: stretch !important;
		display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 16px;
  row-gap: 24px;
  }

  .entry-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
　　padding-bottom: 12px; /* カード自体の下余白 */
	
  }

  .entry-title {
    margin-top: 4px;
    margin-bottom: 4px !important;
  }

  .cv-button {
    margin-top: auto;
    padding-top: 3px;
    padding-bottom: 3px;
    display: flex;
    justify-content: center;
  }

  .cv-button .cv-btn {
    width: 90%;
    padding: 10px 0;
    font-size: 1em;
  }
}

main.main {
  padding: 0 !important;
  margin: 0 !important;
}
/* スマホエントリーカード最適化ここまで */








/* ===========================================================================================
トップページのエントリーカード内のサムネイルの位置
=========================================================================================== */

/* entry-thumb は画像を囲っているブロック要素 */
.entry-thumb {
	
  height: 230px; /* サムネイル画像の高さに合わせて固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px !important;
  margin-bottom: 2px !important;
	
}



/* ===========================================================================================
トップページのエントリーカード内のサムネイルの位置　　　　　　　　　　　　　　　　　　　　　　　ここまで
=========================================================================================== */









/* ===========================================================================================
エントリーカード内の素人作品のみ画像の縦横比が異なるのでサムネイルの調整　　　　　　　　　　　　　　　　　　　　　
=========================================================================================== */




/* タグに「素人」が含まれるエントリーカードだけ拡大 */
.siroto-entry .entry-thumb img {
  width: 200px !important;
  height: 230px !important;
}




/* ===========================================================================================
エントリーカード内の素人作品のみ画像の縦横比が異なるのでサムネイルの調整　　　　　　　　　　　　ここまで　　　　　　　　　　　　　　　　　　　
=========================================================================================== */


























/* 素人ランキングだけ画像を拡大 */
.siroto-ranking .ga4-item {
  width: 190px;
  height: 210px;
}


.siroto-ranking .ga4-item img {
  object-fit: cover;
}










/* 横並びランキング全体 */
.ga4-horizontal-ranking {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}


/* hover時の浮き上がり効果 */
.ga4-item:hover {
  transform: scale(1.040);
 rgba(0,0,0,0.18);
}







/* ナビ項目下の人気ランキング文字サイズ */
.section-heading {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 0px 0 0px !important;
  padding: 0 !important;
  text-align: left !important;
}




/* 各ランキングタイトルグラデ色 */

.ranking-title {
  font-weight: bold;
  font-size: 18px;
  background: linear-gradient(to right, #ff4081, #2196f3); /* ピンク〜青 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.3;
  margin-right: 10px;
}

.ranking-subtext {
  font-size: 16px;
  color: #555;
  vertical-align: middle;
}

/* 各ランキングタイトルグラデ色ここまで*/






/* 各ランキング2文字のみ拡大*/
.ranking-label {
  font-size: 1.3em;     
  font-weight: bold;
  color: #ff3399;        
  margin-right: 2px;     
}





/* ナビ項目の作品一覧の文字サイズ、位置 */

.section-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
}









/*全カテゴリの投稿カード一覧を5カラムで美しく並べる共通スタイル */



.related-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  justify-content: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}






/* ==================================================
トップへ戻るボタン全体のスタイル ページ右下部にあるマーク
   ================================================== */



.go-to-top-button {
  background: #222 !important;      /* ぐっと落ち着いたトーン */
  color: #fff !important;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-size: 22px;
  transition: all 0.2s ease;
}

/* ホバー時の視覚効果 */
.go-to-top-button:hover {
  background-color: #444;           /* 少し明るく変化 */
  transform: translateY(-2px);
}

/* アイコンサイズ調整 */
.go-to-top-button .fas {
  font-size: 20px;
}


/* ==================================================
トップへ戻るボタン全体のスタイル ページ右下部にあるマークここまで
   ================================================== */





.related-performer-thumbs .entry-thumb {
  width: 150px;
  height: 204px;
  object-fit: contain;
  background: #fff;
  display: block;
  margin: 0 auto;
}

.siroto-entry .entry-thumb {
  width: 200px;
  height: 230px;
}



.related-thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  justify-content: flex-start;
}

.related-thumbnail-item {
  width: 160px;
  flex: 0 0 auto;
}

.related-thumbnail-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}





/* ==================================================
全てのタグページのｈ１横のタグマーク非表示
   ================================================== */


.tag .archive-title .fas {
  display: none !important;
}


/* ==================================================
全てのタグページのｈ１横のタグマーク非表示ここまで
   ================================================== */







/* ==================================================
 template-parts/各rank.php 記述の タイトル ナビ固定ページタイトルも共通 
   ================================================== */


.ranking-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 0 0px 16px; /* ← 左に12pxだけ余白を追加（右にずらす） */
}




.ranking-icon {
  width: 30px;
  height: 30px;
	 margin-right: 5px;
}

.ranking-title {
  
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 16px;
  white-space: nowrap;
	 margin-top: 2px;
}

.ranking-subtext {
  margin-left: 12px; /* 推奨余白 */
  padding: 3px 8px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  border-radius: 4px;
  white-space: nowrap;
	 margin-top: 2px;
}

/* モバイル時に折り返し許容＋縦並びに変更（スマホ幅で崩れないよう） */
@media screen and (max-width: 480px) {
  .ranking-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
  }

  .ranking-subtext {
    margin-left: 0; /* スマホ時は margin を無効にして下に並べる */
  }
}



/* ==================================================
 template-parts/各rank.php 記述の タイトル ナビ固定ページタイトルも共通 ここまで
   ================================================== */









/* ==================================================
footer.phpにJS記述でスマホスワイプPC横スクロール
   ================================================== */




body .ga4-horizontal-ranking {
  display: flex;
  flex-wrap: nowrap; /* ← 2段落ち防止 */
  overflow-x: auto;   /* ← 横スクロール有効化 */
  gap: 8px;           /* ← カード間の余白 */
  padding: 8px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox用：スクロールバー非表示 */
}

body .ga4-horizontal-ranking::-webkit-scrollbar {
  display: none; /* Safari/Chrome用：スクロールバー非表示 */
}

body .ga4-horizontal-ranking .ga4-item {
  flex: 0 0 auto;      /* ← 折り返さないように横幅固定 */


  scroll-snap-align: start;
}



/* ==================================================
footer.phpにJS記述でスマホスワイプPC横スクロールここまで
   ================================================== */


















.ga4-horizontal-ranking {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.ga4-item {
  flex: 0 0 auto;
  width: 160px;
}

.ga4-horizontal-ranking {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}











.siroto-ranking .ga4-item {
  width: 190px !important;
  height: 210px !important;
}











/* ==================================================
各画質アイコンの共通スタイル
   ================================================== */


.quality-icon-img {
  width: auto;                      
  display: inline-block;            
}



/* ==================================================
各画質アイコンの共通スタイルここまで
   ================================================== */






/* ============================================
【作品詳細ページ】画質レベルについて全体
============================================ */

.quality-guide-block {
  border: 1px solid #f0c89c;
  background-color: #fff8f2;
  padding: 20px;
  margin: 20px auto;
  max-width: 1400px;   /* ← PCで枠を広げる */
  width: 100%;
  border-radius: 10px;
}

.quality-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #d78f34;
  text-align: center;
}

.quality-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.quality-item img {
  width: 55px  !important;
  height: auto;
  margin-right: 12px;
  vertical-align: middle;
}

.kaisetubun {
  background-color: #fff7e0;
  border-bottom: 2px solid #ffc107;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}



 /* スマホ表示ではアイコン小さめに */
@media (max-width: 768px) {
  .quality-item img {
    width: 45px !important;   /* ← 強制的に上書き */
    height: auto !important;
    margin-right: 8px !important;
  }
}


/* ============================================
【作品詳細ページ】画質レベルについて全体　ここまで
============================================ */






/* ============================================
 || この動画の高画質レベル ||映画館アイコンのアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル 
   ============================================ */




.quality-box-outside {
  border: 2px solid #f5d9b0;   /* 枠色 */
  background: #fffaf7;         /* 背景色 */
  padding: 16px 12px;
  margin: 10px auto 10px; /* 上を15pxに変更して詰める */
  max-width: 850px;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}



/* PC映画館 Movieアイコン */
.quality-theater-image img {
  max-width: 380px; /* 最大幅 */
  width: 100%;      /* 親要素幅に合わせる（ただしmax-widthで制限） */
  height: auto;     /* 縦横比維持 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 0 auto 16px; /* 上0 / 左右autoで中央寄せ / 下16px */
  display: block;   /* 中央寄せ有効化 */
}



/* 映画館 Movieアイコン スマホ用（幅767px以下 */

@media screen and (max-width: 767px) {
  .quality-theater-image img {
    max-width: 260px  !important;/* ← スマホでの最大幅 */
    margin-bottom: 12px;
  }
}




/* ============================================
 || この動画の高画質レベル ||映画館アイコンのアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイルここまで 
   ============================================ */












/* ============================================
▼ この作品の詳細はこちら ▼のアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル 
   ============================================ */




.cvbutton-gashitu {
  background: #fffaf4; /* 背景色（薄いクリーム色） */
  border: 2px solid #f2e0d2; /* 外枠の色と太さ */
  padding: 25px; /* 内側余白 */
  border-radius: 12px; /* 角丸 */
  margin: 10px auto 10px; /* 上・左右・下の余白 */
  max-width: 860px; /* 最大幅 */
  box-shadow: 0 0 10px rgba(240, 220, 200, 0.15); /* 薄い影 */
}




/* ============================================
▼ この作品の詳細はこちら ▼のアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル ここまで
   ============================================ */













/* =========================
 作品詳細のCVボタン下の【HIGH QUALITY】 ラベル
   ========================= */


.gashitu-high-quality {
  text-align: center;
  margin: 10px auto 0;
}

.gashitu-high-quality img {
  width: 180px;     
  max-width: 90%;    /* スマホ対策 */
  height: auto;
  display: inline-block;
	margin-bottom: 5px;
	margin-top: 5px;
}



/* =========================
 作品詳細のCVボタン下の【HIGH QUALITY】 ラベル　ここまで
   ========================= */













/* =========================
【作品詳細ページの】サムネイル画像に1回だけ走る輝きアニメーションを追加するスタイル
   ========================= */



.acf-thumbnail {
  position: relative;
  overflow: hidden;
}

/* 輝きラインのアニメーション（2回限定） */
.acf-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: subtle-shine 3s ease-in-out 0s 1; /* ←1回だけ再生 */
  z-index: 2;
  pointer-events: none;
}

/* アニメーション定義 */
@keyframes subtle-shine {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}



/* =========================
【作品詳細ページの】サムネイル画像に1回だけ走る輝きアニメーション追加するスタイル、ここまで
   ========================= */













/* =========================================
 作品詳細CV最上段 テキスト（▼この作品の詳細はこちら▼）
   ========================================= */




.cv-header {
  font-size: 20px;
  font-weight: bold;
  color: #d18300;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 2px dashed #f7c589;
}


/* ▼ CVボタン下の点線 */
.cv-divider {
  border-bottom: 2px dashed #f7c589;
  width: 90%;
  margin: 18px auto 10px;
}





/* ▼ 再生時間：アイコンとテキスト配置 */
.acf-runtime {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  color: #333;
  margin: 10px auto;
  text-align: center;
}


/* ▼ 再生時間：アイコンサイズ */
.acf-runtime img {
  width: 60px;
  height: auto;
  vertical-align: middle;
}


/* ▼ CVボタン＋再生時間のブロック */
.cv-and-quality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
	

}



/* =========================================
▼作品詳細CV最上段 テキスト（▼この作品の詳細はこちら▼）ここまで
   ========================================= */








/* =========================
この作品の詳細はこちら全体囲い枠
   ========================= */



 
.quality-box-outside {
  border: 2px solid #f5d9b0; 
  background: #fffaf7;
  padding: 16px 12px;
  margin: 40px auto;
  max-width: 660px; /* 囲いサイズ */
  width: 100%;  
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;

}




/* =========================
この作品の詳細はこちら全体囲い枠ここまで
   ========================= */







/* =========================================
作品詳細ページの 水色帯のH2 高画質ラベルタイトル、高画質アイコンサイズ、配置
   ========================================= */

.quality-header {
  font-size: 18px;
  font-weight: bold;
  color: #d18300;
  margin: 0 auto 12px;
  border-bottom: 2px dashed #f7c589;
  padding-bottom: 4px;
  display: inline-block;
  text-align: center;
}



/* 作品詳細ページの高画質ラベルのアイコン配置 */
.quality-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px !important;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 8px;
}


/* 作品詳細ページの この動画の高画質レベル 高画質アイコンのみのサイズ（PC用） */
.quality-icons img {
  width: 53px !important;
  height: auto !important;
}

/* ===============================
   スマホ表示（768px以下）
   =============================== */
@media screen and (max-width: 768px) {
  .quality-icons img {
    width: 40px !important;  /* ← スマホ時のサイズ */
    height: auto !important;
  }
}



/* =========================================
作品詳細ページの 水色帯のH2 高画質ラベルタイトル、高画質アイコンサイズ、配置ここまで
   ========================================= */






/* =========================================================
スマホ版　作品詳細ページの▼この作品の詳細はこちら▼の全体
   ========================================================= */



@media screen and (max-width: 768px) {
  /* CVボックスの余白を詰める */
  .cvbutton-gashitu {
    margin: 5px auto !important;
    padding: 12px !important;
  }

	
 /* CVボックス内の「詳細はこちら」タイトルもコンパクトに */
  .cvbutton-gashitu .cv-header {
    margin-bottom: 6px !important;
    font-size: 17px !important;
    line-height: 1.6;
  }

	
	
  /* ボタンサイズをスマホ向けに少し小さく */
  .cvbutton-gashitu .cv-btn {
    padding: 14px 18px !important;
    font-size: 17px !important;
  }
	
	
	
	
	
	  /* アイコン＋再生時間行 */
  .cvbutton-gashitu .acf-runtime {
    display: flex;
    align-items: center;
    gap: 6px; /* アイコンと文字の距離 */
    margin-bottom: 0 !important; /* 下余白を完全に消す */
    padding-bottom: 0 !important;
		
  }

  /* アイコンサイズ */
  .cvbutton-gashitu .acf-runtime .runtime-icon {
    width: 50px !important;
    height: auto !important;
		margin-top: 5px
  }

	
/* 再生時間テキスト */
  .cvbutton-gashitu .acf-runtime .runtime-text {
    font-size: 16px !important;
    line-height: 1.4;
    color: #333;
  }

	
  /* ボタンの上余白を完全に削除 */
  .cvbutton-gashitu .cv-btn {
    margin-top: 0 !important;
  }


  /* 念のため親ブロックの線の余白 */
  .cvbutton-gashitu .cv-block {
    margin-top: 1px !important;
    padding-top: 1px !important;
  }

	
.gashitu-high-quality {
    text-align: center;
    margin: 10px auto 10px;
 }
		
}
	
	
	
/* =========================================================
スマホ版　作品詳細ページの▼この作品の詳細はこちら▼の全体ここまで
   ========================================================= */	










/* ======================================================================
 作品詳細ページ　この動画の高画質レベルのサイズ　高画質ラベルのテキスト
   ====================================================================== */	


/* ▼ 高画質ラベルタイトル */
.quality-header {
  font-size: 18px;
  font-weight: bold;
  color: #d18300;
  margin: 0 auto 12px;
  border-bottom: 2px dashed #f7c589;
  padding-bottom: 4px;
  display: inline-block;
  text-align: center;
}



/* ▼ 高画質ラベルのアイコン配置 */
.quality-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* ▼ この動画の高画質レベル高画質アイコンのみのサイズ */
.quality-icons img {
  width: 70px;
  height: auto;
}

/* ======================================================================
 作品詳細ページ　この動画の高画質レベルのサイズ　高画質ラベルのテキスト　ここまで
   ====================================================================== */	





/* =======================================================================
 高画質アイコンの光沢効果（強調）【タイトル右箇所】の4k8kのラベル＋【作品詳細ページの動画の画質レベル箇所】の4k8kのラベルのみ 
   ======================================================================= */



/* 作品詳細ページのタイトル横の高画質アイコンの光沢効果（強調） */
.shiny-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  line-height: 0;        /* ← アイコン周りの余白をリセット */
  padding: 0;            /* ← パディングを削除（ズレ防止） */
  background: none;      /* ← 背景グラデ削除、純粋な画像だけ */
  box-shadow: none;      /* ← 外枠効果も削除してシンプルに */
  vertical-align: middle;
}

.shiny-label img {
  display: block;
  height: auto;
  max-height: 45px;   /* ← サイズはここで調整 */
  width: auto;
  border-radius: 3px;
  filter: brightness(1.1) contrast(1.15);
}

/* 光沢オーバーレイ（画像サイズに完全フィット） */
.shiny-label::before {
  content: "";
  position: absolute;
  inset: 0;   /* ← top/right/bottom/left 全部0でフィット */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.25) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(0, 0, 0, 0) 75%
  );
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}




/* =======================================================================
 高画質アイコンの光沢効果（強調）【タイトル右箇所】の4k8kのラベル＋【作品詳細ページの動画の画質レベル箇所】の4k8kのラベルのみ ここまで
   ======================================================================= */






/* ==================================================
 作品タイトル横並び画面端で折り返し
   ================================================== */

/* 作品タイトル横並び＋画質アイコン右寄せ＋下余白縮小 */
.title-and-quality {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}



/* 画質アイコンを右寄せ＆下余白縮小 */
.title-and-quality .quality-icons-title {
  margin-top: 2px;
  margin-left: auto;           /* 右寄せ */
  margin-bottom: 0px !important; /* 下余白を縮める */
}



/* 画質アイコンを右寄せ＆下余白縮小 */
.title-and-quality .quality-icons-title {
  margin-top: 2px;
  margin-left: auto;           /* 右寄せ */
  margin-bottom: 0px !important; /* 下余白を縮める */
}

/* アイコン同士の余白を狭める */
.title-and-quality .quality-icons-title img,
.title-and-quality .quality-icons-title .shiny-label {
  margin-right: 4px;   /* ← ここを2pxや0にすればさらに詰められる */
}

.title-and-quality .quality-icons-title img:last-child,
.title-and-quality .quality-icons-title .shiny-label:last-child {
  margin-right: 0;     /* 最後のアイコンだけ右余白を消す */
}




/* 個々のアイコンの下余白をゼロに */
.title-and-quality .quality-icons-title img {
  margin-bottom: 0 !important;
}




/* ==================================================
 作品タイトル横並び画面橋折り返しここまで
   ================================================== */




/* =============================================
作品タイトル横並び＋画質アイコン右寄せ＋下余白縮小
   ============================================= */


.title-and-quality {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.title-and-quality .entry-card-title {
  flex: 1 1 100%;
  max-width: 100% !important;
  width: 100%;
  display: block;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 0px; 
  color: #444;
}

/* アイコンを右寄せ＆下余白縮小 */
.title-and-quality .quality-icons-title {
  margin-top: 2px;
  margin-left: auto;           /* 右寄せ */
  margin-bottom: 0px !important; /* 下余白を縮める */
}

/* 個々のアイコンの下余白をゼロに */
.title-and-quality .quality-icons-title img {
  margin-bottom: 0 !important;
}


/* =============================================
スマホ用タイトル上下余白調整
============================================= */
@media screen and (max-width: 768px) {
  .title-and-quality .entry-card-title {
    margin-top: 12px !important;
    margin-bottom: 5px !important;
    font-size: 1.1em;
    line-height: 1.4;
    color: #555;
	padding-left: 8px;      /* ← ここで左余白を追加 */
    padding-right: 8px;     /* ← 右も少し入れるとバランス良い */  
  }
}




/* =============================================
作品タイトル横並び＋画質アイコン右寄せ＋下余白縮小ここまで
   ============================================= */
	









/* ===============================================
  【タイトル横】のハイクオリティアイコンサイズ＋ タイトル下の4K・8K・HDの各画質アイコンサイズ＋ 上下左右の位置調整
 =============================================== */

.quality-icon-img.high-quality {
  /* HIGH QUALITY は縦長なので高さ基準で比率維持 */
  height: 50px !important;
  width: auto !important;
}

/* タイトル右端の4K・8K・HD各アイコン（PC） */
.quality-icons-title .quality-icon-img:not(.high-quality) {
  width: 50px !important;   /* 幅基準で正方形を維持 */
  height: auto !important;
}

/* ラベルの外側に余白（枠や影の崩れ防止） */
.quality-icons-title .shiny-label {
  display: inline-block;
  margin: 0 4px; /* 上下0px 左右4px */
  vertical-align: middle;
}



/* ---------- スマホ用調整 ---------- */
@media screen and (max-width: 768px) {
  .quality-icon-img.high-quality {
    height: 38px !important;
    width: auto !important;
  }

  .quality-icons-title .quality-icon-img:not(.high-quality) {
    width: 34px !important;
    height: auto !important;
  }

  .quality-icons-title .shiny-label {
    margin: 2px 1px; /* 上下2px 左右1px：スマホ用に余白を少し詰める */
  }
}


/* =========================================================
  【タイトル横】のハイクオリティアイコンサイズ＋ タイトル下の4K・8K・HDの各画質アイコンサイズ＋ 上下左右の位置調整　ここまで
 ============================================================= */





















/* =========================================================
【グラデーション付き見出し】セクションのデザイン
========================================================= */


.gradation-section {
  text-align: center;
　  margin-top: 4px;
  margin-bottom: 4px;
	
}

.latest-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 1px;
}

.gradation-line {
  width: 90%;
  height: 5px;
  margin: 0 auto;
  background: linear-gradient(to right, #00e0c7, #a57ff6);
  border-radius: 3px;
}



/* スマホ版 */
@media screen and (max-width: 768px) {
  .gradation-line {
    width: 80%;
    height: 4px;
  }

  .latest-title {
    font-size: 18px;
	margin-top:  2px;
    margin-bottom: 4px;
  }

  .gradation-section {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* =============================================
【グラデーション付き見出し】セクションのデザインここまで
============================================= */










/* =============================================
区切り線として使う時は　　gradient-line gradient-margin
============================================= */


.gradient-line {
  height: 5px;
	width: 90%;
	margin: 0 auto;
	  background: linear-gradient(to right, #00e0c7, #a57ff6);
}

/* ② margin 専用の追加クラス */
.gradient-margin {
  margin-top: 20px;
  margin-bottom: 20px;
}



/* =============================================
区切り線として使う時は　　　gradient-line gradient-margin  ここまで
============================================= */











/* =============================================
【作品詳細ページのタイトルと下線】グラデボーダー
============================================= */


 
.title-border-collar {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  color: #111;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, #00e0c7, #a57ff6) 1;
  padding-bottom: 6px;
  margin-bottom: 16px;
}





@media screen and (max-width: 768px) {
  h1.entry-card-title.title-border-collar {
    font-size: 16px !important;
    padding-bottom: 5px;
    margin-bottom: 14px;
  }
}




/* ============================================
【作品詳細ページのタイトルと下線】グラデボーダー　ここまで
============================================= */































/* =================================================
 【スマホ版】、画質レベルについてH2の上の当サイトでは～参考にして下さい文字サイズ、行間等
   ================================================= */	


/* PCはそのまま、スマホでだけ文字サイズを調整 */
@media screen and (max-width: 768px) {
  .hosoku-note .hosoku-description {
    font-size: 14px !important;  /* 本文と近いバランスに */
    line-height: 1.6;            /* 読みやすい行間 */
    padding: 8px;                /* 少し余白を減らす */
  }
}


/* =================================================
  【スマホ版】、画質レベルについてH2の上の当サイトでは～参考にして下さい文字サイズ、行間等　ここまで
   ================================================= */	








/* =====================================================================================
  【トップページの画質レベル】についてセッション
   ===================================================================================== */


.hosoku-note {
  max-width: 980px;
  margin: 10px auto 10px;  
  padding: 25px;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  background: #fffaf5;
  border: 1px solid #f1c87a;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}






/* アダルト漫画 同人誌 作品評価の目安 */
.hosoku-note h2 {
  font-size: 1.15em !important; 
  font-weight: bold;
  color: #7a6048;
  border-bottom: 1.5px solid #d8c8a3;	
  margin-bottom: 1em;
  padding-left: 1em;
  text-align: center;
}

/* 各画質項目 */
.hosoku-note .quality-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 2px solid #ffe29a;
  padding-bottom: 8px;
}

.quality-item .quality-icon {
  display: inline-block;
  width: 60px;
  height: 50px;
  margin-right: 15px;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  font-size: 14px;
  color: yellow;
  background: #000;
  border: 3px double gold;
  border-radius: 4px;

	
	
  /* ▼ 修正点：改行(br)を意識してアイコン内の行配置を中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.quality-icon.hd-full {
  font-size: 14px;
}
.quality-icon.ultra-4k,
.quality-icon.ultra-8k {
  font-size: 13px;
}

/* 説明文中のタイトル */
.hosoku-note strong {
  font-weight: bold;
  font-size: 17px;
  color: #333;
  margin-right: 5px;
}



/*アダルト漫画 同人誌 作品評価の目安*/

.hosoku-note h2 {
  background: #fff2e6;
  border-bottom: 1.5px solid rgba(160, 130, 90, 0.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  padding: 15px;
  border-radius: 6px;
	
}


.quality-text {
  font-size: 17px !important;
  line-height: 1.6 !important;
}




@media screen and (max-width: 600px) {
  .hosoku-note {
    margin: 4px auto 6px !important;       /* 外側余白 */
    padding: 2px 4px 8px 4px !important;   /* 上2px / 左右4px / 下8px */
  }

	
	/* 説明文（当サイトでは〜の部分）だけさらに調整 */
  .hosoku-note .hosoku-description {
    margin-top: 0 !important;  /* もしここに余白があれば消す */
    padding-top: 0 !important; /* 不要な内側余白を消す */
  }
	

  .hosoku-note .quality-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .quality-item .quality-icon {
    margin-bottom: 4px;
  }



	

.hosoku-note h2 {
    margin-top: -10px !important;
    margin-bottom: 10px !important;
    font-size: 19px !important;   /* px指定で確実に大きさを出す */
  }


	
	

  /* 各画質アイコンサイズ */
  .quality-item .quality-icon {
    width: 52px !important;
    height: 42px !important;
    padding: 3px !important;
    font-size: 12px !important;
  }

  /* 画質アイコンの上下の位置 */
  .quality-item img.quality-icon-img {
    position: relative;
    top: 5px;
  }

  .quality-icon {
    font-size: 11px !important;
    line-height: 1.2;
  }

  .quality-icon.hd-full {
    font-size: 12px !important;
  }

  .quality-icon.ultra-4k,
  .quality-icon.ultra-8k {
    font-size: 11px !important;
  }

  .quality-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}


/* =====================================================================================
  【トップページの画質レベル】についてセッション                           ここまで
   ===================================================================================== */




/* =====================================================================================
  【スマホ】【トップページの画質レベル】についての文字水色帯の上下幅 調整               
   ===================================================================================== */

@media screen and (max-width: 768px) {
  .hosoku-note h2 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 4px !important;      /* ← 上は控えめ */
    margin-bottom: 12px !important;  /* ← 下は少し広め */
    font-size: 16px !important;
  }
}

/* =====================================================================================
  【スマホ】【トップページの画質レベル】についての文字水色帯の上下幅 調整               
   ===================================================================================== */





/* =====================================================================================
  【スマホ】VRの魅力の背景帯水色の上下幅を狭くする　水色帯の上余白を狭くする
   ===================================================================================== */

@media screen and (max-width: 768px) {
 
  /* 水色帯（h2）の上下を少しだけ狭く */
  .wrr-section-box.vr-wrap h2 {
    padding-top: 6px !important;   /* 上下の高さを調整 */
    padding-bottom: 6px !important;
    font-size: 16px !important;    /* スマホ見出しサイズ */
    margin-bottom: 8px !important; /* 下の余白を少し狭く */
  }
}

/* =====================================================================================
  【スマホ】VRの魅力の背景帯水色の上下幅を狭くする　水色帯の上余白を狭くする　　　ここまで
   ===================================================================================== */













/* ===============================================
  トップページの動画クオリティの違いについて全体と外枠
   =============================================== */



.video-quality-note {
  max-width: 980px;
  margin: 10px auto 20px;
  padding: 25px;
  background: #fffaf5;
  border: 1px solid #f1c87a;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* タイトルの水色背景帯と中央揃え */
.video-quality-title {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 6px;
  font-size: 1.4em;
  font-weight: bold;
  color: #a86d00;
  text-align: center;
  margin: 0 0 20px;
}

/* アイコンの左寄せ */
.video-quality-title .video-icon {
  margin-right: 5px;
}

/* 説明文部分 */
.video-quality-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}








/* ===============================================
  トップページの動画クオリティの違いについて全体と外枠　ここまで
   =============================================== */













/* ===========================================
　　動画クオリティの違いについてブロック全体
   =========================================== */


.hikakubun-note {
  max-width: 980px;
  margin: 10px auto 20px !important;
  padding: 25px 20px 20px;
  background: #fffaf5;
  border: 1px solid #f1c87a;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  font-size: 17px;
  color: #333;
  position: relative;
  line-height: 1.9;
}

/* 上部タイトル帯：水色背景のラベル（中央揃え） */
.hikakubun-note .hikakubun-title {
  width: 100%;
  background: #f5f7fa;
  color: #a66a00;
  font-weight: bold;
  font-size: 1.15em;
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  margin: -10px 0 20px 0;
  box-sizing: border-box;
  display: block;
}

/* 強調箇所（HQや4K等） */
.hikakubun-note strong {
  color: #8b4000;
  font-weight: bold;
}






/* =============================================
【スマホ版】動画クオリティの違いについての文字サイズ、行間等
   ============================================= */	

@media screen and (max-width: 768px) {
  /* hosoku-note と hikakubun-note の本文サイズ調整 */
  .hosoku-note,
  .hikakubun-note {
    font-size: 14px !important;   /* バランス良いサイズ */
    line-height: 1.6;

    padding: 20px 12px !important;   /* ← 内側余白をさらに狭める */
    margin: 4px auto 8px !important; /* ← 外側余白もさらに詰める */
  }

  /* 見出し h2 のサイズ調整 */
  .hosoku-note h2,
  .hikakubun-note h2 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
}


/* =============================================
【スマホ版】動画クオリティの違いについての文字サイズ、行間等ここまで
============================================= */	




/* =============================================
【スマホ版】動画クオリティの違いについて調整
============================================= */
@media screen and (max-width: 768px) {
  /* 外枠の余白 */
  .hikakubun-note {
    padding-top: 10px !important;   /* VR映像の魅力と同じに */
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    margin: 4px auto 8px !important; /* 外側の上下余白も統一 */
  }

  /* 水色帯（見出し） */
  .hikakubun-note h2,
  .hikakubun-note .hikakubun-title {
    padding-top: 6px !important;    /* VR映像の魅力と同じ */
    padding-bottom: 6px !important;
    margin-top: 0 !important;       /* 上の空白をゼロ */
    margin-bottom: 8px !important;  /* 下の空白を少しだけ */
    font-size: 16px !important;     /* 見出し文字サイズ統一 */
  }
}
/* =============================================
【スマホ版】動画クオリティの違いについて調整ここまで
============================================= */










/* ===========================================
 　動画クオリティの違いについてブロック全体ここまで
   =========================================== */












/* =====================================================================================
　トップページ下部の 画質ラベル全体のコンテナ（HIGH QUALITY + 4K ULTRA + HD FULL をまとめる枠）
   ===================================================================================== */

.gashitu-high-quality {
  text-align: center !important;
  margin: 0px auto 0px !important; 

  /* ▼ ▼ 他のジャンルから探す と同じ雰囲気に統一 */
  background: #fff8f4;       /* 薄いベージュ系背景 */
  border: 1px solid #f1e4da; /* 枠線 */
  border-radius: 8px;        /* 角丸 */
  padding: 12px 12px;        /* 内側余白 */
  box-sizing: border-box;
}

/* 横長ラベル（HIGH QUALITY） */
.gashitu-high-quality .gashitu-icon {
  width: 140px !important;   /* 少し小さめに */
  max-width: 90% !important;
  height: auto !important;
  margin-bottom: 8px !important;  /* 下のバッジとの間隔も縮める */
}

/* バッジ列（HD/4K/8K） */
.gashitu-labels {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;              /* バッジ間の間隔少し縮める */
  flex-wrap: wrap !important;
  margin-bottom: 0px !important;     /* 下余白を縮める */
}

/* バッジ個別 */
.gashitu-labels .gashitu-badge {
  width: 70px !important;   /* 少し小さめに */
  height: auto !important;
}

/* ハイクオリティ説明文 */
.quality-note {
  font-size: 0.9em;
  font-weight: 500;
  color: #444;            
  text-align: center;
  margin: 0px 0 12px 0;    /* ← 上下余白を少しだけ詰める（例: 上8px 下12px） */
　padding: 6px 10px;           /* 内側に少し余白を足す */
  line-height: 1.6;
  border-radius: 4px;          /* 角を少し丸めて優しい印象に */
}


/* 黄色マーカー */
.highlight {
  background-color: #fff7cc; /* 薄い黄色 */
  padding: 0 2px;           /* 少し左右に余白 */
  border-radius: 2px;       /* 角丸で自然に */
}



/* ============================
   スマホ用（768px以下）
============================ */
@media (max-width: 768px) {

  /* コンテナ全体 */
  .gashitu-high-quality {
    margin: 0px auto 12px !important; /* コンテナ上下の余白をさらに狭める */
  }

  /* 説明文（品質メモ） */
  .gashitu-high-quality .quality-note {
    margin-bottom: 0px !important; /* 下余白を小さく */
  }

  /* メインのハイクオリティ横長アイコン */
  .gashitu-high-quality .gashitu-icon {
    width: 110px !important;
    margin-bottom: 6px !important; /* バッジとの間はそのまま */
  }

  /* バッジ全体（HD/HQ/4K/8K） */
  .gashitu-high-quality .gashitu-labels {
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important; /* バッジ間隔を少し狭く */
    flex-wrap: wrap !important;
  }

  /* 各バッジ個別（優先度競合対策で階層深め） */
  .gashitu-high-quality .gashitu-labels .gashitu-badge {
    width: 58px !important;  /* ← 効くバージョンに統一 */
    height: auto !important;
    margin-bottom: 0 !important;
  }
}

	


/* =====================================================================================
　トップページ下部の 画質ラベル全体のコンテナ（HIGH QUALITY + 4K ULTRA + HD FULL をまとめる枠）　ここまで
   ===================================================================================== */











/* ==========================================================================
　トップページの動画クオリティの違いについて全体セッション
   ========================================================================== */




/* 改行防止 */
.nowrap {
  white-space: nowrap;
}




/* 動画クオリティの違いテキストマーカー装飾*/

.marker {
  background: linear-gradient(transparent 60%, var(--marker-color, #e3f2fd) 60%);
  font-weight: bold;
  display: inline;
}

.marker-blue {
  --marker-color: #e3f2fd;
}


/* ==========================================================================
　トップページの動画クオリティの違いについて全体セッション
   ========================================================================== */





/* =============================================================
トップページのみ表示の【動画クオリティの違いについて】横の　check！アイコン 
   ============================================================= */


.hikakubun-note{
  position: relative;
  display: block !important;   
}

/* アイコンを箱の左上にピン留め */
.hikakubun-note .quality-icon{
  position: absolute;
  left: 14px;   
  top: 12px;    
  z-index: 1;
  pointer-events: none; 
}
.hikakubun-note .quality-icon img{
  width: 55px;  /* PC時のアイコンサイズ */
  height: auto;
  display: block;
}

/* タイトルは中央寄せのまま（崩さない） */
.hikakubun-title{
  text-align: center;
  font-weight: 700;
  margin: 0 0 10px;
}

/* 本文はアイコンと被らないように左だけ余白を確保 */
.hikakubun-note p{
  padding-left: 72px;  /* アイコンの幅＋余白ぶん */
  margin: 0 0 10px;
  line-height: 1.9;
}



@media (max-width: 600px){
  .hikakubun-note .quality-icon {
    left: 10px;
    top: 10px;
  }
  .hikakubun-note .quality-icon img {
    width: 51px; /* 44px の約15%アップ */
  }
  .hikakubun-note p {
    padding-left: 56px;
  }
}




/* =============================================================
　　　トップページのみ表示の【動画クオリティの違いについて】横の　check！アイコン ここまで
   ============================================================= */





/* =============================================================================================================
   パンくず全体のデザイン
   ========================================================================================================== */

/* ■ パンくず全体のコンテナ設定 */
.wrr-breadcrumb {
  font-size: 0.9rem;  /* 文字サイズ */
  color: #666;        /* テキスト色 */
  margin-bottom: 12px;
  display: flex;      /* 横並び */
  flex-wrap: nowrap;  /* 折り返さない（常に1行） */
  overflow: hidden;   /* はみ出し隠す */
}

/* ■ パンくずのリスト全体 */
.wrr-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 3px;
  min-width: 0;  /* flex省略対策 */
  flex: 1 1 auto;
}

/* ■ 区切り記号 */
.wrr-breadcrumb li::after {
  content: "›";
  margin: 0 6px;
  color: #aaa;
}
.wrr-breadcrumb li:last-child::after {
  content: "";
}

/* ■ リンクデザイン */
.wrr-breadcrumb a {
  color: #1a73e8;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;     /* 折り返さない */
}
.wrr-breadcrumb a:hover {
  text-decoration: underline;
  color: #0c5ec2;
}

/* ■ 各 li 要素 */
.wrr-breadcrumb li {
  flex: 0 0 auto;
  min-width: 0;  /* 省略効かせるため必須 */
}

/* ■ 最後の要素（現在ページ名） */
.wrr-breadcrumb li:last-child {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* …で省略 */
  font-weight: 500;
  color: #333;
}

/* ===============================================================
   スマホ版もPC版と統一：1行で省略
   =============================================================== */
@media screen and (max-width: 480px) {
  .wrr-breadcrumb {
    font-size: 0.85rem;
  }
}



/* ===================================================================================================
   パンくず全体のデザイン
   =================================================================================================== */









/* =============================================================
  スマホのみACFとCVブロックと映画アイコン高画質レベル順序入れ替え用のラッパー content.php
   ============================================================= */



.mobile-swap{
  display:flex;
  flex-direction:column;
}

/* PCデフォ順：ACF → CV */
.mobile-swap .block-acf{ order:1; }
.mobile-swap .block-cv { order:2; }

/* スマホでは CV を先に（CV → ACF） */
@media (max-width: 768px){
  .mobile-swap .block-acf{ order:2; }
  .mobile-swap .block-cv { order:1; }
}


/* =============================================================
  スマホのみACFとCVブロックと映画アイコン高画質レベル順序入れ替え用のラッパー content.php　ここまで
   ============================================================= */







/* ===========================================
金属光沢風のボーダー▼ この作品の詳細はこちら ▼の内側フレーム
   =========================================== */


.cv-block {
  position: relative;
  border: 4px solid transparent;
  border-radius: 10px;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(45deg, #d4af37, #f8e473, #b8860b) border-box;
  padding: 20px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.cv-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.5) 0%, transparent 60%);
}


/* ===========================================
金属光沢風のボーダー▼ この作品の詳細はこちら ▼の内側フレーム、ここまで
   =========================================== */









/* =======================================
PCではHIGH QUALITYも4K/8K/HDを表示し、スマホでは非表示に
   ======================================= */

@media screen and (max-width: 768px) {
  .title-and-quality .quality-icons-title {
    display: none !important;
  }
}

/* =======================================
PCではHIGH QUALITYも4K/8K/HDを表示し、スマホでは非表示に
   ======================================= */











/* =======================================
出演作品でよく見られている動画の左アイコンとキラリン効果
   ======================================= */



/* 見出し全体 */
.related-performer-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 1.1em;
}

/* アイコン用ラッパ */
.related-performer-heading .ninki-icon {
  position: relative;
  display: inline-block;
  height: 50px;
  margin-right: 15px;  /* テキストとの間隔 */
  transform: translateX(8px); /* 少し右に寄せる */
  overflow: hidden; /* 光がはみ出ないように */
}

.related-performer-heading .ninki-icon img {
  height: 100%;
  display: block;
}

/* キラリン効果をアイコンにだけ適用 */
.related-performer-heading .ninki-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  z-index: 2;
  animation: kirarin 5s ease-in-out infinite;
}

@keyframes kirarin {
  0% { left: -100%; }
  30% { left: 120%; }
  100% { left: 120%; }
}






/* =============================================================================
出演作品でよく見られている動画の左アイコンとキラリン効果　ここまで
   ============================================================================= */








@media screen and (max-width: 768px) {
  /* スマホ用：作品情報タイトル＋水色帯の位置 */
  .acf-details h2,
  h2:has(+ .acf-details) {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
  }

  /* テーブルとの余白 */
  .acf-details {
    margin-top: 3px !important;
  }
}





/* =============================================================================
【スマホ版】▼ この作品の詳細はこちら ▼の全体
   ============================================================================= */



@media screen and (max-width: 768px) {
  /* CVボックスの余白を詰める */
  .cvbutton-gashitu {
    margin: 5px auto !important;
    padding: 12px !important;
  }

	
 /* CVボックス内の「詳細はこちら」タイトルもコンパクトに */
  .cvbutton-gashitu .cv-header {
    margin-bottom: 6px !important;
    font-size: 17px !important;
    line-height: 1.6;
  }

	
	
  /* ボタンサイズをスマホ向けに少し小さく */
  .cvbutton-gashitu .cv-btn {
    padding: 14px 18px !important;
    font-size: 17px !important;
  }
	
	
	
	
	
	  /* アイコン＋再生時間行 */
  .cvbutton-gashitu .acf-runtime {
    display: flex;
    align-items: center;
    gap: 6px; /* アイコンと文字の距離 */
    margin-bottom: 0 !important; /* 下余白を完全に消す */
    padding-bottom: 0 !important;
		
  }

  /* アイコンサイズ */
  .cvbutton-gashitu .acf-runtime .runtime-icon {
    width: 50px !important;
    height: auto !important;
		margin-top: 5px
  }

	
/* 再生時間テキスト */
  .cvbutton-gashitu .acf-runtime .runtime-text {
    font-size: 16px !important;
    line-height: 1.4;
    color: #333;
  }

	
  /* ボタンの上余白を完全に削除 */
  .cvbutton-gashitu .cv-btn {
    margin-top: 0 !important;
  }


  /* 念のため親ブロックの線の余白 */
  .cvbutton-gashitu .cv-block {
    margin-top: 1px !important;
    padding-top: 1px !important;
  }

	
.gashitu-high-quality {
    text-align: center;
    margin: 10px auto 10px;
 }
		
}
	
	
	
/* =============================================================================
【スマホ版】▼ この作品の詳細はこちら ▼の全体ここまで
   ============================================================================= */	
	










/* =======================================================================================
【スマホ限定】のサンプル画像6枚表示functionphpに記述済み＋このコード
   ======================================================================================= */	




.show-more-btn {
  display: block;
  margin-top: 0px;
  margin-bottom: 24px; /* 余白を少し広めに */
  margin-left: auto;
  margin-right: auto;
  padding: 14px 28px; /* タップしやすさ + 高級感 */
  font-size: 16px; /* 視認性を上げる */
  font-weight: bold;
  color: #fff;
  background: linear-gradient(145deg, #222, #333); /* 上品な黒グラデーション */
  border: 1px solid #555; /* 薄いグレーの縁取りで高級感 */
  border-radius: 4px; /* 少し角を落ち着かせる */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 影で立体感 */
}

.show-more-btn:hover {
  background: linear-gradient(145deg, #333, #444); /* ホバー時にほんのり明るく */
  border-color: #777; /* 輪郭を少し明るく */
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}



/* =======================================================================================
【スマホ限定】のサンプル画像6枚表示functionphpに記述済み＋このコードここまで
   ======================================================================================= */	








/* ==================================================================================
 h1, h2 の字体に 高級感のある Google Fonts
  ================================================================================= */	


h1, h2.section-title {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.5px;
}


/* ==================================================================================
h1, h2 の字体に 高級感のある Google Fonts　ここまで
   ================================================================================== */	







/* ==========================================================================================================
　TOPページ、各ページの画質レベルについて　画質アイコンサイズなど　【スマホ版もここ】上書きこちら優先
   ========================================================================================================== */	

/* PCは現状維持 */
.quality-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.quality-icon-img {
  width: 50px !important;
  height: auto;
  margin-right: 12px;
}

.quality-text {
  font-size: 15px;
  line-height: 1.6;
}

/* --- スマホ専用 --- */
@media screen and (max-width: 768px) {
  .quality-item {
    display: flex !important;        /* 横並びを強制 */
    flex-direction: row !important;  /* 縦並びを禁止 */
    align-items: flex-start !important;
  }

  .quality-item .quality-icon-img {
    width: 40px !important;          /* ← !important を追加して上書き */
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    display: block !important;
    height: auto !important;
  }



  .quality-text {
    flex: 1;                  /* 残り幅を占有 */
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;   /* スマホで自然に改行 */
    display: block;
  }
}




/* ==========================================================================================================
　TOPページ、各ページの画質レベルについて　画質アイコンサイズなど　【スマホ版もここ】上書きこちら優先
   ========================================================================================================== */	








/* ====================================================================================
人気タグから探す 各タイプ別見出し　スマホでも左側にブラジャーアイコン表示
==================================================================================== */
@media screen and (max-width: 768px) {
  .tag-label {
    display: flex;
    flex-direction: row; /* ← 横並び */
    align-items: center;
    justify-content: flex-start; /* ← 左揃え */
    gap: 8px;
    position: relative;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    padding-right: 0; /* ← 不要な右余白削除 */
  }

  /* ブラジャーアイコンを左に戻す */
  .tag-label .bra-icon {
    order: -1; /* ← テキストの左側に配置 */
    position: static; /* ← 絶対配置を解除 */
    width: 32px;
    height: auto;
    margin-right: 6px;
    margin-left: 0;
    transform: none;
    top: auto;
    right: auto;
  }

  /* タグリスト表示制御はそのまま */
  .tag-list {
    display: none !important;
    padding-left: 10px;
    margin-top: 8px;
  }

  .tag-label.active + .tag-list {
    display: block !important;
  }
}


/* ======================================================================
人気タグから探す　ブラジャーアイコン　おっぱいブルブル演出　　JS記述済み
  ======================================================================= */

@media screen and (max-width: 768px) {
  @keyframes bra-swing {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(12deg); }   /* 右へ大きく */
    50%  { transform: rotate(-12deg); }  /* 左へ大きく */
    75%  { transform: rotate(8deg); }    /* 徐々に小さく */
    100% { transform: rotate(0deg); }    /* 元に戻る */
  }

  .bra-swing {
    transform-origin: top center;   /* 上を支点にブランコのように揺れる */
    animation: 
      bra-swing 2s ease-in-out 2,   /* 2秒で大きく左右に2回揺れる */
      bra-swing 2s ease-in-out 1 4s;/* 4秒後にもう1回揺れる */
  }
}

/* ===============================================================================
人気タグから探す　ブラジャーアイコン　おっぱいブルブル演出　JS記述済み　ここまで
  ================================================================================ */









/* =============================================================================================================================
【スマホ限定】、横幅余白をなくして一杯に表示する　【商品詳細ページ】
 =============================================================================================================================== */
@media screen and (max-width: 768px) {
  /* wrap クラスの幅制御を解除 */
  .content-in.wrap,
  .single-post .article {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* 記事本文の背景余白も広げたい場合 */
  .single-post .article {
    border: none !important;   /* もし枠が不要なら消す */
    background-color: transparent !important; /* 背景も外せる */
  }
}


/* =============================================================================================================================
【スマホ限定】横幅余白をなくして一杯に表示する　【商品詳細ページ】　　　　　　　　　　ここまで
 ============================================================================================================================== */






/* =========================================================================================================================
【スマホ限定】、出演作品でよく見られている動画の箇所の左右余白をなくして一杯に表示する　【商品詳細ページ】
 ========================================================================================================================= */

@media screen and (max-width: 768px) {
  .single-post .under-entry-content {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;  /* 角丸も消すなら */
  }
}

/* =========================================================================================================================
【スマホ限定】、出演作品でよく見られている動画の箇所の左右余白をなくして一杯に表示する　【商品詳細ページ】
　ここまで
 ========================================================================================================================= */





/* =========================================================================================================================
【スマホ限定】、トップページ下部の最新記事の箇所の左右余白を0にして一杯に表示する　　【トップページ下部作品一覧】
　 ========================================================================================================================= */

@media screen and (max-width: 768px) {
  .post-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =========================================================================================================================
【スマホ限定】、トップページ下部の最新記事の箇所の左右余白を0にして一杯に表示する　　【トップページ下部作品一覧】
　ここまで
 ========================================================================================================================= */
















/* ===========================================================================================
【スマホ版】トップページのみの最新更新　2列レイアウト
 =========================================================================================== */


@media screen and (max-width: 768px) {
  .post-list {
    display: grid !important;
    grid-template-columns: repeat(2, calc(50% - 10px)); /* ←余白込みで100%以下 */
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 10px;  /* 左右余白 */
    box-sizing: border-box; /* ← 余白を計算に含める */
  }

  .post-list .entry-card {
    width: 100% !important;
    box-sizing: border-box;
  }
}





@media screen and (max-width: 768px) {
	
 /* ▼ 投稿カードのサムネイルを包む枠設定 ▼ */	
	
  .post-list .entry-thumb {
    width: 100% !important;       /* サムネ枠をカードいっぱいに */
    height: auto !important;      /* 高さは可変 */
    overflow: hidden;             /* オーバー防止 */
    box-sizing: border-box;
  }

	
	/* ▼ サムネイル画像自体の設定 ▼ */
  .post-list .entry-thumb img {
    width: 100% !important;       /* 枠内に収める */
    height: auto !important;
    display: block;
  }
}



/* ===========================================================================================
【スマホ版】トップページのみの最新更新　　2列レイアウトここまで
 =========================================================================================== */









/* ===========================================================================================
【スマホ限定】/2d/　/vr/　/siroto/　のページ下部の作品一覧のスマホ3列（余白狭め版）
=========================================================================================== */

@media screen and (max-width: 768px) {
  /* .related-list をスマホで3列にする */
  body .related-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3列均等 */
    column-gap: 1px !important;   /* 横余白 → 少しタイトに */
    row-gap: 1px !important;      /* 縦余白 → 少しタイトに */
    padding: 0 1px !important;    /* 画面端の余白を最小限に */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;   /* 横スクロール防止 */
  }

  body .related-list .entry-card {
    width: 100% !important;
    margin: 0 !important;         /* 上下左右のマージンをリセット */
    padding: 0 !important;        /* 内側余白もゼロ（カード枠と画像だけに） */
    box-sizing: border-box !important;
  }

  body .related-list .entry-thumb {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body .related-list .entry-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px;
  }
}

/* ===========================================================================================
【スマホ限定】/2d/　/vr/　/siroto/　のページ下部の作品一覧のスマホ3列（余白狭め版）ここまで
=========================================================================================== */











/* ===========================================================================================
【スマホ限定】/2d/ /vr/ /siroto/ ページ下部の作品カードのメタ情報をコンパクトに
=========================================================================================== */

@media screen and (max-width: 768px) {
  /* ▼ カード全体 */
  body .related-list .entry-card {
    font-size: 0.74rem !important;  
    line-height: 1.35 !important;   
    text-align: center !important;  
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ▼ タイトル（2行まで表示） */
  body .related-list .entry-card .entry-title,
  body .related-list .entry-card .entry-title a {
    font-size: 0.7rem !important;        /* 少し小さめ */
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin: 2px 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;    /* 2行まで */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ▼ 出演者（ラベルなし・2行まで） */
  body .related-list .entry-card .entry-meta {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 2px 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;    /* 出演者が複数でも2行まで */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ▼ 再生時間のスタイル */
  body .related-list .entry-card .entry-runtime {
    font-size: 0.8rem !important;    /* 出演者と同じくらい */
    font-weight: 600 !important;     /* 太字で強調 */
    color: #222 !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* ▼ CVボタン：横幅いっぱいだと窮屈なので左右に少し余白 */
 body .related-list .entry-card .cv-button,
  body .related-list .entry-card .cv-btn {
    display: block !important;
    width: calc(100% - 4px) !important;   /* 横幅100% - 左右5px */
    margin: 2px auto 6px auto !important;  /* 上4px 下6pxに調整 */
    font-size: 0.8rem !important;
    padding: 5px 0 !important;             /* 縦の余白は少しタイトに */
    border-radius: 6px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
	
}

/* ===========================================================================================
【スマホ限定】/2d/ /vr/ /siroto/ ページ下部の作品カードのメタ情報をコンパクトに ここまで
=========================================================================================== */



















/* ===========================================================================================
　PC,スマホ 共通　/2d/ /vr/ /siroto/ ページ下部の作品カードの時間マーク
=========================================================================================== */


.entry-runtime {
  display: flex;
  align-items: center;
  justify-content: center;  /* 中央揃え */
  gap: 5px;                 /* アイコンと時間の間隔 */
  font-size: 0.8rem;
  font-weight: 600;
  color: #222;
  margin: 4px 0;
}

.entry-runtime .runtime-icon {
  width: 25px;
  height: 25px;
  display: inline-block;
}


/* ===========================================================================================
　PC,スマホ 共通　/2d/ /vr/ /siroto/ ページ下部の作品カードの時間マーク　　　ここまで
=========================================================================================== */










/* ===========================================================================================
【スマホ限定】トップページの通常の投稿一覧 (.post-list) を3列グリッドにし、余白を最小化
=========================================================================================== */
@media screen and (max-width: 768px) {

  /* ▼ 投稿一覧を3列化（余白ぎりぎりまで詰める） */
  body .post-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 2px !important;   /* 横の隙間をさらに狭める */
    row-gap: 2px !important;      /* 縦の隙間をさらに狭める */
    padding: 0 4px !important;    /* スマホ画面の左右の余白を最小限に */
    margin: 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ▼ カード全体 */
  body .post-list .entry-card {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    margin: 0 !important;       /* 上下左右の余白を完全に詰める */
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ▼ サムネイル */
  body .post-list .entry-thumb {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body .post-list .entry-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 3px !important; /* 少し角丸は残す */
  }

  /* ▼ タイトル：2行まで表示 */
  body .post-list .entry-card .entry-title,
  body .post-list .entry-card .entry-title a {
    font-size: 0.68rem !important;   /* より詰めても読みやすいサイズ */
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 1px 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ▼ 出演者名 */
  body .post-list .entry-card .entry-meta {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 1px 0 !important;
    line-height: 1.3 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ▼ 再生時間 */
  body .post-list .entry-card .entry-runtime {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #222 !important;
    margin-top: 1px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* ▼ CVボタン：横幅いっぱい＋上下余白を詰める */
  body .post-list .entry-card .cv-button {
    margin: 3px 0 2px !important; /* 上3px / 下2px に調整 */
  }
  body .post-list .entry-card .cv-btn {
    display: block !important;
    width: calc(100% - 6px) !important; /* 横幅いっぱい、左右に3px余白 */
    margin: 0 auto !important;
    padding: 5px 0 !important;
    font-size: 0.72rem !important;
    border-radius: 4px !important;
    text-align: center !important;
  }
}
/* ===========================================================================================
【スマホ限定】トップページの通常の投稿一覧 (.post-list) を3列グリッドにし、余白を最小化　ここまで
=========================================================================================== */













/* ===========================================================================================
【スマホ限定】トップページ作品一覧：素人作品と通常作品の高さ揃え
=========================================================================================== */
@media screen and (max-width: 768px) {
  /* ▼ カード全体をflex化して高さ統一 */
  body .related-list .entry-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* ▼ タイトル（全作品：2行固定＋高さ統一） */
  body .related-list .entry-card .entry-title {
    min-height: 2.8em !important;  /* 高さを固定 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
  }

  /* ▼ 出演者（全作品：高さ統一） */
  body .related-list .entry-card .entry-meta {
    min-height: 1.8em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  /* ▼ 再生時間（全作品：高さ統一） */
  body .related-list .entry-card .entry-runtime {
    min-height: 1.8em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  /* ▼ CVボタンは常に最下部に */
  body .related-list .entry-card .cv-button {
    margin-top: auto !important;
  }

  /* ───────────────
     ▼ 素人作品だけ追加で下げる
     ─────────────── */
  body .related-list .siroto-entry .entry-title {
    margin-top: 6px !important;   /* タイトルを少し下げる */
  }

  body .related-list .siroto-entry .entry-meta {
    margin-top: 16px !important;  /* 出演者を下げて通常作品と高さを揃える */
  }

  body .related-list .siroto-entry .entry-runtime {
    margin-top: 18px !important;  /* 再生時間を下げて通常作品と高さを揃える */
  }
}
/* ===========================================================================================
【スマホ限定】トップページ作品一覧：素人作品と通常作品の高さ揃え ここまで
=========================================================================================== */













/* ========================================================================================================================
   エントリーカード内の画質アイコン配置（中央寄せ＋余白制御）条件分岐はentrycard.PHP　に記述済み
   ======================================================================================================================== */

.entry-quality {
  display: flex;              /* アイコンを横並びにする（インラインではなくフレックスで制御） */
  justify-content: center;    /* 横方向を中央寄せ */
  align-items: center;        /* 縦方向を中央揃え（高さが違っても揃う） */
  gap: 2px;                   /* アイコン同士の間隔を「2px」に固定 */
  margin: 0 0 5px 0;          /* 上=0, 右=0, 下=5px, 左=0 → 下だけ余白を残す */
}

.entry-quality .quality-icon {
  height: 18px;               /* アイコンの高さを固定（縦サイズ統一） */
  width: auto;                /* 横幅は縦横比を維持して自動調整 */
  margin: 0;                  /* 余白はすべて消す（gapで制御するため） */
}



/* ============================================================
   スマホ専用（幅768px以下）
   ============================================================ */


@media (max-width: 768px) {
  .entry-quality {
    gap: 1px;                 /* アイコン同士の間隔をさらに狭くする */
  }

  .entry-quality .quality-icon {
    height: 16px;             /* スマホでは少し小さく */
  }
}





/* ========================================================================================================================
   エントリーカード内の画質アイコン配置（中央寄せ＋余白制御）条件分岐はentrycard.PHP　に記述済み　　　ここまで
  ======================================================================================================================== */








/* =====================================================================
テーマ側のCSSで強制されていて、優先度がひくいので下記のセレクタを強化してこれでサムネの画像の調整が効く
 ======================================================================== */


テーマ側のCSSで強制
.entry-card .entry-thumb {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* =====================================================================
テーマ側のCSSで強制されていて、優先度がひくいのでセレクタを強化してこれでサムネの画像の調整が効く　　　　ここまで
 ======================================================================== */










/* =======================================================================================
【スマホ版】画質レベルについての箇所のアイコンサイズ＋解説文の文字サイズ＋行間を8月28日に修正したので後日、上の方の同じクラスあるのでこのコードを併合する事　　　　　　後日以下のコードをうえのほうに同じクラスがあるので併合する事
 ======================================================================================= */


@media screen and (max-width: 768px) {
  /* 画質レベル行 */
  .quality-guide-block .quality-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  /* アイコンサイズ上書き */
  .quality-guide-block .quality-item img.quality-icon-img {
    width: 40px !important;   /* ← ここで65pxを上書き */
    height: auto !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
  }

  /* 解説テキスト */
  .quality-guide-block .kaisetubun,
  .quality-guide-block .quality-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}





/* =======================================================================================
【スマホ版】画質レベルについての箇所のアイコンサイズ＋解説文の文字サイズ＋行間を8月28日に修正したので後日、上の方の同じクラスあるのでこのコードを併合する事　　　　　　後日以下のコードをうえのほうに同じクラスがあるので併合する事　　　ここまで
 ======================================================================================= */






/* =====================================================================================
 作品詳細ページのみ　サンプル画像に入る前と最後に表示  お気に入り登録を促すだけ機能はなし　中央寄せ版
   ===================================================================================== */

.bookmark-guide {
  display: flex;             
  align-items: center;       
  justify-content: center;   
  gap: 6px;
  padding: 6px 10px;         /* PC用の余白 */
  border: 1px solid #ccc;   
  border-radius: 4px;       
  font-size: 0.95em;
  margin: 10px auto;        
  max-width: 220px;         /* PCでは中央寄せ */
}

.bookmark-guide .bookmark-icon {
  font-size: 1.1em;
  background: linear-gradient(90deg, #00e0c7, #a57ff6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bookmark-guide .bookmark-text {
  color: #333;
  font-weight: bold;
}

/* スマホ時：横幅いっぱい + 上下余白を狭める */
@media (max-width: 768px) {
  .bookmark-guide {
    max-width: 100%;     /* 横幅一杯 */
    padding: 3px 8px;    /* 上下を少なめにしてスリムに */
    font-size: 1em;      /* 読みやすさ維持 */
  }
}

/* =====================================================================================
 作品詳細ページのみ　サンプル画像に入る前と最後に表示  お気に入り登録を促すだけ機能はなし　中央寄せ版　　　　　　ここまで
  　　 ===================================================================================== */












/* =======================================================================================
作品詳細ページの出演作品でよく見られている 2D動画 / VR動画 の見出し
=======================================================================================*/

/* PC共通 */
.related-performer-heading {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 1em !important;
  line-height: 1.4;
  text-align: left;
}


/* 【スマホ版】アイコン下に見出し配置＋余白調整*/
@media screen and (max-width: 768px) {
  .related-performer-heading {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    font-size: 0.95em !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;   /* ← 下に余白を追加（ここが効く） */
    padding: 0 !important;
    width: 100% !important;
  }

  .related-performer-heading img {
    width: 70px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  .related-performer-heading .heading-text {
    margin-top: -2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    width: 100% !important;
    text-align: left !important;
  }
}


/* =======================================================================================
作品詳細ページの出演作品でよく見られている 2D動画 / VR動画 の見出し 　　　　　　ここまで
=======================================================================================*/








/* ==========================================================================================
 【スマホ版】出演作品でよく見られている動画の横幅領域を背景色も含めて一杯に表示
 ============================================================================================= */




@media screen and (max-width: 768px) {
  .single-post .under-entry-content {
    width: 100% !important;       /* 横幅を画面いっぱいに */
    margin: 0 !important;         /* 外側余白を消す */
    padding-left: 0 !important;   /* 左右の内側余白も消す */
    padding-right: 0 !important;
    border-radius: 0 !important;  /* 角丸をなくして端まで色が伸びる */
  }
}





/* =======================================================================================
 【スマホ版】出演作品でよく見られている動画の横幅領域を背景色も含めて一杯に表示　　　　ここまで
 ============================================================================================= */







/* =======================================================================================================================
   出演作品でよく見られている2D動画、別名義として出演している　箇所のサムネイルサイズ　上に同じクラスで定義しているがこちら優先
   ====================================================================================================================== */
.related-performer-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; /* ランキングと同等サイズ */
  gap: 1px !important;
  margin: 12px 0 !important;
}

.related-performer-thumbs img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}






/* ===============================
   素人作品（シリーズ別）サムネイル
   =============================== */
.related-thumbnail-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; /* ← 少し大きく修正 */
  gap: 2px !important;   
  margin: 12px 0 !important;
}



.related-thumbnail-list img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;  /* 正方形比率を強制 */
  object-fit: contain !important;  /* トリミングせず余白で調整 */
  border-radius: 4px !important;
}



/* ===============================
   スマホ用（3列固定）
   =============================== */
@media screen and (max-width: 768px) {
  .related-performer-thumbs {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
  }

  .related-thumbnail-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
  }
}

/* =======================================================================================================================
 出演作品でよく見られている2D動画、別名義として出演している箇所のサムネイルサイズ　上に同じクラスで定義しているがこちら優先　ここまで
   ====================================================================================================================== */




/* ============================================================================================================================
  商品詳細ページの 素人作品（シリーズ別）例えば素人ホイホイなど素人作品はサムネが正方形なのでスマホ(2列)表示
  ============================================================================================================================ */

.related-thumbnail-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  margin: 12px auto !important;
  justify-content: center !important; /* ← グリッド全体を中央寄せ */
}

/* ===============================
   【スマホ版】
   =============================== */
@media screen and (max-width: 768px) {
  .related-thumbnail-list {
    grid-template-columns: repeat(2, 1fr) !important; /* 2列固定 */
    gap: 8px !important;
    max-width: 95% !important;  /* ← 両端に余白を残して中央に */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}




/* ============================================================================================================================
  商品詳細ページの 素人作品（シリーズ別）例えば素人ホイホイなど素人作品はサムネが正方形なのでスマホ(2列)表示　　　　　　ここまで
  ============================================================================================================================ */




/* ============================================================================================================================
  シリーズごとにページを生成する。functionphpにも記述済み。タクソノミー　　　投稿管理画面でシリーズを入力すると自動でシリーズに振り分けそこに作品が振り分けられる
  ============================================================================================================================ */






.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px auto;
  max-width: 1200px;
}

.series-item {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  text-align: center;
}

.series-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.series-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.series-title {
  font-size: 0.9em;
  font-weight: 600;
  padding: 6px;
  line-height: 1.4;
}

/* タブレット・スマホ共通：3列固定 */
@media screen and (max-width: 1024px) {
  .series-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}




/* ============================================================================================================================
  シリーズごとにページを生成する。functionphpにも記述済み。タクソノミー　　　投稿管理画面でシリーズを入力すると自動でシリーズに振り分けそこに作品が振り分けられる　　ここまで
  ============================================================================================================================ */













/* ================================================================================================================
   シリーズページ専用用（taxonomy-series.php）　/series/　専用カード整列
   タグページと同一の見た目に合わせる　　　　　　　　　　　　
====================================================================================================================*/


.series-content .entry-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 220px)); /* 最小200px, 最大220px */
  justify-content: center; /* 中央寄せ */
  gap: 20px;
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* カード本体 */
.series-content .entry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

/* サムネイル比率固定 */
.series-content .entry-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

/* メタ情報アイコン縮小 */
.series-content .post-meta img,
.series-content .quality-icon img {
  max-height: 22px;
  width: auto;
}

/* テキスト統一 */
.series-content .entry-meta,
.series-content .entry-title {
  font-size: 0.9em;
  text-align: center;
  margin-top: 5px;
}

/* =========================
   H1 見出し調整
   ========================= */
.series-content .entry-title {
  margin-bottom: 15px;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
}

/* =========================
   ランキング区切り余白
   ========================= */
.series-content .gradient-line {
  margin: 40px 0;
}

/* =========================
   スマホ表示（768px以下）
   ========================= */
@media screen and (max-width: 768px) {
  .series-content .entry-card-wrap {
    grid-template-columns: repeat(2, minmax(160px, 1fr)); /* 常に2列 */
    gap: 10px;
  }

  .series-content .entry-card {
    margin: 5px 0;
  }

  .series-content .entry-meta,
  .series-content .entry-title {
    font-size: 0.85em;
  }

  .series-content .entry-title {
    font-size: 1.3em;
  }
}





/* ================================================================================================================
   シリーズページ専用用（taxonomy-series.php）　/series/　専用カード整列
   タグページと同一の見た目に合わせる　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ここまで
====================================================================================================================*/






/* ============================================================================
   タグページ専用カード整列    （シリーズページと同じ数値定義）
   ============================================================================ */

.tag-content .entry-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 220px)); /* 最小200px, 最大220px */
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* カード本体 */
.tag-content .entry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

/* サムネイル比率固定 */
.tag-content .entry-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

/* メタ情報アイコン縮小 */
.tag-content .post-meta img,
.tag-content .quality-icon img {
  max-height: 22px;
  width: auto;
}

/* テキスト統一 */
.tag-content .entry-meta,
.tag-content .entry-title {
  font-size: 0.9em;
  text-align: center;
  margin-top: 5px;
}

/* =========================
   H1 見出し調整
   ========================= */
.tag-content .entry-title {
  margin-bottom: 15px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

/* =========================
   ランキング区切り余白
   ========================= */
.tag-content .gradient-line {
  margin: 40px 0;
}

/* ===== スマホ表示（768px以下） ===== */
@media screen and (max-width: 768px) {
  .tag-content .entry-card-wrap {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
  }

  .tag-content .entry-card {
    margin: 5px 0;
  }

  .tag-content .entry-meta,
  .tag-content .entry-title {
    font-size: 0.85em;
  }

  .tag-content .entry-title {
    font-size: 1.3em;
  }
}






/* ============================================================================
   タグページ専用カード整列    （シリーズページと同じ数値定義）   ここまで
   ============================================================================ */











/* ==========================================================================================
  作品詳細ページ下部に表示される 関連シリーズ見出しをリンクテキスト形式
============================================================================================== */

.series-heading-link {
  color: #0073e6;
  text-decoration: none;
}
.series-heading-link:hover {
  text-decoration: underline;
}

/* ==============================
   関連サムネイル一覧
============================== */
.related-thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}
.related-thumbnail-item {
  flex: 0 0 auto;
  width: 160px;
}
.related-thumbnail-item img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

/* ==============================
   シリーズページへリンクボタン
============================== */
.related-series-btn {
  text-align: center;
  margin-top: 20px;
}
.series-button {
  display: inline-block;
  border: 1px solid #0073e6;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  color: #0073e6;
  text-decoration: none;
  background: #fff;
  font-size: 1em;
  transition: all 0.3s;
  line-height: 1.4;
  text-align: center;
}
.series-button:hover {
  background: #0073e6;
  color: #fff;
}

/* ==============================
   スマホ最適化
============================== */
@media screen and (max-width: 768px) {
  .related-thumbnail-list {
    justify-content: center;
  }
  .related-thumbnail-item {
    width: 45%;
  }
  .series-button {
    white-space: normal;   /* 改行許可 */
    word-break: keep-all;
    font-size: 0.95em;
    padding: 8px 14px;
    line-height: 1.6;
  }
}



/* ==========================================================================================
  作品詳細ページ下部に表示される 関連シリーズ見出しをリンクテキスト形式　　　　ここまで
============================================================================================= */















/* =========================================================================================================
  タグページ、シリーズページの説明文のフォントサイズ、配置等　　　　【タグページとシリーズページの説明文共通】
=========================================================================================================== */



/* タグページとシリーズページを同じ見た目に（背景・線なし） */
.tag-description.entry-content,
.series-description.entry-content,
.tag-intro,
.series-intro {
  font-size: 17px !important;
  line-height: 1.7 !important;
  letter-spacing: -0.02em;
  margin: 10px 0 !important;
  padding: 0 !important;
  background: none !important;       /* 背景を削除 */
  border-left: none !important;      /* 左線を削除 */
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}




/* スマホ用 */
@media screen and (max-width: 768px) {
  .tag-description.entry-content,
  .series-description.entry-content,
  .tag-intro,
  .series-intro {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    background: none !important;
    border-left: none !important;
  }
}



/* =========================================================================================================
  タグページ、シリーズページの説明文のフォントサイズ、配置等　【タグページとシリーズページの説明文共通】 ここまで
=========================================================================================================== */





/* マーカー色 */
.series-intro mark.hl {
  background-color: #fff8c4;  /* 淡い黄色（スクショと同じ） */
  padding: 0 2px;
}



/* ==========================================================================================
  　シリーズページの説明文のマーカー色　　　【タグページ説明文と共通】　ここまで
============================================================================================= */




/* ==========================================================================================
  　タグページの説明文のマーカー色　　【シリーズページ説明文と共通】　
============================================================================================= */

.tag-intro mark.hl,
.series-intro mark.hl {
  background-color: #fff8c4;  /* 淡い黄色 */
  padding: 0 2px;
}


/* ==========================================================================================
  タグページの説明文のマーカー色　【シリーズページ説明文と共通】　　　ここまで
============================================================================================= */








/* ============================================================================================================================
  商品詳細ページの画質レベル下にある、その作品の出演者の他の全作品を見るボタン　その出演者のタグページに飛ぶ
  ============================================================================================================================ */


.performer-link-below-cv {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}


.performer-other-link {
  display: inline-block;        /* 青枠 */
  border: 2px solid #007bff;   /* ← ここを1px→2pxに変更 */
  color: #007bff !important;   /* テキストも青 */
  font-size: 16px;             /* 少し大きめ */
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 4px;
  background-color: transparent;  /* 背景なしで軽い印象 */
  text-decoration: none;
  transition: all 0.3s ease;
}


.performer-other-link:hover {
  background-color: #007bff; /* hover時は青塗り */
  color: #fff !important;   /* hover時は白文字 */
  text-decoration: none;
}




/* ======================
   スマホ用調整（768px以下）
   ====================== */
@media screen and (max-width: 768px) {
  .performer-other-link {
    font-size: 14px;      /* フォント少し小さく */
    padding: 5px 12px;    /* 余白も少し小さく */
    border-width: 2px;    /* 枠線はそのまま太めで維持 */
  }

  .performer-link-below-cv {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}


/* ============================================================================================================================
  商品詳細ページの画質レベル下にある、その作品の出演者の他の全作品を見るボタン　その出演者のタグページに飛ぶ　　　ここまで
  ============================================================================================================================ */
































/* 作品情報の背景付き見出しの上下余白を狭める */
.acf-details-left h2 {
  padding-top: 6px !important;   /* 上の余白 */
  padding-bottom: 6px !important;/* 下の余白 */
  margin-top: 0 !important;      /* 上の余白リセット */
  margin-bottom: 0px !important; /* 下に少し余白だけ残す */
  font-size: 1em !important;     /* 必要に応じて文字サイズ */
  line-height: 1.3 !important;   /* 行間も詰める */
}











/* 左右の比率を40:60に変更 */
.acf-and-ga4-wrap .acf-details-left {
  flex: 0 0 40% !important;  /* 左のACF */
  min-width: 0 !important;   /* min-width をリセット */
}

.acf-and-ga4-wrap .ga4-related-thumbs {
  flex: 0 0 60% !important;  /* 右の関連作品 */
  min-width: 0 !important;   /* min-width をリセット */
}






/* 余計なラッパーを展開して grid が効くようにする */
.ga4-thumbs-grid .ga4-horizontal-ranking {
  display: contents;
}





/* ==============================================================================================
   ACFの右側のこの作品を見た人はこちらも見ています領域の画像の比率固定＆トリミング調整
   （枠内に収めて綺麗に並ぶようにする）
 ============================================================================================== */

.ga4-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 150%;         /* アスペクト比（例：2:3）を固定 */
  overflow: hidden;
}

.ga4-image-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* ← 画像を枠内に全部表示するトリミングせずに */
}



/* ====　↓↓↓　サムネイル画像ラッパー（余白背景の設定） object-fit: contain 使用時の上下左右の余白を自然に見せるため==== */
   
.ga4-image-wrapper {
  background-color: #fff;  /* 白背景で余白を自然に */
}




/* ==============================================================================================
   ACFの右側のこの作品を見た人はこちらも見ています領域の画像の比率固定＆トリミング調整
   （枠内に収めて綺麗に並ぶようにする）　　　　　　　ここまで
 ============================================================================================== */








/* ============================================================================================
  ACFの右側のこの作品を見た人はこちらも見ています領域 
  サムネイルのサイズ調整（グリッド収まり最適化） 各アイテム・ラッパーをグリッド幅に合わせて統一
   ============================================================================================ */

/* 各アイテムをグリッドの幅に必ず収める */
.ga4-thumbs-grid .ga4-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* paddingやborderを含めて調整 */
}

/* ラッパー自体もグリッド幅いっぱいに合わせる */
.ga4-thumbs-grid .ga4-image-wrapper {
  width: 100% !important;
  height: auto;
}



/* ============================================================================================
  ACFの右側のこの作品を見た人はこちらも見ています領域 
  サムネイルのサイズ調整（グリッド収まり最適化） 各アイテム・ラッパーをグリッド幅に合わせて統一　　　　ここまで
   ============================================================================================ */






/* ===========================================================
   作品情報テーブルの見出しセル固定化
   =========================================================== */

/* 作品情報テーブルの見出しセルを固定幅にする */
.acf-details table th {
  width: 120px;        
  white-space: nowrap; /* 折り返し禁止 */
}

/* ===========================================================
   作品情報テーブルの見出しセル固定化　　　　　　　　ここまで
  =========================================================== */



























/* ===========================================================================================================
【タグページのエントリーカード】　縦横比の異なるサムネイルでもエントリーカードとの表示位置調整する
  ========================================================================================================== */


body.tag .entry-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  padding: 2px 2px 8px 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.2s ease;
  height: 100%;
  box-sizing: border-box;
}

/* サムネイルラッパーをカード幅いっぱいに */
body.tag .entry-card .entry-thumb {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* サムネイル画像をカード幅いっぱいに（切り取りなし） */
body.tag .entry-card .entry-thumb img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 4px 4px 0 0;
}



/* ==========================================================================================================
【タグページのエントリーカード】　縦横比の異なるサムネイルでもエントリーカードとの表示位置調整する　　　　　ここまで
  ========================================================================================================== */







/* ==========================================================================================================
　　　　　　【サンプル画像　縦積み　　　　PC スマホで共通JSで拡大】
  ========================================================================================================== */

/* ▼ メインギャラリー（縦積み化ベース） */
.sample-gallery {
  display: block;
  margin: 20px auto;          /* ← 中央寄せ */
  max-width: 860px;           /* ← PC時の最大横幅を制限 */
  padding: 0 10px;            /* ← 両サイドに少し余白 */
}

.sample-item {
  margin-bottom: 14px;        /* 縦間隔を少し広く */
}

.sample-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

/* 拡大用クラス（JS対応） */
.sample-item img.enlarged {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  max-width: 90vw;
  max-height: 90vh;
  z-index: 9999;
  cursor: zoom-out;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .sample-gallery {
    max-width: 100%;
    padding: 0 6px;
  }
  .sample-item img.enlarged {
    max-width: 95vw;
    max-height: 95vh;
  }
}


/* ==========================================================================================================
　　　　　【サンプル画像　縦積み　　　　PC スマホで共通JSで拡大】
  ========================================================================================================== */








/* ======================================================================================================
作品詳細ページ　動画プレイヤー内で画像表示で縦横比が異なる画像でもプレイヤーないで収まるように表示する、オーバーレイ幅、オーバーレイ内のパッケージサイズの調整
  ======================================================================================================== */


/* ▼ 動画プレイヤー全体を16:9に固定 */
.video-container {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  aspect-ratio: 16 / 9;   /* ← padding-top を消して aspect-ratio に置き換える */
  padding-top: 0 !important;
}



/* ▼ プレイヤー内の画像・動画 */
.video-container img,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  object-fit: contain;   /* 黒帯込みで公式と同じ挙動 */
}




/* ▼ オーバーレイ帯（スクショと同じ位置に浮かせる） */
.movad_child {
  position: absolute;
  bottom: 40px;               /* ← 下端から10px浮かせる */
  left: 0;
  width: calc(100% - 20px);   /* 両端に10pxずつ余白 */
  margin: 0 10px;
  height: 60px;               /* 帯の高さ（スクショと同等） */
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  padding: 6px 12px;
  box-sizing: border-box;
  z-index: 5;
  border-radius: 4px;         /* 丸みを付ける（任意） */
}

/* ▼ オーバーレイ内のサムネイル（スクショと同じ小さめサイズ） */
.movad_child img.alert-movimg {
  height: 60px;              /* 固定：40px（スクショ基準） */
  width: auto;
  margin-right: 10px;
  object-fit: contain;
}

/* ▼ 再生時間 */
.movad_child .time {
  font-size: 13px;
  color: #fff;
  margin-right: 10px;
  white-space: nowrap;
}

/* ▼ タイトル */
.movad_child .alert-movtxt {
  flex: 1;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ▼ CTAボタン */
.movad_child .movad_btn {
  margin-left: auto;
}








/* ==============================================================================================================
スマホ用（768px以下）
============================================================================================================== */
@media screen and (max-width: 768px) {
  .movad_child {
    bottom: 20px;             /* PCより少し下に寄せる */
    width: calc(100% - 10px); /* 余白を縮小 */
    margin: 0 5px;
    height: 48px;             /* 帯を少し低め */
    padding: 4px 8px;
  }

  .movad_child img.alert-movimg {
    height: 42px;             /* サムネイルも縮小 */
    margin-right: 6px;
  }

  .movad_child .time,
  .movad_child .alert-movtxt {
    font-size: 12px;          /* フォントも縮小 */
  }

  .movad_child .movad_btn {
    font-size: 12px;
  }
}









/* ▼ 再生マーク中央配置（調整版） */
.play-overlay {
  position: absolute;
  top: 50%;  
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;           /* 少し小さめに調整 */
  font-weight: bold;
  background: rgba(0,0,0,0.45); /* 通常時は薄めに */
  padding: 18px 28px;        /* ← 横幅を少し削って、縦を広げて「正方形寄り」に */
  border-radius: 10px;       /* 少し角丸 */
  cursor: pointer;
  z-index: 9999;
  text-align: center;
  line-height: 1.2;          /* ▶と再生を崩さず縦方向に余裕 */
  user-select: none;
  pointer-events: auto;
}

.play-overlay:hover {
  background: rgba(0,0,0,0.6); /* hover時は濃すぎない程度に */
}





/* ▼ プレイヤー内の画像を常に表示させる */
#main-sample-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* はみ出さず収める */
  z-index: 2;
  display: block !important;
  background: #000;
}




/* =========================================================================================================
作品詳細ページ　動画プレイヤー内で画像表示で縦横比が異なる画像でもプレイヤーないで収まるように表示する、オーバーレイ幅、オーバーレイ内のパッケージサイズの調整　　　　　　　　　　　　　　　　　　　　　ここまで
  ===================================================================================================== */












/* ============================================================
   スマホ用レイアウト調整（768px以下）
   ============================================================ */
@media screen and (max-width: 768px) {
  .post-main-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* 並び順 */
  .title-and-quality { order: 1; }
  .video-right       { order: 2; }
  .sample-row-top    { order: 3; }
  .package-left      { order: 4; }

	
  /* 動画エリア：幅100%・16:9固定 */
  .video-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
	margin-top: 0px !important;   /* 上余白を小さく */
    margin-bottom: 0px !important;/* 下余白を小さく */ 
  }

	
	
	
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* ← これで16:9比率固定 */
  background: #000;
  overflow: hidden;
}

	
.video-container img,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* ← coverではなくcontain */
}

	
	
	
  /* サンプル画像を3列グリッド */
  .sample-row-top {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
    margin-top: 10px;
  }

  .sample-row-top img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
  }

  /* パッケージ画像を幅いっぱいに */
  .package-left {
    width: 100% !important;
    max-width: 100% !important;
  }

  .package-left img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 15px;
  }
}





/* ▼ プレイヤー内のプレビュー画像は最前面に */
#main-sample-image {
  z-index: 2;
}

/* ▼ 再生ボタンはさらに上 */
.play-overlay {
  z-index: 3;
}

/* ▼ オーバーレイ帯はさらに上 */
.movad_child {
  z-index: 4;
}







/* CTAボタン：オレンジ背景を強制しつつ横並び */
.movad_btn .btn.btn-warning {
  display: inline-flex !important;   /* フレックスで横並び */
  align-items: center !important;    /* 上下中央 */
  justify-content: flex-start;       /* 左揃え */
  gap: 6px !important;               /* アイコンと文字の間隔 */
  line-height: 1.4;
  white-space: nowrap;               /* 改行させない */
  padding: 6px 12px;
  background-color: #f0ad4e !important; /* ← オレンジを強制復活 */
  color: #fff !important;            /* 文字は白 */
  font-weight: bold;
  border-radius: 4px;
}

/* 小さい再生アイコンをテキストにぴったり合わせる */
.movad_btn .btn-play {
  width: 18px;
  height: auto;
  display: inline-block;
  vertical-align: middle; 
  margin: 0 !important;   /* 余計な隙間をゼロに */
  position: relative;
  top: 0;                 /* 強引にずれを打ち消す */
  left: 0;                /* テキストと水平に並べる */
}






@media screen and (max-width: 768px) {
  /* 再生時間とタイトルの距離を詰める */
  .movad_child .time {
   margin-left: 40px;   /* ← サムネから右へ移動（数値は調整可） */
    margin-right: 6px;   /* CTAボタンとの間隔 */
    min-width: auto;     /* 固定幅なし */
    text-align: left;    /* 左寄せ */
    font-size: 12px;     /* スマホ用に少し小さく */ 
  }
}





/* ===================================================================
   PCレイアウト調整（769px以上）
   =================================================================== */
@media screen and (min-width: 769px) {
  .post-main-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* ← 左右を等分に修正 */
    grid-template-rows: auto auto;
    grid-gap: 5px;
    align-items: start;
  }

	
	
	
.package-left {
    display: flex;
    align-items: center;   /* 縦方向で中央に配置 */
    justify-content: center;
    height: 400px;         /* ★任意：固定の高さを与える */
  }

  .package-left img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }
	

	
	
	
  /* タイトルは1行目で横幅いっぱい */
  .title-and-quality {
    grid-column: 1 / span 2;
    grid-row: 1;
    margin-bottom: 10px;
  }

  /* 左にパッケージ */
  .package-left {
    grid-column: 1;
    grid-row: 2;
  }

  /* 右に動画プレイヤー */
  .video-right {
    grid-column: 2;
    grid-row: 2;
  }

  /* 下にサンプル画像 */
  .sample-row-top {
    grid-column: 1 / span 2;
    grid-row: 3;
    margin-top: 20px;
  }	
}




/* 作品情報 h2 の上余白を 0px に変更 */
h2[style*="margin-top:40px"] {
  margin-top: 0px !important;
}


/* サンプル画像ブロックの下余白を縮小 */
.sample-row-top {
  margin-bottom: 0px !important;  
}







/* ===================================================================
 【スマホ限定】パンくずとタイトルとの間の余白を詰める
  =================================================================== */	


@media (max-width: 768px) {
  /* パンくず下の余白を削除 */
  .wrr-breadcrumb {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* H1 タイトルの上余白を削除 */
  .title-and-quality .entry-card-title,
  h1.entry-card-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 記事本体の余白も詰める */
  .single-post .article {
    padding-top: 0px !important;    
  }
}



/* ===================================================================
 【スマホ限定】パンくずとタイトルとの間の余白を詰める　　　　ここまで
  =================================================================== */	

	  

/* ===================================================================
 【スマホ限定】サンプル動画プレイヤーの上下余白を詰める
  =================================================================== */	 
	  
 @media (max-width: 768px) {
  /* サンプル動画プレイヤーの上下余白を詰める */
  .video-right {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* サンプル画像群の上余白を削る */
  .sample-row-top {
    margin-top: 0px !important;
  }
}

	  
/* ===================================================================
 【スマホ限定】サンプル動画プレイヤーの上下余白を詰める　　　　ここまで
  =================================================================== */	  　　　　

	   
	  
	  
	  
	  
	  /* related-list 内のカードを均等幅にする */
.related-list .entry-card {
  width: 100% !important;
  min-width: 200px !important; /* 160px → 少し大きめに固定 */
  box-sizing: border-box !important;
}

	  
	  

	  
	  



/* ===========================================================================
 ナビ項目の新作にNEWリボン　ヘッダーナビの箇所
 =========================================================================== */




/* ▼ 新作動画ナビにNEWリボン */
.simple-menu-list li.new-item {
  position: relative; /* リボン配置の基準にする */
}

.simple-menu-list li.new-item::before {
  content: "";
  position: absolute;
  top: 0;      /* 角にピッタリ */
  left: -4px;   /* ← 左に寄せる（微調整） */
  width: 50px;   /* 少し大きく */
  height: 50px;
  background: url("https://www.wildriverreview.com/wp-content/uploads/2026/02/new.png") no-repeat center;
  background-size: contain;
  z-index: 10;
  pointer-events: none; /* クリックの邪魔をしない */
}

/* ▼ スマホ用にリサイズ（768px以下） */
@media screen and (max-width: 768px) {
  .simple-menu-list li.new-item::before {
    width: 30px;  /* 少し小さめに調整 */
    height: 30px;
  }
}



/* ===========================================================================
 ナビ項目の新作にNEWリボン　ヘッダーナビの箇所
 =========================================================================== */









/* ===========================================================================
 ヘッダー下ナビ共通
 =========================================================================== */

/* ▼ ナビゲーション全体 */
.simple-header-menu {
  background: linear-gradient(to bottom, #fefdfc, #fcf9f6);
  border-top: 1px solid #f4f0ec;
  border-bottom: 1px solid #f4f0ec;
  margin: 0;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
}

/* ▼ ナビ項目リスト */
.simple-menu-list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}


/* ▼ 各項目 */


.simple-menu-list li {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  background: #f9f9f9;
  border-left: 1px solid #ccc !important;   /* 左の線だけ */
  border-right: none;                       /* 右の線は消す */
  border-top: 1px solid #ccc !important;    /* 上に枠線 */
  border-bottom: 1px solid #ccc  !important; /* 下に枠線 */
  cursor: pointer;
}




/* ▼ アクティブ項目 */
.simple-menu-list li.active {
  background: #ff2d7a;
  color: #fff;
}
.simple-menu-list li.active a {
  color: #fff;
}




/* ▼ ホバー時の色（クリック前でもピンクになる） */
.simple-menu-list li:hover {
  background: #ff2d7a;
  color: #fff;
}

.simple-menu-list li:hover a {
  color: #fff;
}



/* ▼ ナビ項目リンク */
.simple-menu-list li a {
  display: block;
  text-decoration: none;
  color: #555; /* ← 柔らかく上品なグレーに変更 */
  font-weight: bold;
  font-size: 16px;
  position: relative;
  padding: 2px 0;
}




/* ▼ 説明文エリア */

.menu-description {
  background: #ffeef5;
  padding: 0 10px;              /* ← 上下paddingはゼロにして高さで調整 */
  font-size: 17px;
  text-align: center;
  color: #555;
  height: 40px;
  display: flex;                /* ← Flexboxで中央揃え */
  align-items: center;          /* ← 上下中央 */
  justify-content: center;      /* ← 左右中央 */
  font-weight: 600;             /* やや太字 */
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

.menu-description.fade {
  opacity: 0;
}



/* =========================
 スマホ表示用（768px以下）
 ========================= */
@media screen and (max-width: 768px) {
  /* ▼ ナビ項目 */
  .simple-menu-list li {
    padding: 5px 0;        /* liの上下余白を狭める */
  }

  .simple-menu-list li a {
    font-size: 13px;       /* 文字サイズ少し小さめ */
    padding: 6px 0;        /* 上下余白 */
    line-height: 1.2;      /* 行間を詰める */
  }


  /* ▼ 説明文エリア */
  .menu-description {
    height: 30px;            /* ← PCより少し低めに */ 
    font-size: 13px !important;
    padding: 6px 10px;
    line-height: 1.4;
	color: #555 !important;  
	  
  }
}






  /* ▼ ナビ項目 */

@media screen and (max-width: 768px) {

  .simple-menu-list li {
    padding: 5px 0; /* liの上下余白を狭める */
  }

  .simple-menu-list li a,
  .simple-menu-list li a:link,
  .simple-menu-list li a:visited,
  .simple-menu-list li a:hover,
  .simple-menu-list li a:active {
    font-size: 13px;       /* 文字サイズ少し小さめ */
    padding: 6px 0;        /* 上下余白 */
    line-height: 1.2;      /* 行間を詰める */
    color: #666 !important; /* ← これでモバイルでも確実に上書き */
  }

  /* ▼ 説明文エリア */
  .menu-description {
    height: 30px;            /* ← PCより少し低めに */ 
    font-size: 13px !important;
    padding: 6px 10px;
    line-height: 1.4;
    color: #555 !important;  
  }
}



/* =====================================================
   【スマホ専用】上段4項目を幅いっぱいに均等表示（余白広め・以前の高さ）
===================================================== */
@media screen and (max-width: 768px) {

  /* ▼ ナビ全体 */
  .simple-menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ▼ 各ナビ項目（4つで100%幅） */
  .simple-menu-list li {
    flex: 0 0 25% !important; /* ← 25% × 4 = 100% */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* ▼ a要素（縦幅を広めに戻す） */
  .simple-menu-list li a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 0 !important;   /* ← ★上下を広げる（6px→10px） */
    border: inherit !important;
  }

  /* ▼ hover・色変化はテーマ任せ */
  .simple-menu-list li a:hover {
    background: inherit !important;
    color: inherit !important;
  }

 

  /* ▼ 説明文は現状維持 */
  .menu-description {
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}






/* =====================================================
   【スマホ専用】上段4列＋下段3列構成（青ライン維持）
   ===================================================== */
@media screen and (max-width: 768px) {

  /* ▼ 全体をflexで2段構成に */
  .simple-menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ▼ 上段4つ */
  .simple-menu-list li {
    flex: 0 0 25% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* ▼ 下段3つ（5番目以降） */
  .simple-menu-list li:nth-child(n+5) {
    flex: 0 0 33.333% !important;
    margin-top: 4px !important; /* ← 上段とのわずかな隙間（青ラインを邪魔しない） */
  }

  /* ▼ a要素の共通設定（青ラインに干渉しない） */
  .simple-menu-list li a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 0 !important; /* ← 上下余白そのまま（青ライン表示OK） */
    border: inherit !important;
  }

  /* ▼ hover時の色変化はテーマに従う */
  .simple-menu-list li a:hover {
    background: inherit !important;
    color: inherit !important;
  }

 

  /* ▼ 説明文はそのまま */
  .menu-description {
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}







/* =====================================================================================
   【スマホ専用】ナビ項目 上段3列＋下段3列構成（青ライン維持 幅均）
   ===================================================================================== */
@media screen and (max-width: 768px) {

  /* ▼ ナビ全体を2段flex構成に */
  .simple-menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ▼ 各項目を3列構成（33.333%）で均等配置 */
  .simple-menu-list li {
    flex: 0 0 33.333% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* ▼ 下段（4番目以降）にわずかな余白を追加 */
  .simple-menu-list li:nth-child(n+4) {
    margin-top: 3px !important;
  }

  /* ▼ a要素共通設定（デザイン維持） */
  .simple-menu-list li a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: inherit !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 10px 0 !important; /* ← 上下余白 */
    border: inherit !important;
  }

  /* ▼ hover時（Cocoonのテーマ色を継承） */
  .simple-menu-list li a:hover {
    background: inherit !important;
    color: inherit !important;
  }

  /* ▼ 説明文（メニュー下説明テキスト） */
  .menu-description {
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}


/* =================================================================================
   【スマホ専用】ナビ項目 上段3列＋下段3列構成（青ライン維持 幅均）              ここまで
   ================================================================================= */










/* ===========================================================================
 ヘッダー下ナビ共通　　　　　　　　　　　　　　　　　　　ここまで
 =========================================================================== */


/* ▼ アクティブ項目（初期状態） */
.simple-menu-list li.active {
  background: #ff2d7a;
  color: #fff;
}
.simple-menu-list li.active a {
  color: #fff;
}

/* ▼ ホバー時は必ずその li が最優先でピンクに */
.simple-menu-list li:hover {
  background: #ff2d7a !important;
  color: #fff !important;
}
.simple-menu-list li:hover a {
  color: #fff !important;
}

/* ▼ ホバー中は他の .active を打ち消す */
.simple-menu-list:hover li.active:not(:hover) {
  background: #f9f9f9 !important;
  color: inherit !important;
}
.simple-menu-list:hover li.active:not(:hover) a {
  color: inherit !important;
}







/* ▼ 以前の a::before を無効化 */
.simple-menu-list li a::before {
  content: none !important;
}

/* ▼ li を基準に relative */
.simple-menu-list li {
  position: relative;
}


/* ▼ active のみ青線（hoverしていないとき） */
.simple-menu-list li.active:not(:hover)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;       /* ← ピンク背景の外に出す */
  width: 100%;
  height: 3px;
  background: #0044cc;
}

/* ▼ hover中の項目だけ青線 */
.simple-menu-list li:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;       /* ← 同じく外に出す */
  width: 100%;
  height: 3px;
  background: #0044cc;
}






/* ▼ スマホ用（hover無効 → activeのみ） */
@media screen and (max-width: 768px) {
  .simple-menu-list li.active::after {
    height: 2px;
  }
}




/* =========================
   スマホ：タップ時は白文字にする（PCと挙動統一）
========================= */
@media screen and (max-width: 768px) {

  /* タップ中 */
  .simple-menu-list li:active,
  .simple-menu-list li:active a {
    color: #fff !important;
  }

  /* 現在地（activeクラス） */
  .simple-menu-list li.active,
  .simple-menu-list li.active a {
    color: #fff !important;
  }
}



/* ================================================================================
 新作ページの最新の２D,最新のVR,最新の素人　各見出しのフォントサイズ、位置
 ================================================================================== */

.new-section {
  margin: 20px 0;
}





}










.more-link {
  text-align: right;
  margin-top: 10px;
}

.more-link a {
  color: #0066cc;          /* 一般的なリンクブルー */
  font-weight: bold;
  text-decoration: underline;
}


.more-link a:hover {
  color: #004499;          /* 濃いブルーに変化 */
  text-decoration: underline;
}





 /*スマホ表示（768px以下）：新作ページの見出し最適化 */

@media screen and (max-width: 768px) {
  .new-section {
    margin: 0px 0; /* 上下の余白を少し圧縮 */
  }

 
	
	
	
}




/* =====================================================================================
 新作ページの最新の２D,最新のVR,最新の素人　各見出しのフォントサイズ、位置　　　ここまで
 ===================================================================================== */













/* ================================================================== ============================================================================================================
▼【エントリーカードのレイアウト統一】トップ / 2D / VR / 素人 / 新作 / タグ / シリーズ　一元化で調整する▼
============================================================================================================
==================================================================== */




/* ================================================================================
 スマホ表示（768px以下）：新作ページのエントリーカードとサムネ上下の余白広すぎのためリセット　　　　　
================================================================================== */


@media screen and (max-width: 768px) {

  /* サムネ枠をリセット */
  .new-section .entry-card .entry-thumb {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
  }

  /* サムネ画像の比率調整 */
  .new-section .entry-card .entry-thumb img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;  /* もし 16/9 が残ってたら無効化 */
    object-fit: contain !important; /* はみ出し防止 */
    margin: 0 auto !important;
  }

  /* エントリーカード全体の余計な高さも消す */
  .new-section .entry-card {
    height: auto !important;
    margin: 0 0 2px 0 !important; /* カード間の余白は最小限 */
    padding: 0 !important;
  }
}





/* ================================================================================
 スマホ表示（768px以下）：新作ページのエントリーカードとサムネ上下の余白広すぎのためリセット　　　　　ここまで
================================================================================== */





/* =========================================================
 新作ページのカード整列（PC5カラム／スマホ3カラム）
 =========================================================== */

.new-section .video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

.new-section .video-list .entry-card {
  flex: 0 0 calc((100% - 48px) / 5); /* gap=12px×4 → PC5カラム */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}





/* サムネイル画像（拡大時の余白をなくす） */
.new-section .video-list .entry-thumb {
  overflow: hidden; /* ← 拡大時にはみ出さないように */
}

.new-section .video-list .entry-thumb img {
  width: 100% !important;
  height: 100% !important;   /* ← 高さも100%にする */
  object-fit: cover !important;
  aspect-ratio: auto !important; /* ← 強制比率を解除 */
  display: block;
  transition: transform 0.3s;    /* ← 拡大用アニメーション */
}

.new-section .video-list .entry-thumb img:hover {
  transform: scale(1.05); /* ← hover時に拡大 */
}




/* ───────── スマホ表示の調整 ───────── */
@media screen and (max-width: 768px) {

  /* PCのflex指定を打ち消してgridレイアウトに変更 */
  .new-section .video-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3列固定 */
    gap: 6px; /* 隙間を狭める */
    padding: 6px;
  }

  .new-section .video-list .entry-card {
    flex: none !important;     /* flex指定を無効化 */
    width: 100% !important;    /* gridのセル幅に従わせる */
    margin: 0 !important;
    padding: 4px !important;
    height: auto !important;
  }

  .new-section .entry-card .entry-thumb {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 0 !important;
  }

  .new-section .entry-card .entry-thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    margin: 0 auto !important;
  }
	
}





@media screen and (max-width: 768px) {

  /* CVボタンをカード幅いっぱいに広げる */
  .new-section .entry-card .cv-button {
    display: block !important;
    width: 100% !important;
    text-align: center;
    margin: 4px 0 0 0 !important;
    padding: 6px 0 !important;  /* ボタン高さを安定化 */
    box-sizing: border-box;
  }

  /* エントリーカードの内部調整 */
  .new-section .entry-card {
    display: block !important;   /* flexを解除して自然に縦並び */
    width: 100% !important;
    padding: 4px !important;
  }

  /* タイトル・メタ情報も窮屈にならないように */
  .new-section .entry-card .entry-title,
  .new-section .entry-card .entry-meta {
    margin: 2px 0 !important;
    font-size: 13px;
    line-height: 1.4;
  }
}










/* ============================================================
 スマホ表示（768px以下）：新作ページのカード・CVボタン修正
============================================================== */

@media screen and (max-width: 768px) {

  /* カード一覧：3カラム固定で幅いっぱい */
  .new-section .video-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3カラム固定 */
    gap: 2px !important; /* カード間の隙間を最小限 */
    justify-content: stretch !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 4px !important; /* 端に少しだけ余白 */
    box-sizing: border-box !important;
  }

  /* エントリーカード */
  .new-section .video-list .entry-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 4px 2px !important; /* 内側もコンパクトに */
    box-sizing: border-box !important;
  }

  /* CVボタン（横幅いっぱい） */
  .new-section .video-list .cv-btn {
    display: block !important;
    width: 100% !important;   /* 横幅フルに */
    text-align: center !important;
    margin: 4px 0 0 0 !important;
    padding: 8px 4px !important; /* 高さを安定化 */
    font-size: 13px !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* 折り返し許可 */
  }

  /* タイトル・メタ情報の調整 */
  .new-section .video-list .entry-title {
    font-size: 13px !important;
    margin: 2px 0 !important;
    line-height: 1.3 !important;
  }
  .new-section .video-list .entry-meta,
  .new-section .video-list .entry-runtime {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
  }
}



/* ==================================================================
 スマホ表示（768px以下）：新作ページのカード・CVボタン修正　　ここまで
==================================================================== */




/* ================================================================== =======================================================================================
▲【エントリーカードのレイアウト統一】トップ / 2D / VR / 素人 / 新作 / タグ / シリーズ　一元化で調整する▲ここまで
=========================================================================================
==================================================================== */







/* =========================================================================
 ナビ項目の説明文のアイコンサイズ、　各アイコンのサイズが異なるのでCSSで整えてある
=========================================================================== */



/* 共通の説明文アイコン */
.menu-description .desc-icon {
  height: 20px;   /* 基本サイズ */
  margin-left: 6px;
  vertical-align: middle;
}

/* ▼ 2D用（High Qualityアイコンを少し大きく） */
.menu-description .desc-icon[src*="High-quality"] {
  height: 28px;   /* ←ここで大きくする */
}

/* ▼ 素人用（HOTアイコンを少し大きく） */
.menu-description .desc-icon[src*="shirouto-hot"] {
  height: 29px;   /* ←ここで大きくする */
}


/* ▼ VR用（VRアイコンを少し大きく） */
.menu-description .desc-icon[src*="vr-douga"] {
  height: 18px;   /* ←お好みで調整 */
}





/* スマホ専用アイコン調整 */
@media screen and (max-width: 768px) {
  .menu-description .desc-icon {
    height: 17px !important;   /* ベストサイズ */
    margin-left: 4px;
    vertical-align: middle;
  }
}




/* ===================================================================================
 ナビ項目の説明文のアイコンサイズ、　各アイコンのサイズが異なるのでCSSで整えてある　　ここまで
===================================================================================== */







/* ===================================================================================
 【スマホ限定】2D、VR週間人気ランキングのサムネイルの下部に女優名ラベル透過を設定
===================================================================================== */

@media screen and (max-width: 768px) {
  .ga4-image-wrapper .performer-label {
    position: absolute !important;
    bottom: 10% !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    z-index: 10 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0px 6px !important;   /* ← ラベルの高さ */
    font-size: 14px !important;    /* ← フォントサイズ */
    text-align: center !important;
    line-height: 1.4 !important;   /* 行間も安定させる */
  }
}


/* =============================================================================================
 【スマホ限定】2D、VR週間人気ランキングのサムネイルの下部に女優名ラベル透過を設定　ここまで
=============================================================================================== */



/* ======================================================================================================================
PC,スマホ共通で素人週間人気ランキングのサムネ上のラベル非表示　　いくらやっても上手くラベルがサムネ上にのらなかったので
======================================================================================================================== */

/* 素人ランキングのラベルを完全非表示 */
.siroto-ranking .performer-label {
  display: none !important;
}


/* ======================================================================================================================
PC,スマホ共通で素人週間人気ランキングのサムネ上のラベル非表示　　いくらやっても上手くラベルがサムネ上にのらなかったので　ここまで
======================================================================================================================== */









/* 画質アイコン（通常版）にも輝き効果を追加 */
.quality-item img,
.gashitu-badge {
  filter: brightness(1.1) contrast(1.15) !important; /* 明るさ・コントラスト強調 */
  transition: filter 0.3s ease;                      /* マウスオーバー時の滑らか変化 */
}

/* ホバー時にさらに光沢感を強調する場合 */
.quality-item img:hover,
.gashitu-badge:hover {
  filter: brightness(1.25) contrast(1.2) !important;
}








/* =======================================================================================================
TOPページ、2D、VR、素人、新作、タグ、シリーズページのエントリーカード内の画質アイコンの位置上下の調整　　
==========================================================================================================*/

.entry-card .entry-quality {
  margin-top: -15px !important;   /* 上に寄せる（数値は調整可） */
  margin-bottom: 4px !important; /* 下の余白は少し残す */
}



/* スマホ表示用（幅768px以下） */
@media screen and (max-width: 768px) {
  .entry-card .entry-quality {
    margin-top: 1px !important;   /* スマホでは重ならない程度に控えめ */
    margin-bottom: 3px !important;
  }
}

/* =======================================================================================================
TOPページ、2D、VR、素人、新作、タグ、シリーズページのエントリーカード内の画質アイコンの位置上下の調整　　ここまで
==========================================================================================================*/








/* =======================================================================================================
  360°アイコンの調整のみ            VR映像の魅力　文末の　　　【 PC,スマホ 】
==========================================================================================================*/


/* 共通スタイル（PC基準） */
.vr-text .vr-icon-360 {
  display: block;
  margin: 12px 0 0 auto;  /* PCでは少し余白あり＋右寄せ */
  height: auto;
  width: 90px;   /* PCサイズ */
}

/* スマホ用（768px以下） */
@media screen and (max-width: 768px) {
  .vr-text .vr-icon-360 {
    width: 65px;          /* スマホサイズ */
    margin: 0 0 0 auto;   /* 右寄せ＋上下余白なし */
  }
}


/* =======================================================================================================
 360°アイコンの調整のみ          VR映像の魅力　文末の　【 PC,スマホ 】                             ここまで
==========================================================================================================*/







/* =======================================================================================================
           VR映像の魅力　        セクションの外枠ボックスの余白を調整   
==========================================================================================================*/

@media screen and (max-width: 768px) {
  .wrr-section-box.vr-wrap {
    padding-top: 5px !important;   /* ← 上の余白を狭くする */
    padding-right: 15px; 
    padding-bottom: 15px; 
    padding-left: 15px;
  }
}


/* =======================================================================================================
           VR映像の魅力　        セクションの外枠ボックスの余白を調整   　　　　　ここまで
==========================================================================================================*/








/* =========================================================================================================
    作品詳細ページのサンプル画像群の上の指アイコン画面に差し掛かったら3回押す動きアニメーション　JSに記述あり
============================================================================================================*/

/* 左右に振って押す感じのアニメーション */
@keyframes pressMove {
  0%   { transform: translateX(0) scale(1); }
  25%  { transform: translateX(-2px) scale(0.95); }
  50%  { transform: translateX(2px) scale(1.05); }
  75%  { transform: translateX(-1px) scale(0.98); }
  100% { transform: translateX(0) scale(1); }
}

.press-move {
  animation: pressMove 0.8s ease-in-out;
}


/* =========================================================================================================
   作品詳細ページのサンプル画像群の上の指アイコン画面に差し掛かったら3回押す動きアニメーション　JSに記述あり
============================================================================================================*/







/* =========================================================================================================
       作品詳細ページの▼ この作品の詳細はこちら ▼直下の点線ではなく直線に変更
===========================================================================================================*/

.cv-header {
  border-bottom: 2px solid #f7c589 !important;
  width: 90%;              /* グラデーション線と同じくらいに調整 */
  margin: 0 auto;           /* 中央寄せ */
  text-align: center;       /* 中身の文字も中央寄せ */
  padding-bottom: 5px;
  white-space: nowrap;     /* 折り返さない */
  overflow: hidden;        /* はみ出しを非表示にする（必要なら） */
  text-overflow: ellipsis; /* はみ出した場合に…を付ける（任意） */
}



/* =========================================================================================================
       作品詳細ページの▼ この作品の詳細はこちら ▼直下の点線ではなく直線に変更　　　　　　　　　ここまで
===========================================================================================================*/











/* ===========================================================================================
 TOPページのエントリーカード内の位置など調整（新作ページと完全統一）PC + スマホ両対応　　　　　　
=========================================================================================== */


/* 共通：カード基本構造 */
.post-list .entry-thumb {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.post-list .entry-quality {
  margin: 4px 0 0 0 !important;   /* サムネイル直下の余白 */
  line-height: 1 !important;
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-start !important;
}

.post-list .entry-quality img.quality-icon {
  width: 42px !important;
  height: auto !important;
  display: block !important;
}

.post-list .entry-title {
  margin-top: 6px !important;
}

.post-list .cv-btn {
  display: block !important;
  width: 100% !important;
  padding: 10px 0 !important;
  margin-top: 8px !important;
  text-align: center !important;
  background-color: #f6b651 !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}
.post-list .cv-btn:hover {
  background-color: #e0a43e !important;
}

/* ──────────────
   PC：3カラム
   ────────────── */
@media screen and (min-width: 768px) {
  .post-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
}

/* ──────────────
   スマホ：2カラム
   ────────────── */
@media screen and (max-width: 767px) {
  .post-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* サムネイル画像を自然比率で表示（素人作品の切れ防止） */
  .post-list .entry-thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: unset !important;
  }

  /* CVボタンを指で押しやすい大きさに調整 */
  .post-list .cv-btn {
    padding: 12px 0 !important;
    font-size: 0.95rem !important;
  }
}




/* ===========================================================================================
 TOPページのエントリーカード内の位置など調整（新作ページと完全統一）PC + スマホ両対応　　　　　　ここまで
=========================================================================================== */








/* ===========================================================================================
   シリーズの他の動画 - サムネイルレイアウトを「出演作品でよく見られている」と完全統一
=========================================================================================== */


/* PC用 */
.related-thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 10px 0 !important;
  padding: 0 !important;
}

.related-thumbnail-list .related-thumbnail-item {
  flex: 0 0 auto;
  width: 160px;
  margin: 0 !important;
}

.related-thumbnail-list .related-thumbnail-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .related-thumbnail-list {
    display: grid !important;               
    grid-template-columns: repeat(3, 1fr) !important;  
    gap: 8px !important;                    
    margin: 10px 0 !important;
    padding: 0 6px !important;
  }

  .related-thumbnail-list .related-thumbnail-item {
    all: unset !important;   /* ← 既存の幅・flex指定を完全リセット */
    width: 100% !important;
    display: block !important;
  }

  .related-thumbnail-list .related-thumbnail-item img {
    all: unset !important;   /* ← imgに残っている幅指定を完全リセット */
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
  }
}


/* =================================================================================================
   シリーズの他の動画 - サムネイルレイアウトを「出演作品でよく見られている」と完全統一　　ここまで
====================================================================================================*/





/* =================================================================================================
エントリーカードのPCホバー、スマホ選択された状態でサムネイルほんのり拡大効果　　
====================================================================================================*/

.entry-card img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 6px;
}

/* PC用 hover */
.entry-card:hover img {
  transform: scale(1.05); /* 少し拡大 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* スマホ用 active/focus */
.entry-card:active img,
.entry-card:focus img {
  transform: scale(1.05); /* 同じく拡大 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* =================================================================================================
エントリーカードのPCホバー、スマホ選択された状態でサムネイルほんのり拡大効果　　ここまで
====================================================================================================*/






/* =================================================
  ナビ項目のホバーに追従する【青い下線】　ホバー時の動作
=================================================== */

/* ▼ a::before の青線を完全に無効化 */
.simple-menu-list li a::before {
  content: none !important;
  display: none !important;
}

/* ▼ li に after を仕込む準備 */
.simple-menu-list li {
  position: relative;
}

.simple-menu-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;                /* ← 少し太めに調整 */
  background: transparent;
  transition: background 0.2s ease;
}

/* ▼ デフォルトは active 項目にだけ青線 */
.simple-menu-list li.active::after {
  background: #0095ff;        /* FANZA採用ブルー */
}

/* ▼ 他の li をホバーしている間は active の青線を消す */
.simple-menu-list:hover li.active::after {
  background: transparent;
}

/* ▼ ただしホバーしている li 自身にだけ青線を表示 */
.simple-menu-list li:hover::after {
  background: #0095ff;        /* FANZA採用ブルー */
}


/* =================================================
  ナビ項目のホバーに追従する【青い下線】　ホバー時の動作
=================================================== */















/* =============================================================================================================
TOPページの最新2D、最新VR、最新素人、各18件表示なので各ブロック下にもっと見るボタンの設定　対応ページにリンク
================================================================================================================ */



.more-link {
  text-align: center;
  margin: 20px 0;
}

.more-link a {
  display: inline-block;
  min-width: 150px;
  padding: 10px 18px;
  border: 1px solid #0066cc;   /* 枠線を青に変更 */
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
  color: #0066cc;              /* 文字色も最初から青 */
  text-decoration: none !important;
  background: #fff;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.more-link a::after {
  content: "›";
  margin-left: 6px;
  font-size: 1.2em;
  font-weight: bold;
}

.more-link a:hover {
  color: #004999;              /* 濃い青に */
  border-color: #004999;       /* 枠線も濃い青に */
  background: #fff;
  text-decoration: none !important;
}


/*------------【スマホ版】----------- */
@media screen and (max-width: 768px) {
  .more-link {
    margin: 16px 0;             /* 余白少し狭め */
  }

  .more-link a {
    min-width: 50%;             /* 横幅を60%に */
    padding: 5px 0;             /* 高さ調整 */
    font-size: 16px;            /* 文字少し大きく */
    border-radius: 999px;       /* 丸型維持 */
  }

  .more-link a::after {
    margin-left: 8px;
    font-size: 1.4em;
  }
}



/* =============================================================================================================
TOPページの最新2D、最新VR、最新素人、各18件表示なので各ブロック下にもっと見るボタンの設定　対応ページにリンク
================================================================================================================ */





/* ==========================================================================
エントリーカード内のサムネイルを147×200に強制　元サイズの画像にしてサムネを綺麗に表示
==================================================== =========================*/

/* サムネイルを147×200に強制 */
.entry-thumb img {
  width: 147px !important;
  height: 200px !important;
  object-fit: cover !important; /* 枠にピッタリ収めて切り抜き */
  display: block !important;
  margin: 0 auto !important;
}

/* ==========================================================================
エントリーカード内のサムネイルを147×200に強制　元サイズの画像にしてサムネを綺麗に表示
==================================================== =========================*/












/* ==========================================================
履歴ページ・お気に入りページで表示する サムネイルサイズ調整
========================================================== */

/* 2D・VR作品（共通） */
.collection-page .thumb-grid img,
.history-page .thumb-grid img {
  width: 150px !important;   /* 2D/VR 用 */
  height: 200px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto 8px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* 素人作品だけは正方形  */
.collection-page .thumb-grid img.siroto-thumb,
.history-page .thumb-grid img.siroto-thumb {
  width: 230px !important;   /* 正方形に近いバランス */
  height: 230px !important;
  object-fit: cover !important;
}



/* =====================================================================
履歴ページ・お気に入りページで表示する サムネイルサイズ調整　ここまで
===================================================================== */









/* ================================================================
履歴ページ、お気に入りページ サムネイル列の指定、レイアウト
================================================================ */

.history-page .thumb-grid,
.collection-page .thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* デフォルト：自動 */
  gap: 16px;   /* サムネイル同士の余白 */
  justify-content: center;
  margin-top: 20px;
  padding: 0 10px;
}

/* サムネイル共通 */
.history-page .thumb-grid img,
.collection-page .thumb-grid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.history-page .thumb-grid img:hover,
.collection-page .thumb-grid img:hover {
  transform: scale(1.05);
}

/* --- スマホ（3カラム固定） --- */
@media (max-width: 768px) {
  .history-page .thumb-grid,
  .collection-page .thumb-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;   /* スマホは少し狭め */
  }
}

/* --- PC（6カラム固定） --- */
@media (min-width: 1025px) {
  .history-page .thumb-grid,
  .collection-page .thumb-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ================================================================
履歴ページ、お気に入りページ サムネイル周りのベージュ領域を削除
================================================================ */
.history-page .thumb-item,
.collection-page .thumb-item {
  background: none !important;   /* ベージュ背景削除 */
  padding: 0 !important;         /* 内側余白削除 */
  margin: 0 !important;          /* 不要な外余白削除 */
  box-shadow: none !important;   /* サムネ外枠の影も削除 */
}










/* ====================================================================================================
【履歴ページ・お気に入り】　リンク（< a >）のデフォルトの装飾で青いリンク色、下線がついてしまうので非表示に
======================================================================================================= */


.header-icons a {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 親の色を継承（青リンク色を防ぐ） */
}

/* ====================================================================================================
【履歴ページ・お気に入り】　リンク（< a >）のデフォルトの装飾で青いリンク色、下線がついてしまうので非表示に
======================================================================================================= */






/* ================================================================
履歴ページ・お気に入り　ヘッダーTOPで表示させる位置調整
=================================================================== */

/* アイコンの親 */
.header-icons {
  display: flex;
  gap: 10px;              /* アイコン間の距離 */
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 40px;
  line-height: 30px;
  padding-right: 15px;    /* ← 右端から20pxだけ内側に寄せる */
}

/* ===================================================================
履歴ページ・お気に入り　ヘッダーTOPで表示させる位置調整　　　ここまで
====================================================================== */




/* ===================================================================
 履歴・お気に入り 共通　フォント色
====================================================================== */
/* 履歴・お気に入り 共通 */
.header-icons .icon {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}




/* ホバー時（色変化だけ控えめに） */
.header-icons .icon:hover {
  color: #e60033; /* FANZA寄りの赤系 */
}

/* PC用（標準サイズ） */
@media (min-width: 769px) {
  .header-icons .icon {
    font-size: 15px;   /* Cocoonデフォルトに近いバランス */
    margin-left: 12px; /* アイコン間の余白 */
  }
}

/* スマホ用（少し小さめに調整） */
@media (max-width: 768px) {
  .header-icons .icon {
    font-size: 13px;   /* スマホでは少し小さく */
    margin-left: 2px;  /* 余白も縮小 */
  }
}

/* ===================================================================
 履歴・お気に入り 共通　フォント色
====================================================================== */








/* アイコン画像 共通 */
.icon-img {
  width: 20px;            /* デフォルトサイズ */
  height: auto;
}



.history-icon {
  position: relative;
  top: 2px;  /* 履歴テキストだけ少し下げる、お気に入りテキストと同じ高さにする */
}



/* スマホ用調整 */
@media (max-width: 768px) {
  .header-icons {
    gap: 14px;            /* スマホでは間隔を少し狭く */
  }
  .header-icons .icon {
    font-size: 14px;      /* スマホでは文字を少し小さく */
    gap: 4px;             /* アイコンと文字の間隔も詰める */
  }
  .icon-img {
    width: 18px;          /* スマホでアイコンを少し小さく */
  }
}



/* ============================================================
  履歴、お気に入り　左のアイコンサイズ等　PC,スマホ　　ここまで
============================================================== */






/* ====================================================================
  履歴・お気に入りのフォント、位置　 見出し
====================================================================== */

/* 見出し＋ボタンを横並びにする */
.collection-header,
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px; /* スマホ用に間隔を確保 */
  flex-wrap: wrap; /* 狭い画面で折返し可能にする */
}

/* h2 に下線は残す */
.history-page h2,
.collection-page h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  padding: 5px 0;
  border-bottom: 2px solid #ccc; /* ✅ 下線維持 */
  flex: 1; /* 横幅を取る */
  min-width: 140px; /* 極端に狭くならないように調整 */
}

/* ボタン位置調整 */
.clear-history-btn,
.clear-collection-btn {
  margin-left: 20px;
  white-space: nowrap; /* 折返し防止 */
  font-size: 0.9rem;
  padding: 6px 10px;
}

/* --- スマホ（768px以下） --- */
@media (max-width: 768px) {
  .history-page h2,
  .collection-page h2 {
    font-size: 1.1rem;  /* 見出しを少し小さめに */
    margin-bottom: 6px;
  }

  .clear-history-btn,
  .clear-collection-btn {
    margin-left: 0;       /* 左余白をリセット */
    font-size: 0.8rem;    /* ボタンも少し小さめ */
    padding: 4px 8px;     /* コンパクト */
  }

}

/* ==========================================================================
  履歴・お気に入りのフォント、位置　ここまで
============================================================================ */





.thumb-item {
  text-align: center;
}

.add-to-fav {
  display: inline-block;
  margin-top: 3px;          /*  サムネイルに近づける */
  padding: 6px 10px;
  background: #ffcc00;
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 13px;          /* フォントサイズ */
  font-weight: bold;        /*  太字 */
  cursor: pointer;
  transition: 0.2s;
}

.add-to-fav:hover {
  background: #ffaa00;
}








































/* ====================================================================
   最近チェックした作品 共通レイアウト（上下余白を狭め、左揃え）
====================================================================*/

/* 全体ブロック */
.recent-viewed-block {
  margin: 12px 0; /* 全体の上下余白をさらに狭く */
}

/* 見出し＋削除ボタン */
.recent-viewed-block .recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 2px 6px;   /* ← 上下余白を極小に調整 */
  margin-bottom: 8px; /* サムネイルとの距離も少し狭める */
  background: none !important;
}

/* 見出しテキスト（左揃えに変更） */
.recent-viewed-block .recent-title {
  text-align: left;   /* ← 左揃え */
  font-size: 18px;  
  font-weight: bold;
  margin: 0;
  flex: 1;
  line-height: 1.2;   /* テキスト自体の上下余白も抑える */
  background: none !important;
}

/* 履歴削除ボタン */
.clear-recent-btn {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 4px 8px; /* ボタンもコンパクト化 */
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  margin-right: 20px;  /* 右余白を追加してボタンを左へ寄せる */
  white-space: nowrap;
}
.clear-recent-btn:hover {
  background: #e3e3e3;
}

/* サムネイルグリッド */
.recent-viewed-block .thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

/* ============================================================
   スマホ用
============================================================ */
@media (max-width: 768px) {
  .recent-viewed-block {
    margin: 8px 0;
  }

  .recent-viewed-block .recent-header {
    padding: 2px 4px; /* スマホもギリギリまで狭く */
  }

  .recent-viewed-block .recent-title {
    font-size: 14px;
    line-height: 1.2;
    text-align: left; /* スマホでも左揃え */
  }

  .recent-viewed-block .thumb-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  .recent-viewed-block .thumb-grid img {
    width: 100%;
    height: auto;
    border-radius: 3px;
  }
}






/* 最近チェックした作品の箇所の人形アイコンサイズ（履歴） */

.recent-title .recent-icon {
  width: 20px;          /* PC時のアイコンサイズ */
  height: auto;
  margin-right: 6px;    /* テキストとの間隔 */
  vertical-align: middle; /* テキスト高さと揃える */
}

/* スマホ用 */
@media (max-width: 768px) {
  .recent-title .recent-icon {
    width: 16px;        /* スマホでは少し小さめに */
    margin-right: 4px;
  }
}



/* ===========================================================================
   最近チェックした作品 共通レイアウト（上下余白を狭め、左揃え）　　ここまで
=============================================================================*/












/* ============================================================
   最近チェックした作品、履歴をすべて削除の上下余白を狭くする
============================================================ */


.recent-viewed-block .recent-title {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  color: #333 !important;
font-weight: 600 !important;	
}



/* ======================================================================
 最近チェックした作品、履歴をすべて削除の上下余白を狭くする　ここまで
======================================================================= */




/* =======================================================================================================
   スマホ実機での履歴グリッド余白を完全リセット　　　【最近チェックした作品】
===========================================================================================================*/
@media (max-width: 768px) {
  /* 1. thumb-item 間の余白をゼロ化 */
  #recent-viewed-list.thumb-grid .thumb-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. thumb-inner に付いている隠れた余白を除去 */
  #recent-viewed-list .thumb-inner {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* 3. 画像と削除ボタンの隙間を最小化 */
  #recent-viewed-list .thumb-inner img {
    display: block !important;
    margin-bottom: 2px !important;  /* ← 1pxでもOK */
  }

  /* 4. 削除ボタンの上下余白を完全リセット */
  #recent-viewed-list .remove-btn {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  /* 5. グリッドの行間を調整（縦方向ギャップを縮小） */
  #recent-viewed-list.thumb-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 3px !important;      /* ← 横・縦ともにギャップ最小化 */
    row-gap: 3px !important;  /* ← Safari実機対策 */
  }
}



/* ==========================================================================================================
   スマホ実機での履歴グリッド余白を完全リセット　　　【最近チェックした作品】　　　　　　　　　　ここまで
===========================================================================================================*/











/* ======================================================================
  【スマホ版】履歴ページ：お気に入り追加＋削除リンク
======================================================================= */
@media (max-width: 768px) {
  #history-list.thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  #history-list .thumb-item {
    width: 110px !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #history-list .thumb-item img {
    width: 100% !important;
    max-height: 170px !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: #fff;
    display: block;
  }

  /* 🔥 お気に入り追加ボタン（幅を強制的にサムネに合わせる） */
  #history-list .thumb-item button.add-fav-btn,
  #history-list .thumb-item button.add-to-fav {
    width: 110% !important;         /* ← サムネ内に収まるサイズ */
    max-width: 100px !important;    /* ← 140px上書き阻止 */
    font-size: 11px !important;
    padding: 6px 0 !important;
    text-align: center;
    margin: 4px auto 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 削除リンク */
  #history-list .thumb-item button.remove-btn {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    font-size: 12px !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
    width: auto !important;
    margin-top: 2px !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ======================================================================
  【スマホ版】お気に入りページ：削除リンクのみ
======================================================================= */
@media (max-width: 768px) {
  #collection-list.thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  #collection-list .thumb-item {
    width: 110px !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #collection-list .thumb-item img {
    width: 100% !important;
    max-height: 170px !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: #fff;
    display: block;
  }

  /* 削除リンク */
  #collection-list .thumb-item button.remove-btn {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    font-size: 12px !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
    width: auto !important;
    margin-top: 4px !important;
    display: block !important;
    text-align: center !important;
  }
}








.recently-viewed img {
    width: 200px !important;  /* 好きなサイズに変更 */
    height: auto !important;
}










/* ===============================================================================================================
  ▼▼▼追加CSSから移行した部分（2025-10-04） ▼▼▼
=============================================================================================================== */



/* ==========================================
   【最優先上書き】エントリーカードの密着修正
========================================== */

.entry-card {
  text-align: left !important;
}

.entry-card .entry-thumb,
.entry-card .entry-thumb img {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  object-fit: cover !important;
}

.entry-card .entry-title {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* タグページ等のセンター寄せ指定を強制無効化 */
body.tag-content .entry-title,
body.tag-content .entry-title a {
  text-align: left !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}








/* ▼ サムネイル統一表示 */
.entry-thumb img {
  display: block !important;
  margin: 0 auto !important;
  width: 150px !important;
  height: 204px !important;
  object-fit: contain !important;
  vertical-align: bottom !important;
  background-color: #fff;
}














/* ====================================================================================
　　エントリーカード内タイトル：5行省略＋短文タイトルの余白自動詰め（安定版）
======================================================================================== */

/* 共通設定（5行まで・左揃え・省略あり） */
.entry-title,
.entry-title a {
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important; /* ← 最大5行 */
}

/* ▼ 短文タイトルは line-clamp を解除して余白をゼロにする */
.entry-title.short a {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  height: auto !important;
}

/* ====================================================================================
　　エントリーカード内タイトル：5行省略＋短文タイトルの余白自動詰め（安定版）ここまで
======================================================================================== */














.entry-meta {
	font-size: 15px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
	 /* ▼ 女優名1行〜2行まで対応して整列を保つ */
  min-height: 2.6em; /* = 1.3行 × 2行分 */
	 /* ▼ 以下で2行で省略（…）させる */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
}



/* ▼ スマホ専用（サムネ下の余白調整＋高さ固定解除） */
@media screen and (max-width: 768px) {
  .entry-meta {
    min-height: auto !important; /* ← 高さ制限を解除 */
    margin-top: 0 !important;    /* ← サムネ直下の余白削除 */
    margin-bottom: 4px !important; /* ← タイトルとの距離を自然に */
  }
}





/* CVボタン（PC・スマホ共通ベース） */
.fanza-button,
.cv-btn {
  display: inline-block;
  padding: 6px 25px;
  font-size: 0.85em;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(to bottom, #ffe0b3 0%, #ffd199 100%);
  color: #4d2c00;
  text-decoration: none;
  margin: 0 auto 10px;
  width: fit-content;
}
.fanza-button:hover,
.cv-btn:hover {
 background: linear-gradient(to top,  #ffe0b3 0%, #ffd199 100%);
  color: #1a0dab !important; 
}





/* スマホエントリーカード最適化 */
@media screen and (max-width: 768px) {
  .post-list,
  .post-list-3col {
    align-items: stretch !important;
		display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 16px;
  row-gap: 24px;
  }

  .entry-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
　　padding-bottom: 12px; /* カード自体の下余白 */
	
  }

  .entry-title {
    margin-top: 4px;
    margin-bottom: 4px !important;
  }

  .cv-button {
    margin-top: auto;
    padding-top: 3px;
    padding-bottom: 3px;
    display: flex;
    justify-content: center;
  }

  .cv-button .cv-btn {
    width: 90%;
    padding: 10px 0;
    font-size: 1em;
  }
}

main.main {
  padding: 0 !important;
  margin: 0 !important;
}
/* スマホエントリーカード最適化ここまで */



/* entry-thumb は画像を囲っているブロック要素 */
.entry-thumb {
	
  height: 230px; /* サムネイル画像の高さに合わせて固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
	
}






/* タグに「素人」が含まれるエントリーカードだけ拡大 */
.siroto-entry .entry-thumb img {
  width: 200px !important;
  height: 230px !important;
}







/* 素人ランキングだけ画像を拡大 */
.siroto-ranking .ga4-item {
  width: 190px;
  height: 210px;
}


.siroto-ranking .ga4-item img {
  object-fit: cover;
}











/* 横並びランキング全体 */
.ga4-horizontal-ranking {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}


/* hover時の浮き上がり効果 */
.ga4-item:hover {
  transform: scale(1.040);
 rgba(0,0,0,0.18);
}




/* タグページ・アーカイブページ用：投稿カードを横並びグリッド表示。トップページと同じ見た目に統一するためのCSS */
.entry-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
}






/* ナビ項目の作品一覧の文字サイズ */

.section-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
}







/*全カテゴリの投稿カード一覧を5カラムで美しく並べる共通スタイル */

.related-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  justify-content: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}








/* トップへ戻るボタン全体のスタイル ページ右下部にあるマーク*/

.go-to-top-button {
  background: #222 !important;      /* ぐっと落ち着いたトーン */
  color: #fff !important;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-size: 22px;
  transition: all 0.2s ease;
}

/* ホバー時の視覚効果 */
.go-to-top-button:hover {
  background-color: #444;           /* 少し明るく変化 */
  transform: translateY(-2px);
}

/* アイコンサイズ調整 */
.go-to-top-button .fas {
  font-size: 20px;
}









.related-performer-thumbs .entry-thumb {
  width: 150px;
  height: 204px;
  object-fit: contain;
  background: #fff;
  display: block;
  margin: 0 auto;
}

.siroto-entry .entry-thumb {
  width: 200px;
  height: 230px;
}



.related-thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  justify-content: flex-start;
}

.related-thumbnail-item {
  width: 160px;
  flex: 0 0 auto;
}

.related-thumbnail-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}





/* 全てのタグページのｈ１横のタグマーク非表示 */
.tag .archive-title .fas {
  display: none !important;
}














/* template-parts/各rank.php 記述の タイトル ナビ固定ページタイトルも共通 */



.ranking-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 0 0px 16px; /* ← 左に12pxだけ余白を追加（右にずらす） */
}







.ranking-icon {
  width: 30px;
  height: 30px;
	 margin-right: 5px;
}

.ranking-title {
  
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 16px;
  white-space: nowrap;
	 margin-top: 2px;
}

.ranking-subtext {
  margin-left: 12px; /* 推奨余白 */
  padding: 3px 8px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  border-radius: 4px;
  white-space: nowrap;
	 margin-top: 2px;
}

/* モバイル時に折り返し許容＋縦並びに変更（スマホ幅で崩れないよう） */
@media screen and (max-width: 480px) {
  .ranking-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0px 8px;
  }

  .ranking-subtext {
    margin-left: 0; /* スマホ時は margin を無効にして下に並べる */
	margin-top: 0px;  
  }
}





/* template-parts/各rank.php 記述の タイトル ナビ固定ページタイトルも共通 ここまで*/


















/* 作品詳細サンプル画像下に各ナビページにリンクボタンの補足説明*/

.cta-caption {
  text-align: center;
  font-size: 0.95em;
  margin-bottom: 10px;
  color: #333;
}

/* 作品詳細サンプル画像下に各ナビページにリンクボタンの補足説明ここまで*/








/*footer.phpにJS記述でスマホスワイプPC横スクロール　 */


body .ga4-horizontal-ranking {
  display: flex;
  flex-wrap: nowrap; /* ← 2段落ち防止 */
  overflow-x: auto;   /* ← 横スクロール有効化 */
  gap: 8px;           /* ← カード間の余白 */
  padding: 8px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox用：スクロールバー非表示 */
}

body .ga4-horizontal-ranking::-webkit-scrollbar {
  display: none; /* Safari/Chrome用：スクロールバー非表示 */
}

body .ga4-horizontal-ranking .ga4-item {
  flex: 0 0 auto;      /* ← 折り返さないように横幅固定 */


  scroll-snap-align: start;
}




/*footer.phpにJS記述でスマホスワイプPC横スクロールここまで　 */
















.ga4-horizontal-ranking {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.ga4-item {
  flex: 0 0 auto;
  width: 160px;
}

.ga4-horizontal-ranking {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}












.siroto-ranking .ga4-item {
  width: 190px !important;
  height: 210px !important;
}







/* 各ランキングタイトルグラデ色 */

.ranking-title {
  font-weight: bold;
  font-size: 18px;
  background: linear-gradient(to right, #ff4081, #2196f3); /* ピンク〜青 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.3;
  margin-right: 10px;
}

.ranking-subtext {
  font-size: 16px;
  color: #555;
  vertical-align: middle;
}

/* 各ランキングタイトルグラデ色ここまで*/






/* 各ランキング2文字のみ拡大*/
.ranking-label {
  font-size: 1.3em;     
  font-weight: bold;
  color: #ff3399;        
  margin-right: 2px;     
}
















/* 各画質アイコンの共通スタイル */
.quality-icon-img {
  width: auto;                      
  display: inline-block;            
}







/* ▼ 作品詳細CV最上段 テキスト（▼この作品の詳細はこちら▼） */
.cv-header {
  font-size: 20px;
  font-weight: bold;
  color: #d18300;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 2px dashed #f7c589;
}







/* ▼ 再生時間：アイコンとテキスト配置 */
.acf-runtime {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  color: #333;
  margin: 10px auto;
  text-align: center;
}


/* ▼ 再生時間：アイコンサイズ */
.acf-runtime img {
  width: 60px;
  height: auto;
  vertical-align: middle;
}


/* ▼ CVボタン */
.cv-and-quality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

/* スマホ CVボタンと「全ページ収録」の距離を詰める */
@media screen and (max-width: 768px) {
  .cv-and-quality {
    margin-top: 18px !important;   /* ← ボタンブロック全体の上余白を縮める */
  }

 .cv-btn {
    margin-top: 4px !important;   /* ← ボタン自体に余白がある場合も補正 */
  } 

  .cv-page-info {
    margin-bottom: 3px !important; /* ← 「全ページ収録」下の余白も微調整 */
  }
}



/* ====================================================================================================
　　　この作品の詳細はこちら全体囲い枠　　　
   =================================================================================================== */


 
.quality-box-outside {
  border: 2px solid #f5d9b0; 
  background: #fffaf7;
  padding: 16px 12px;
  margin: 40px auto;
  max-width: 660px; /* 囲いサイズ */
  width: 100%;  
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;

}




/* ====================================================================================================
　　　この作品の詳細はこちら全体囲い枠　　　　　ここまで
   =================================================================================================== */























/*高画質レベルについて全体*/


.quality-guide-block {
  border: 1px solid #f0c89c;
  background-color: #fff8f2;
  padding: 20px;
  margin: 20px auto;
  max-width: 900px;   /* ← 800～1000pxでOK */
  width: 100%;        /* ← 自動でスマホ幅に縮む */
  border-radius: 10px;
}




/*この動画の高画質レベルタイトル、文字サイズ、位置*/

.quality-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #d78f34;
	text-align: center;
}

.quality-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}



/*高画質レベルについて全体ここまで*/
















/* 画質レベルについて項目の画質アイコン*/

.quality-item img {
  width: 65px;        
  height: auto;
  margin-right: 12px;
  vertical-align: middle;  /* ← テキストとのズレ防止 */
}







 /* 画質レベルについての解説文バックカラーと下線 */

.kaisetubun {
  background-color: #fff7e0;
  border-bottom: 2px solid #ffc107;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}









/* =========================
 || この動画の高画質レベル ||映画館アイコンのアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル 
   ========================= */




.quality-box-outside {
  border: 2px solid #f5d9b0;   /* 枠色 */
  background: #fffaf7;         /* 背景色 */
  padding: 16px 12px;
  margin: 10px auto 10px; /* 上を15pxに変更して詰める */
  max-width: 850px;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}



/* PC映画館 Movieアイコン */
.quality-theater-image img {
  max-width: 350px; /* 最大幅 */
  width: 100%;      /* 親要素幅に合わせる（ただしmax-widthで制限） */
  height: auto;     /* 縦横比維持 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 0 auto 16px; /* 上0 / 左右autoで中央寄せ / 下16px */
  display: block;   /* 中央寄せ有効化 */
}



/* 映画館 Movieアイコン スマホ用（幅767px以下 */

@media screen and (max-width: 767px) {
  .quality-theater-image img {
    max-width: 230px; /* ← スマホでの最大幅 */
    margin-bottom: 12px;
  }
}




/* =========================
 || この動画の高画質レベル ||映画館アイコンのアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイルここまで 
   ========================= */












/* =========================
▼ この作品の詳細はこちら ▼のアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル 
   ========================= */




.cvbutton-gashitu {
  background: #fffaf4; /* 背景色（薄いクリーム色） */
  border: 2px solid #f2e0d2; /* 外枠の色と太さ */
  padding: 25px; /* 内側余白 */
  border-radius: 12px; /* 角丸 */
  margin: 10px auto 10px; /* 上・左右・下の余白 */
  max-width: 860px; /* 最大幅 */
  box-shadow: 0 0 10px rgba(240, 220, 200, 0.15); /* 薄い影 */
}




/* =========================
▼ この作品の詳細はこちら ▼のアウトライン線  CVボタン＋画質ラベルの囲い枠全体のスタイル ここまで
   ========================= */

























/* =========================
サムネイル画像に1回だけ走る輝きアニメーションを追加するスタイル
   ========================= */



.acf-thumbnail {
  position: relative;
  overflow: hidden;
}

/* 輝きラインのアニメーション（2回限定） */
.acf-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: subtle-shine 3s ease-in-out 0s 1; /* ←1回だけ再生 */
  z-index: 2;
  pointer-events: none;
}

/* アニメーション定義 */
@keyframes subtle-shine {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}



/* =========================
サムネイル画像に1回だけ走る輝きアニメーション追加するスタイル、ここまで
   ========================= */







/* ================================================
  トップページの画質レベルについてセッション
   ================================================ */


.hosoku-note {
  max-width: 980px;
  margin: 10px auto 20px;
  padding: 25px;
  border: 1px solid #f1c87a;       /* 金枠は維持 */
  border-radius: 8px;
  background: #fff8f4 !important; 
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}


/* ======================================================
  トップページの画質レベルについてセッション　 ここまで
 ====================================================== */





/* ==============================================================
【星評価】  【作品評価についての説明解説】　背景色
   ============================================================== */

body .hosoku-note {
  background: #fff8f4 !important;
}

/* ==============================================================
【星評価】  【作品評価についての説明解説】 背景色    ここまで
   ============================================================== */










/* =========================
  トップページの動画クオリティの違いについて全体と外枠
   ========================= */

.video-quality-note {
  max-width: 980px;
  margin: 40px auto 20px;
  padding: 25px;
  background: #fffaf5;
  border: 1px solid #f1c87a;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* タイトルの水色背景帯と中央揃え */
.video-quality-title {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 6px;
  font-size: 1.4em;
  font-weight: bold;
  color: #a86d00;
  text-align: center;
  margin: 0 0 20px;
}

/* アイコンの左寄せ */
.video-quality-title .video-icon {
  margin-right: 5px;
}

/* 説明文部分 */
.video-quality-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}



/* =========================
  トップページの動画クオリティの違いについて全体と外枠　ここまで
   ========================= */













/* =========================
 違法サイトとの比較説明ブロック全体
   ========================= */


.hikakubun-note {
  max-width: 980px;
  margin: 40px auto 20px;
  padding: 25px 20px 20px;
  background: #fffaf5;
  border: 1px solid #f1c87a;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  font-size: 17px;
  color: #555;
  position: relative;
  line-height: 1.9;
}



/* 当サイト掲載作品は【正規配信版】です */
.hikakubun-note .hikakubun-title {
  width: 100%;
  background: #fff2e6;
  border-bottom: 1.5px solid rgba(160, 130, 90, 0.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  color: #7a6048;
  font-weight: bold;
  font-size: 1.15em;
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  margin: -10px 0 20px 0;
  box-sizing: border-box;
  display: block;
}






/* 強調箇所（HQや4K等） */
.hikakubun-note strong {
  color: #8b4000;
  font-weight: bold;
}


/* =========================
 違法サイトとの比較説明ブロック全体ここまで
   ========================= */














/* ▼ 画質ラベル全体のコンテナ（HIGH QUALITY + 4K ULTRA + HD FULL をまとめる枠） */
.gashitu-high-quality {
  text-align: center;
  margin: 40px auto 30px; /* 上下に余白を広めに */
}

/* ▼ 横長ラベルアイコン（例：HIGH QUALITY） */
.gashitu-high-quality .gashitu-icon {
  width: 240px;            /* 横長ラベル少し小さく */
  max-width: 90%;
  height: auto;
  margin-bottom: 12px;
}

/* ▼ 複数の小さい画質バッジを横並びにするコンテナ（例：4K ULTRA ＋ HD FULL） */
.gashitu-labels {
  display: flex;
  justify-content: center;
  gap: 12px;                /* バッジ間の間隔 */
  flex-wrap: wrap;          /* スマホでは折り返しOK */
}

/* ▼ 小さい画質バッジアイコン（例：4K ULTRA、HD FULL） */
.gashitu-labels .gashitu-badge {
  width: 75px;              /* バッジの横幅 */
  height: auto;
}








/* =========================
トップページのみ表示の【動画クオリティの違いについて】
   ========================= */



/*全体の動画クオリティの違いについてセッション */

/* 改行防止 */
.nowrap {
  white-space: nowrap;
}





/* 動画クオリティの違いテキストマーカー装飾 */
.marker {
  background: linear-gradient(
    transparent 60%,
    var(--marker-color, #fff7cc) 60%
  );
  font-weight: 500;
  display: inline;
}


.marker-blue {
  --marker-color: #fff7cc;
}












/* ==================================================================================
    パンくず全体デザイン
   ================================================================================== */
.wrr-breadcrumb {
  font-size: 0.9rem;               /* テキストサイズ（やや小さめ） */
  color: #666;                     /* 文字色（グレー系） */
  margin-bottom: 0px;             /* 下余白：タイトルとの距離 */
  display: flex;                   /* 横並びレイアウト */
  flex-wrap: wrap;                 /* スマホ時に折り返しを許可 */

  /* 背景・装飾 */
  background: #fff;                /* 白背景で独立感を出す */
  padding: 0px 12px;               /* 内側余白（上下・左右） */
  border-radius: 4px;              /* 角を軽く丸める */
  margin-top: 6px;                 /* 上余白（パンくず上部の余白） */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* ごく薄い影で立体感 */
}


/* =========================================
   ■ パンくずのリスト全体（ol要素）
   ========================================= */
.wrr-breadcrumb ol {
  list-style: none;                /* デフォルトの番号を非表示 */
  padding: 0;
  margin: 0;
  display: flex;                   /* 横並びに配置 */
  gap: 3px;                        /* 各リンク間の隙間 */
}


/* =========================================
   ■ 区切り記号「›」の設定
   ========================================= */
.wrr-breadcrumb li::after {
  content: "›";                    /* 区切り記号 */
  margin: 0 6px;                   /* 区切りと文字の距離 */
  color: #aaa;                     /* 区切りの色（控えめなグレー） */
}

/* 最後の要素（現在ページ）だけは記号を消す */
.wrr-breadcrumb li:last-child::after {
  content: "";
}


/* =========================================
   ■ リンク（aタグ）のスタイル
   ========================================= */
.wrr-breadcrumb a {
  color: #1a73e8;                  /* リンク色（Googleブルー系） */
  text-decoration: none;           /* 下線を非表示 */
  transition: color 0.2s ease;     /* ホバー時の色変化をなめらかに */
}

/* リンクのホバー時（マウスを乗せたとき） */
.wrr-breadcrumb a:hover {
  text-decoration: underline;      /* 下線表示 */
  color: #0c5ec2;                  /* 少し濃い青で反応を出す */
}


/* =========================================
   ■ 現在ページ（最後の要素）の強調
   ========================================= */
.wrr-breadcrumb li:last-child {
  font-weight: 500;                /* わずかに太字で目立たせる */
  color: #333;                     /* 本文色で読みやすく */
}


/* =========================================
   📱 スマホ表示用スタイル（768px以下）
   ========================================= */
@media screen and (max-width: 768px) {
  .wrr-breadcrumb {
    font-size: 0.78rem;            /* 文字サイズを少し縮小 */
    line-height: 1.4;              /* 行間を広めに調整（詰まり防止） */
    padding: 6px 10px;             /* 内側余白をコンパクトに */
    margin-top: 4px;               /* 上の余白を微調整 */
    margin-bottom: 10px;           /* 下余白を少し短く */
  }

  /* 区切り「›」の間隔を詰めてスマホ幅に最適化 */
  .wrr-breadcrumb li::after {
    margin: 0 4px;
  }
}


/* =============================================================================================
   パンくず全体デザインここまで
   =============================================================================================*/













/* =========================
  スマホのみACFとCVブロックと映画アイコン高画質レベル順序入れ替え用のラッパー content.php
   ========================= */



.mobile-swap{
  display:flex;
  flex-direction:column;
}

/* PCデフォ順：ACF → CV */
.mobile-swap .block-acf{ order:1; }
.mobile-swap .block-cv { order:2; }

/* スマホでは CV を先に（CV → ACF） */
@media (max-width: 768px){
  .mobile-swap .block-acf{ order:2; }
  .mobile-swap .block-cv { order:1; }
}















/* =========================
PCではHIGH QUALITYも4K/8K/HDを表示し、スマホでは非表示に
   ========================= */

@media screen and (max-width: 768px) {
  .title-and-quality .quality-icons-title {
    display: none !important;
  }
}

/* =========================
PCではHIGH QUALITYも4K/8K/HDを表示し、スマホでは非表示に
   ========================= */













/* =========================
出演作品でよく見られている動画の左アイコンとキラリン効果
   ========================= */



/* 見出し全体 */
.related-performer-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 1.1em;
}

/* アイコン用ラッパ */
.related-performer-heading .ninki-icon {
  position: relative;
  display: inline-block;
  height: 50px;
  margin-right: 15px;  /* テキストとの間隔 */
  transform: translateX(8px); /* 少し右に寄せる */
  overflow: hidden; /* 光がはみ出ないように */
}

.related-performer-heading .ninki-icon img {
  height: 100%;
  display: block;
}

/* キラリン効果をアイコンにだけ適用 */
.related-performer-heading .ninki-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  z-index: 2;
  animation: kirarin 5s ease-in-out infinite;
}

@keyframes kirarin {
  0% { left: -100%; }
  30% { left: 120%; }
  100% { left: 120%; }
}






/* =========================
出演作品でよく見られている動画の左アイコンとキラリン効果　ここまで
   ========================= */








@media screen and (max-width: 768px) {
  /* スマホ用：作品情報タイトル＋水色帯の位置 */
  .acf-details h2,
  h2:has(+ .acf-details) {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
  }

  /* テーブルとの余白 */
  .acf-details {
    margin-top: 3px !important;
  }
}






	






/* =========================
【スマホ限定】のサンプル画像6枚表示functionphpに記述済み＋このコード
   ========================= */	




.show-more-btn {
  display: block;
  margin-top: 0px;
  margin-bottom: 24px; /* 余白を少し広めに */
  margin-left: auto;
  margin-right: auto;
  padding: 14px 28px; /* タップしやすさ + 高級感 */
  font-size: 16px; /* 視認性を上げる */
  font-weight: bold;
  color: #fff;
  background: linear-gradient(145deg, #222, #333); /* 上品な黒グラデーション */
  border: 1px solid #555; /* 薄いグレーの縁取りで高級感 */
  border-radius: 4px; /* 少し角を落ち着かせる */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 影で立体感 */
}

.show-more-btn:hover {
  background: linear-gradient(145deg, #333, #444); /* ホバー時にほんのり明るく */
  border-color: #777; /* 輪郭を少し明るく */
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}



/* =========================
【スマホ限定】のサンプル画像6枚表示functionphpに記述済み＋このコードここまで
   ========================= */	








/* =========================
h1, h2 の字体に 高級感のある Google Fonts
   ========================= */	


h1, h2.section-title {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.5px;
}


/* =========================
h1, h2 の字体に 高級感のある Google Fonts　ここまで
   ========================= */	





















/* =========================
※当サイトで掲載している動画は、すべて高解像度な 正規配信の高画質版です
 ※、アスタリスクのみ赤色
 ========================= */


.quality-note .asterisk {
  color: #d32f2f;        /* 落ち着いた赤 */
  font-weight: bold;     /* 強調 */
  margin-right: 3px;     /* 後ろの文字と余白 */
  font-size: 1.2em;      /* 少し大きく（本文より20%拡大） */
}




/* =========================
※当サイトで掲載している動画は、すべて高解像度な 正規配信の高画質版です
 ※、アスタリスクのみ赤色　ここまで
 ========================= */





.tag-title.tag-heading-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;   /* ← テキストとアイコンの間の余白 */
}









/* =========================
single-contents.php 領域を背景の白背景にする
 ========================= */

.single-post .under-entry-content {
  background-color: #ffffff !important;
  border-radius: 0 !important;   /* 角丸も不要なら解除 */
  border: none !important;       /* 枠線もいらなければ消す */
}


/* =========================
single-contents.php 領域を背景の白背景にする　　　　　　ここまで
 ========================= */




/* =========================
【スマホ版】TOPページのHIGHQUALITYと画質アイコンサイズ調整
 ========================= */

@media screen and (max-width: 768px) {
  /* HIGH QUALITYアイコン */
  .gashitu-high-quality .gashitu-icon {
    width: 100px !important;   /* ← max-width ではなく width で固定 */
    height: auto !important;
  }

  /* HD / HQ / 4K / 8Kのバッジ */
  .gashitu-high-quality .gashitu-badge {
    width: 40px !important;    /* ← 同じく width の方が確実 */
    height: auto !important;
  }
}

/* =========================
【スマホ版】TOPページのHIGHQUALITYと画質アイコンサイズ調整　　ここまで
 ========================= */







/* =========================
全ページ共通：素人作品サムネイルを中央寄せ＆少し小さめに　追加CSSでないと効かないのでここに置く
 ========================= */



.siroto-entry .entry-thumb {
  display: flex !important;
  justify-content: center !important; /* 横方向中央 */
  align-items: center !important;     /* 縦方向中央 */
  width: 100% !important;
  min-height: 230px !important;       /* 枠高さは確保 */
  overflow: hidden !important;        /* はみ出し防止 */
  background: #fff;                   /* 必要なら背景白 */
}

.siroto-entry .entry-thumb img {
  display: block !important;
  margin: 0 auto !important;          
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;   /* ← 小さめに調整（元は230px） */
  max-height: 180px !important;  /* 正方形サムネが中央に収まる */
  object-fit: contain !important;
  aspect-ratio: unset !important; /* 16:9を解除 */
}
  
	  
/* =========================
全ページ共通：素人作品サムネイルを中央寄せ＆少し小さめに　追加CSSでないと効かないのでここに置く　ここまで
 ========================= */








	  
/* ==============================
TOPと/2d/ /vr/ /siroto/に効く　(tag,seriesページは別に設定)エントリーカードのカード幅の固定related-listを使っているTOPページ
 ============================== */
  
	  /* related-list 内のカードを均等幅にする */
.related-list .entry-card {
  width: 100% !important;
  min-width: 200px !important; /* 160px → 少し大きめに固定 */
  box-sizing: border-box !important;
}


  
/* ==============================
TOPと/2d/ /vr/ /siroto/に効く　(tag,seriesページは別に設定)エントリーカードのカード幅の固定related-listを使っているTOPページここまで
 ============================== */








/* ==============================
 /series/ページ/tag/ページのエントリーカードのカード幅の固定に効く　(TOPページ/2d/ /vr/ /siroto/は別に設定)
 ============================== */

/* /series/ 用 */
.series-content .entry-card-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  justify-content: center !important;
}

/* /tag/ 用 */
.tag-content .entry-card-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  justify-content: center !important;
}
	

/* ==============================
 /series/ページ/tag/ページのエントリーカードのカード幅の固定に効く　(TOPページ/2d/ /vr/ /siroto/は別に設定)ここまで
 ============================== */
	
	
	
	
	
	
	
	
/* =====================================================================================================
  ▼▼▼追加CSSから移行した部分（2025-10-04） ▼▼▼
=============================================================================================================== */
	








/* ==========================================================
　左右レイアウト定義（パッケージ左／ACF右）
========================================================== */


.post-main-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;  /* ← 中央寄せを解除して左寄せ */
  align-items: flex-start;       /* ← 上端を揃える */
  gap: 30px;                     /* ← 間隔を少し広めにして自然に */
  width: 100%;                   /* ← max-width削除、幅制限解除 */
  box-sizing: border-box;
}





/* 左：パッケージ画像エリア */
.package-left {
  flex: 0 0 80%;　　　　 /* ← ここを70%や80%にすれば画像領域を広げられる */　　
  max-width: 60%;
  text-align: center;
}


.package-left img {
  width: 120%;       /* ← ここを120%, 130%にすれば画像自体を拡大できる */
  height: auto;
}





/* 右：ACF作品情報エリア */
.acf-details-right {
  flex: 0 0 40%;
  max-width: 40%;
  text-align: left;
  box-sizing: border-box;
}

/* スマホ時は縦並び */
@media screen and (max-width: 768px) {
  .post-main-wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .package-left,
  .acf-details-right {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}



/* ==========================================================
　左右レイアウト定義（パッケージ左／ACF右）　　　ここまで
========================================================== */










/* ==========================================================
　ACF作品情報スタイル
========================================================== */

/* テーブル構造 */
.acf-details-right table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.acf-details-right th,
.acf-details-right td {
  text-align: left;
  vertical-align: middle;
  padding: 8px 10px;
  line-height: 1.7;
  word-break: break-word;
}

/* ヘッダー（項目名） */
.acf-details-right th {
  background-color: #fff6f6;
  font-weight: bold;
  color: #333;
  width: 30%;
}

/* データ（値） */
.acf-details-right td {
  background-color: #fff;
  color: #111;
}

/* 「作品情報」などの見出し */
.acf-details-right caption,
.acf-details-right .table-heading {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
}



/* ==========================================================
　ACF作品情報スタイル　　　　　　　ここまで
========================================================== */


/* ==============================================================================================
作品詳細ページのh2作品情報だけ中央寄せ
================================================================================================= */

.acf-details-left h2 {
  text-align: center !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}


/* ================================================================================================
作品詳細ページのh2作品情報だけ中央寄せ　　　　　ここまで
================================================================================================== */




/* =====================================================================================================
　作品詳細ページ 【【スマホでの表示順入れ替えコード】】　　スマホ時：ACFが下、パッケージが上になるよう順番を修正
======================================================================================================= */


@media screen and (max-width: 768px) {
  .post-main-wrap {
    display: flex;
    flex-direction: column;
  }

  
  .package-left {
    order: 1;
  }

 
 .acf-details-right,
  .acf-details-left {
    order: 2; 
  }
}


/* =====================================================================================================
スマホ時：ACFが下、パッケージが上になるよう順番を修正　　　　　　　ここまで
======================================================================================================= */











/* =======================================================================================
スマホ表示時 ACF作品情報をスマホ幅に合わせるACF領域を中央寄せ
======================================================================================= */


@media screen and (max-width: 768px) {
  /* ACF全体の枠をスマホ幅に合わせる */
  .acf-details-left,
  .acf-details-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* テーブル要素も横幅いっぱいにする */
  .acf-details-left table,
  .acf-details-right table {
    width: 100% !important;
    margin: 0 auto !important;
    border-collapse: collapse !important;
  }

  /* 「作品情報」タイトルを中央寄せ */
  .acf-details-left h2,
  .acf-details-right h2 {
    text-align: center !important;
    margin: 0px auto !important;
  }
}



/* =======================================================================================
スマホ表示時 ACF作品情報をスマホ幅に合わせるACF領域を中央寄せ　　　　　　ここまで
======================================================================================= */




/* =======================================================================================
　　　　　　　　　　　　　　ACF作品情報全体　　　
======================================================================================= */

/* ACF作品情報全体 */


.acf-details-left {
  margin: 0;
  padding: 0;
  transform: scale(0.85);        /* ← ACF全体を85%に縮小 */
  transform-origin: left top;   /* ← パッケージ画像の左上基準で縮小（右にズレない） */
}
  


/* タイトル */
.acf-details-left .acf-title {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 1.1em;
  font-weight: bold;
}

/* テーブル全体 */
.acf-details {
  margin: 0;
  padding: 0;
}

.acf-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 320px;
  margin: 0;
  padding: 0;
}

/* セル */
.acf-table th,
.acf-table td {
  border: 1px solid #ddd;
  padding: 6px 10px;
}

/* 左側の見出し列 */
.acf-table th {
  background: #fff0f5;
  width: 35%;
  font-weight: bold;
  text-align: left;
}

/* 右側の内容列 */
.acf-table td {
  background: #fff;
  text-align: left;
}


/* =============================================
   スマホ対応（768px以下）でも横並びを維持
============================================= */
@media screen and (max-width: 768px) {
  .acf-table {
    font-size: 0.95em;
  }

  .acf-table th,
  .acf-table td {
    display: table-cell !important;  /* ← block化を防止 */
    width: auto;
  }

  .acf-table th {
    width: 38% !important; /* ← 左列幅を維持 */
    white-space: nowrap;   /* ← 改行防止で見出し整形 */
  }

  .acf-table td {
    width: 62% !important;
  }
}




/* =======================================================================================
　　　　　　　　　　　　　　ACF作品情報全体　　　
======================================================================================= */



/* ──────────────────────────────────────────
  【JS】 Lazy Load画像：フェードインアニメーション  　　　【ＰＣ,スマホ共通】
────────────────────────────────────────── */
.sample-item img {
  opacity: 0;
  transform: scale(1.05); /* ← 1.02 → 1.05で少し大きく始まる */
  transition: opacity 1s ease-out, transform 1s ease-out;
}


/* 画像が読み込まれたら自然にフェードイン */
.sample-item img[data-loaded="true"] {
  opacity: 1;
  transform: scale(1);
}


/* ─────────────────────────────────────────────
   【JS】Lazy Load画像：フェードインアニメーション　　　　【ＰＣ,スマホ共通】　　　　　　　ここまで
───────────────────────────────────────────── */





/* 左右のブロックを正確に同じ高さに揃える */
.post-main-wrap {
  display: flex;
  align-items: stretch;   /* ← 高さを統一 */
  gap: 20px;
}

/* 左側パッケージ画像の余白をリセット */
.package-left img {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
  max-width: 100%;
}

/* 右側ACFを85%に縮小しつつ、上下中央に揃える */
.acf-details-left {
  margin: 0;
  padding: 0;
  transform: scale(0.85);
  transform-origin: left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

















/* ===================================================================================================
ファンザ漫画は→　黒帯1行目　作家名（ACF: post_author）黒帯2行目　カテゴリー（ACF: post_category）※「アダルトマンガ単行本」なら「単行本」と表示

同人誌は黒帯1行目　作家名（ACF: post_author）黒帯2行目　作品形式（ACF: post_format）例コミック、CG、音声などと表示
=================================================================================================== */













/* ==================================================================================================
  【GA4】 同人誌ランキング専用アスペクト比率に合わせた表示レイアウト定義　　　の全体のまとまり　　　　　
   ================================================================================================== */


section.ranking-section.ranking-doujin .ga4-horizontal-ranking {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0px;
  overflow-x: auto;
  padding-bottom: 6px;
}

/* 1枚ずつのカード設定（PC時はやや小さめに） */
section.ranking-section.ranking-doujin .ga4-item {
  position: relative !important;
  flex: 0 0 210px !important; /* ← 240px → 210px に縮小 */
  margin-right: 8px;
  overflow: hidden;
  border-radius: 6px;
}

/* 画像枠をaspect-ratio固定化 */
section.ranking-section.ranking-doujin .ga4-image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-top: 75% !important; /* 横長バランスは維持 */
  overflow: hidden !important;
  border-radius: 6px;
}

/* 画像を絶対配置でぴったりはめる */
section.ranking-section.ranking-doujin .ga4-image-wrapper img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 6px;
}

/* 黒帯（作品形式） */
section.ranking-section.ranking-doujin .performer-label {
  position: absolute;
  bottom: 0 !important;
  left: 0;
  width: 100%;
  padding: 1px 0 !important;            
  background: rgba(20, 20, 20, 0.30) !important; /* ← 薄い黒半透明 */
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important; /*  薄い白線を追加 */
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.03em;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
}



/* 順位ラベル（アダルト漫画人気ランキングと完全統一） */
section.ranking-section.ranking-doujin .ga4-rank-label {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #ff0066 0%, #cc0077 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 0 0 6px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}








/* ==============================================   
　（スマホ画面幅に2枚収まる）同人誌ランキングスマホ
============================================== */

@media screen and (max-width: 768px) {
  body section.ranking-section.ranking-doujin .ga4-item {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(47% - 4px) !important; /* ← 念のため追加 */
  }
}







/* =====================================================================
 【スマホ版】 同人ランキングのスマホ黒帯の配置位置サイズ調整
   ===================================================================== */
@media screen and (max-width: 768px) {
  

  section.ranking-section.ranking-doujin .ga4-image-wrapper img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  section.ranking-section.ranking-doujin .performer-label {
    position: absolute !important;
    bottom: 0 !important;        /* ← 下端固定 */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    padding: 3px 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 0 0 4px 4px;
    text-align: center;
    z-index: 3;
  }
}




/* ==================================================================================================
  【GA4】 同人誌ランキング専用アスペクト比率に合わせた表示レイアウト定義　　　の全体のまとまり　　　　　ここまで
   ================================================================================================== */





/* ==================================================================================================
【GA4】 アダルト漫画ランキング　　スマホでの黒帯の位置調整
   ================================================================================================== */


@media screen and (max-width: 768px) {
  body .ga4-horizontal-ranking .performer-label {
    bottom: 4px !important;  /* ← 上下位置を調整。4～8pxで調整OK */
    position: absolute !important;
    z-index: 5 !important;
  }
}

/* ==================================================================================================
【GA4】 アダルト漫画ランキング　　スマホでの黒帯の位置調整　　　ここまで
   ================================================================================================== */









/* =============================================================
   アダルト漫画 エントリーカード画像サイズ統一（150x225）
=============================================================== */

.page-adult-manga .video-list .entry-thumb img,
.new-section .video-list .entry-thumb img {
  width: 150px !important;       /* 固定幅 */
  height: 225px !important;      /* 固定高さ */
  object-fit: cover !important;  /* 画像を中央トリミングして比率維持 */
  display: block !important;
  margin: 0 auto !important;     /* センター寄せ */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* カード全体の中央揃えと6列表示 */
.page-adult-manga .video-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* カードブロック（6列固定） */
.page-adult-manga .video-list .entry-card {
  width: calc(16.66% - 14px) !important; /* PC6列 */
  text-align: center;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.25s ease;
}

.page-adult-manga .video-list .entry-card:hover {
  transform: translateY(-4px);
}

/* スマホ3列 */
@media screen and (max-width: 768px) {
  .page-adult-manga .video-list .entry-card {
    width: calc(33.33% - 10px) !important;
  }
  .page-adult-manga .video-list .entry-thumb img {
    width: 100px !important;
    height: 150px !important;
  }
}


/* ====================================================================
   アダルト漫画 エントリーカード画像サイズ統一（150x225）　　　ここまで
====================================================================== */








/* ================================================================================================
   スマホ表示のみ　【ACFブロック中央寄せ】（強制版）スマホでは .post-main-wrap 自体を外した構成
   ================================================================================================ */

@media screen and (max-width: 768px) {
  .acf-details-left {
    display: block !important;       /* 親がflexでも無視させる */
    width: 80% !important;           /* スマホ画面幅の8割に調整 */
    max-width: 520px;                /* タブレット以上の広がり防止 */
    margin: 0 auto !important;       /* 中央寄せ */
    text-align: center !important;   /* テキスト中央寄せ */
    float: none !important;          /* 万が一floatが残っていても解除 */
    clear: both !important;
  }

  .acf-details-left table {
    margin: 0 auto !important;       /* テーブルも中央に */
    width: 100% !important;          /* 画面幅にフィット */
    border-collapse: collapse;
  }

  .acf-details-left th,
  .acf-details-left td {
    text-align: left !important;     /* 表内の文字は左寄せに戻す */
    padding: 6px 8px;
  }

  .acf-title {
    text-align: center !important;
    margin: 10px 0 !important;
  }
}


/* ================================================================================================
   スマホ表示のみ　【ACFブロック中央寄せ】（強制版）スマホでは .post-main-wrap 自体を外した構成
   ================================================================================================ */

/* ======================================================================================================
   スマホ表示時：ACFブロック中央寄せ（強制版）スマホでは .post-main-wrap 自体を外した構成　　　ここまで
   ====================================================================================================== */























/* =============================================================================================================
 【アダルト漫画領域】エントリーカードPC6カラム、スマホ3カラム指定　TOPページ、新作ページ、アダルト漫画ページ、共通
=============================================================================================================== */


/* PC版（6カラム固定） */
.video-list-manga {
  display: flex;
  flex-wrap: wrap;
  
  gap: 5px; /* 余白 */
  margin: 0 auto;
  padding: 1px 0;
  max-width: 1280px;
}

.video-list-manga .entry-card {
  flex: 0 0 calc(16.66% - 10px);
  margin: 0 !important;
  box-sizing: border-box;
}



@media screen and (max-width: 768px) {
  .video-list-manga {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 6px; /* 横方向 */
    row-gap: 8px;    /* 縦方向（少し広めにして整える） */
    padding: 6px 0;
    max-width: 100%;
  }

  .video-list-manga .entry-card {
    flex: 0 0 calc(33.33% - 6px);
    margin: 0 !important;
    box-sizing: border-box;
  }
}




/* =============================================================================================================
【アダルト漫画領域】エントリーカードPC6カラム、スマホ3カラム指定　TOPページ、新作ページ、アダルト漫画ページ、共通　   ここまで
=============================================================================================================== */




/* ========================================================================================================
アダルト漫画エリア　エントリーカードとサムネイルサイズの定義（PC専用） カードからはみ出さずピッタリ表示
  ======================================================================================================== */



/* サムネイル画像 */
.video-list-manga .entry-card .entry-thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;        /* ← 縦長の表紙比率（一般的な漫画の比率） */
  object-fit: contain !important;        /* ← 全体を収めて切れを防止 */
  border-radius: 0 !important;
  display: block !important;
  transition: transform 0.25s ease;
}


/* ========================================================================================================
アダルト漫画エリア　エントリーカードとサムネイルサイズの定義（PC専用） カードからはみ出さずピッタリ表示ここまで
  ========================================================================================================*/



/* ========================================================================================================
【PC】アダルト漫画エリア　タイトル3行制限以降は…で処理　エントリーカードの高さ統一設定
  ========================================================================================================*/

/* アダルト漫画エリア：タイトルを3行まで表示し、省略記号で統一 */
.video-list-manga .entry-title {
  display: -webkit-box !important;      /* Flexのように扱う */
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3important;     /* ← 3行でカット（ここを変更すると行数を調整可） */
  overflow: hidden !important;          /* それ以上は非表示 */
  text-overflow: ellipsis !important;   /* 省略記号を追加 */
  line-height: 1.4em !important;
  min-height: 4.6em !important;         /* ← スマホタイトルの幅の上限調整 */
  max-height: 4.6em !important;         /* ← スマホタイトルの幅の下限調整 */
  text-align: left !important;
  word-break: break-word !important;    /* 長い英単語などでも折り返し */
}


 /* ========================================================================================================
【PC】アダルト漫画エリア　タイトル3行制限以降は…で処理　エントリーカードの高さ統一設定　　　ここまで
  ========================================================================================================*/





/* ========================================================================================================
【PC】アダルト漫画エリア　全カード高さ統一＋余白最小化（サムネイル・タイトル上下詰め調整済み）
======================================================================================================== */
.video-list-manga .entry-card {
  display: flex !important;
  flex-direction: column !important;     /* ← 上：画像 → 下：タイトル */
  justify-content: flex-start !important; /* ← 上詰めで余白をなくす */
  height: 346px !important;              /* ← 高さを最終調整（統一） */
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;          /* ← カード下の余白削除 */
}

/* サムネイル枠：高さ固定で整列 */
.video-list-manga .entry-card .entry-thumb {
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  margin-bottom: 4px !important;         /* ← サムネイルとタイトルの間隔を最小限に */
}

/* サムネイル画像（そのままのピッタリ表示） */
.video-list-manga .entry-card .entry-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  transition: transform 0.25s ease;
}

/* タイトル部分（3行制限＋上下余白最小化） */
.video-list-manga .entry-card .entry-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;       /* ← 3行で省略 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.35em !important;         /* ← 行間をやや詰める */
  min-height: 4.0em !important;           /* ← 3行分でピッタリ */
  max-height: 4.0em !important;
  text-align: left !important;
  font-size: 0.92em !important;
  word-break: break-word !important;
  margin: 0 !important;                   /* ← 上下余白を完全リセット */
  padding-bottom: 0 !important;           /* ← 内側余白を完全削除 */
}
/* ========================================================================================================
【PC】アダルト漫画エリア　全カード高さ統一＋余白最小化（サムネイル・タイトル上下詰め調整済み）ここまで
======================================================================================================== */



/* ========================================================================================================
【スマホ】アダルト漫画エリア　タイトル5行＋カード余白最小化（縦伸び防止含む）
======================================================================================================== */


/* タイトル全体（aタグに適用） */
.video-list-manga .entry-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  white-space: normal !important;
  font-size: 0.85em !important;
  line-height: 1.4em !important;
  margin-top: 4px !important;
  text-align: left !important;
  min-height: 7em !important;
  max-height: 7em !important;
}

/* カード全体（縦伸び防止＋余白最小化） */
.video-list-manga .entry-card {
  margin-top: 2px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}

/* ========================================================================================================
【スマホ】アダルト漫画エリア　タイトル5行＋カード余白最小化（縦伸び防止含む）　　　　　　　　ここまで
======================================================================================================== */


/* =====================================================================
【最終上書き】アダルト漫画タイトルを2行まで表示して以降…で省略
（どのバージョンのstyle.cssにも勝つ）
===================================================================== */

.video-list-manga .entry-card .entry-title,
.video-list-manga .entry-title,
.video-list-manga .entry-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; /* ← ★ ここを2行に変更 ★ */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4em !important;
  min-height: 2.8em !important; /* ← 1.4em × 2行分 */
  max-height: 2.8em !important; /* ← 同上 */
}


/* =====================================================================
【最終上書き】アダルト漫画タイトルを2行まで表示して以降…で省略
（どのバージョンのstyle.cssにも勝つ）　　　　　ここまで
===================================================================== */

/* ==============================================================================================================
アダルト漫画エリア【スマホ版】エントリーカードとサムネイルをピッタリ完全一致させる 3カラム固定・タイトルずれ修正 
=============================================================================================================== */


@media screen and (max-width: 768px) {

  /* 親リスト設定 */
  .video-list-manga {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;              /* ← gapを6px→4pxにして1列の幅を少し広げる */
    padding: 6px 0 !important;
  }

   /* 各カード */
  .video-list-manga .entry-card {
    flex: 0 0 calc(33.33% - 4px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;          /* ← はみ出し許可（高さ合わせ目的） */
    border-radius: 4px !important;
    background: #fff !important;
    display: flex !important;              /* ← 中身に合わせて高さ可変にする */
    flex-direction: column !important;     /* ← 上: サムネイル → 下: タイトル */
    justify-content: flex-start !important;
    min-height: 100px !important;　　　
     
  }

  /* サムネイル枠 */
  .video-list-manga .entry-card .entry-thumb {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  /* サムネイル画像（最大化） */
  .video-list-manga .entry-card .entry-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;      /* ← contain → cover に変更で“ピッタリ感”UP */
    border-radius: 0 !important;
    display: block !important;
    background-color: #fff !important;
    transition: transform 0.25s ease;   
  }

}



/* ==============================================================================================================
アダルト漫画エリア【スマホ版】エントリーカードとサムネイルをピッタリ完全一致させる 3カラム固定　　　　ここまで
=============================================================================================================== */












/* ============================================================================================================
【同人誌領域】エントリーカードPC6カラム、スマホ3カラム指定　TOPページ、新作ページ、同人誌ページ、共通　　
  ============================================================================================================*/

/* PC版（6カラム固定） */
.video-list-doujin {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important; /* 作品数が少なくても左詰め */
  gap: 5px; /* カード間の余白 */
  margin: 0 auto;
  padding: 10px 0;
  max-width: 1280px;
}

.video-list-doujin .entry-card {
  flex: 0 0 calc(20% - 10px); /* ← PCでは5カラム構成（横長サムネに合わせる） */
  margin: 0 !important;
  box-sizing: border-box;
}

/* スマホ版（768px以下：横幅いっぱい3カラム） */
@media screen and (max-width: 768px) {
  .video-list-doujin {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* 作品数が少なくても左詰め */
    column-gap: 6px !important; /* 横方向の余白 */
    row-gap: 8px !important;    /* 縦方向の余白 */
    padding: 8px 0 !important;
    max-width: 80 !important; /* ← 横幅いっぱいに */
  }

  .video-list-doujin .entry-card {
    flex: 0 0 calc(33.33% - 6px) !important; /* ← スマホ3カラム固定 */
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================================================================
【同人誌領域】エントリーカードPC6カラム、スマホ3カラム指定　TOPページ、新作ページ、同人誌ページ、共通　　ここまで
  ========================================================================================================= */



/* ==============================================================================================================
【スマホ】同人誌エリア　3カラム構成・サムネイル最大化・タイトル整列（3行制限＋省略処理）
=============================================================================================================== */
@media screen and (max-width: 768px) {

  /* 親リスト設定 */
  .video-list-doujin {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;                /* ← 横余白を最小限にしてカードを広く */
    padding: 6px 0 !important;
  }

  /* 各カード設定 */
  .video-list-doujin .entry-card {
    flex: 0 0 calc(33.33% - 4px) !important; /* ← 3カラム固定（幅いっぱい） */
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #fff !important;
    display: block !important;
    vertical-align: top !important;
  }

  /* サムネイル枠 */
  .video-list-doujin .entry-card .entry-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;          /* ← 同人誌は横長なので比率を調整 */
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  /* サムネイル画像（最大化） */
  .video-list-doujin .entry-card .entry-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;            /* ← はみ出さずに最大表示 */
    border-radius: 0 !important;
    display: block !important;
    background-color: #fff !important;
    transition: transform 0.25s ease;
    transform: scale(1.03);                  /* ← わずかに拡大して枠いっぱいに */
  }

  /* タイトル（3行まで＋省略処理＋余白調整） */
  .video-list-doujin .entry-title {
    font-size: 0.85em !important;            /* ← スマホでは少し小さめ */
    line-height: 1.4em !important;
    margin-top: 3px !important;              /* ← サムネイルとの余白を詰める */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;        /* ← 3行まで表示 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;      /* ← 省略記号「…」を追加 */
    min-height: 7em !important;            /* ← 3行分確保 */
    max-height: 7em !important;
    text-align: left !important;
    word-break: break-word !important;
  }
}
/* ==============================================================================================================
【スマホ】同人誌エリア　3カラム構成・サムネイル最大化・タイトル整列（3行制限＋省略処理）ここまで
=============================================================================================================== */






/* ==============================================================================================================
【PC】同人誌エリア　エントリーカードとサムネイルサイズの定義 ：横長4:3で大きめ、カードからはみ出さずに拡大表示
 ============================================================================================================== */

/* カード本体 */
.video-list-doujin .entry-card {
  overflow: hidden !important;           /* ← はみ出し防止 */
  border-radius: 6px !important;
  background: #fff;
  transition: transform 0.2s ease;
}

/* サムネイル画像 */
.video-list-doujin .entry-card .entry-thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;        /* 横長比率を固定 */
  object-fit: cover !important;
  border-radius: 0 !important;           /* カードと統一 */
  display: block !important;
  transition: transform 0.25s ease;
}

/* ホバー時の演出（枠内で拡大） */
.video-list-doujin .entry-card:hover .entry-thumb img {
  transform: scale(1.08);                /* ← 拡大しても枠内でカットされる */
  transform-origin: center center;
}


/* =============================================================================================================== 
【PC】同人誌エリア　エントリーカードとサムネイルサイズの定義） ：横長4:3で大きめ、カードからはみ出さずに拡大表示ここまで
  ============================================================================================================  */


/* ========================================================================================================
【スマホ】同人誌エリア　タイトル3行制限以降は…で処理　タイトルの幅を調節
  ========================================================================================================*/

/* 同人誌エリア：タイトルを3行まで表示し、省略記号で統一 */
.video-list-doujin .entry-title {
  display: -webkit-box !important;      /* Flexのように扱う */
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;     /* ← 3行でカット（ここを変更すると行数を調整可） */
  overflow: hidden !important;          /* それ以上は非表示 */
  text-overflow: ellipsis !important;   /* 省略記号を追加 */
  line-height: 1.4em !important;
  min-height: 7em !important;         /* ← スマホタイトルの高さ上限調整 */
  max-height: 7em !important;         /* ← スマホタイトルの高さ下限調整 */
  text-align: left !important;
  word-break: break-word !important;    /* 長い英単語などでも折り返し */
}

/* ========================================================================================================
【スマホ】同人誌エリア　タイトル3行制限以降は…で処理　タイトルの幅を調節　　　　　　　　　ここまで
  ========================================================================================================*/







/* =====================================================================
【最終上書き】同人誌タイトルを2行まで表示して以降…で省略
（どのバージョンのstyle.cssにも勝つ）
===================================================================== */
.video-list-doujin .entry-card .entry-title,
.video-list-doujin .entry-title,
.video-list-doujin .entry-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;  /* ★ 2行で省略 ★ */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4em !important;
  min-height: 2.8em !important; /* 1.4em × 2行 */
  max-height: 2.8em !important; /* 1.4em × 2行 */
  font-size: 0.85em !important; /* アダルト漫画と統一 */
  text-align: left !important;  /* 左寄せに統一 */
}
/* =====================================================================
【最終上書き】同人誌タイトルを2行まで表示して以降…で省略　ここまで
===================================================================== */







/* ================================================================================================
【スマホ限定】履歴ページのお気に入りボタン、削除ともに同じ高さ位置に配置する
=================================================================================================== */

@media screen and (max-width: 768px) {
  .thumb-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 230px; /* ← ★★★この数値を調整するとお気に入りボタン＋ 削除がサムネイルに近づく★★★ */
    margin-bottom: 12px;
  }

  .thumb-item img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
    margin-bottom: 6px;
  }

  /* ボタン位置：固定のまま、上方向に寄せる */
  .add-to-fav,
  .remove-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
  }

  /* 黄色ボタン（上方向へ5〜10px詰める） */
  .add-to-fav {
    bottom: 28px; /* ← 40px → 28pxに変更 */
    background: #ffcc00;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
  }

  /* 削除ボタン（それに合わせて上へ） */
  .remove-btn {
    bottom: 1px; /* ★★★この数値を大きくするとお気に入りボタンに近づく、1に行く程、距離ができる★★★ */
    background: none;
    color: #0056b3;
  }
}


/* ================================================================================================
【スマホ限定】履歴ページのお気に入りボタン、削除ともに同じ高さ位置に配置する　　　　　ここまで
=================================================================================================== */










/* ====================================================================================================
スマホ【アダルト漫画エリア】　gap:1px＋カード＆サムネイル拡大バージョン　　　　　　　　　【※最新版】　　
======================================================================================================= */
@media screen and (max-width: 768px) {

  /* ===============================
     グリッド全体（3カラム固定）
  =============================== */
  .video-list-manga {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 1px !important;               /* ← ごく薄い隙間で密着感UP */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===============================
     各エントリーカード
  =============================== */
  .video-list-manga .entry-card {
    flex: 0 0 calc(33.34% - 1px) !important;  /* ← gap分を引いて3カラムを維持しつつ拡大 */
    max-width: calc(33.34% - 1px) !important;
    min-width: unset !important;              /* ← Cocoonのmin-width制限を解除 */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e3e3e3 !important;
    background: #fff !important;
    overflow: hidden !important;
    border-radius: 4px !important;            /* ← 柔らかい印象を残す */
    transition: transform 0.25s ease;
  }

  /* ===============================
     サムネイルコンテナ
  =============================== */
  .video-list-manga .entry-thumb {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* ===============================
     サムネイル画像（拡大＋密着表示）
  =============================== */
  .video-list-manga .entry-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* ← contain→cover に変更で上下左右の余白を除去 */
    display: block !important;
    border: none !important;
    border-radius: 0 !important;        /* ← 角丸削除でフチまで密着 */
    margin: 0 !important;
    padding: 0 !important;
    transform: scale(1.04);             /* ← 通常時でもわずかに拡大 */
    transition: transform 0.25s ease;
  }

  /* ===============================
     hover時（タップ時）のズーム効果
  =============================== */
  .video-list-manga .entry-thumb:hover img {
    transform: scale(1.07);
  }
}
/* ====================================================================================================
スマホ【アダルト漫画エリア】スマホ　gap:1px＋カード＆サムネイル拡大バージョン　　　【※最新版】　　ここまで
======================================================================================================= */











/* ================================================================================================
スマホ【同人誌エリア】スマホ　gap:1px＋カード＆サムネイル拡大バージョン　　　　　　　　　　【※最新版】　　
=================================================================================================== */
@media screen and (max-width: 768px) {

  /* グリッド全体 */
  .video-list-doujin {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 1px !important;          /* ← わずかな隙間に変更 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 各カード：gapが狭くなった分、幅を少し拡大（3カラム維持） */
  .video-list-doujin .entry-card {
    flex: 0 0 calc(33.34% - 1px) !important; /* ← ほんのわずか拡大 */
    max-width: calc(33.34% - 1px) !important;
    min-width: unset !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e3e3e3 !important;
    background: #fff !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    transition: transform 0.25s ease;
  }

  /* サムネイルブロック */
  .video-list-doujin .entry-thumb {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* サムネイル画像 */
  .video-list-doujin .entry-thumb img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* ← 同人誌に合わせた比率を維持 */
    object-fit: cover !important;    /* ← 上左右ピッタリ */
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: scale(1.04);          /* ← 1.03 → 1.04で拡大感アップ */
    transition: transform 0.25s ease;
  }

  /* hover時（タップ時）軽いズーム */
  .video-list-doujin .entry-thumb:hover img {
    transform: scale(1.07);
  }
}


/* =======================================================================================================
スマホ【同人誌エリア】スマホ　gap:1px＋カード＆サムネイル拡大バージョン　　　　　　　　【※最新版】　　ここまで
========================================================================================================== */






/* =================================================================================================
【PC,スマホ共通】履歴ページ（/history/）」と、作品詳細ページ下部にある “最近チェックした作品” 両方に適用するコード　　　　　　　　　　　　【作品詳細ページ下部にある “最近チェックした作品】にも適用される】
================================================================================================= */

.thumb-inner {
  position: relative;          /* 画像を基準にボタンを絶対配置できるようにする */
  display: inline-block;
  width: 100%;
}

.thumb-inner img {
  display: block;              /* 画像下に不要な隙間をなくす */
  width: 100%;                 /* 画像を横幅いっぱいに広げる（レスポンシブ対応） */
  height: auto;                /* 縦横比維持 */
}

/* ------------------------------------------------------------
   削除ボタンを画像のすぐ下・中央に固定配置（共通設定）
------------------------------------------------------------ */
.thumb-inner .remove-btn {
  position: absolute;          /* 画像の下端を基準に配置 */
  top: 100%;                   /* 画像の下位置に配置（重ならない） */
  left: 50%;                   /* 横方向中央寄せ */
  transform: translate(-50%, 5px); /* 少し下へ間隔をとる */
  font-size: 13px;
  background: none;
  border: none;
  text-decoration: underline;
  color: #0073e6;
  cursor: pointer;
}


/* ===========================================================================================================
【PC,スマホ共通】履歴ページ（/history/）」と、作品詳細ページ下部にある “最近チェックした作品”の両方に適用されるコード　　　　　　　【作品詳細ページ下部にある “最近チェックした作品】にも適用される】　　　　　　　ここまで　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
=============================================================================================================== */






/* ======================================================================================================　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【スマホのみ】ヘッダー右上のお気に入りページ（/collection/）」 にあるサムネイルと削除ボタンの位置をスマホ専用で調整しているコード　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
========================================================================================================== */

@media screen and (max-width: 768px) {

  /* サムネイルの下余白をなくす */
  body.page-id-4767 .thumb-item img {
    display: block;
    margin-bottom: 0 !important;
  }

  /* 削除ボタンを中央寄せ＆サムネ直下に配置 */
  body.page-id-4767 .thumb-item .remove-btn {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important; /* ← Xで中央揃え、Yで下方向に4pxずらす */
    display: inline-block !important;
    font-size: 13px !important;
    color: #0073e6 !important;
    background: none !important;
    border: none !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* サムネ全体の整列補正 */
  body.page-id-4767 .thumb-item {
    text-align: center !important;
    display: block !important;
    margin-bottom: 8px !important;
  }
}

/* ======================================================================================================　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【スマホのみ】ヘッダー右上ののお気に入りページ（/collection/）」 にあるサムネイルと削除ボタンの位置をスマホ専用で調整しているコード　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ここまで　　　
========================================================================================================== */







/* ==========================================================================================================
 【アダルト漫画】エントリーカード内　星マーク   星評価（Font Awesome）＋数値表示（タイトル下配置・作者連動）
============================================================================================================= */

/* タイトルの下に作者を密着配置 */
.entry-title {
  margin-bottom: 4px !important;  /* タイトルと作者の距離を調整 */
  text-align: center;             /* 中央寄せの場合 */
}

/* 星評価全体の基本レイアウト */
.entry-rating {
  display: flex;
  justify-content: center;        /* 作者に合わせて中央寄せ */
  align-items: center;
  gap: 4px;                       /* 星と数値の間隔 */
  margin-top: 4px !important;     /* 作者との距離（ここを調整してもOK） */
  margin-bottom: 6px;             /* 下方向の余白 */
  font-size: 0.95em;              /* 星全体のサイズ（調整可） */
  line-height: 1.2;
}

/* 星アイコン（ゴールド） */
.entry-rating .stars i {
  color: #ffb400;                 /* メインの星色（ゴールド） */
  font-size: 0.9em;               /* 各星のサイズ（微調整用） */
}

/* 空の星（グレー） */
.entry-rating .fa-star.fa-regular {
  color: #ccc;
}

/* 半分の星（少し明るめの金色） */
.entry-rating .fa-star-half-stroke {
  color: #ffcc33;
}

/* 評価数値（例：4.5） */
.entry-rating .rating-number {
  font-size: 0.9em;
  color: #777;
  margin-left: 2px;
}



/* ==========================================================================================================
 【アダルト漫画】エントリーカード内　星マーク   星評価（Font Awesome）＋数値表示（タイトル下配置・作者連動）
============================================================================================================= */





/* ===============================================================
  スマホ 【アダルト漫画】エントリーカード内　星マーク 
=============================================================== */
@media screen and (max-width: 768px) {
  .entry-rating {
    font-size: 0.9em;          /* スマホでは星をやや小さく */
    margin-top: 1px !important;
    margin-bottom: 4px;
  }

  .entry-rating .rating-number {
    font-size: 0.85em;
  }
}







/* ==============================================================================================
 【アダルト漫画】エントリーカード内   作者名（2行で省略表示）（タイトル直下に配置）PC + スマホ最適化
============================================================================================== */

.entry-author {
  font-size: 0.8em;
  color: #555;
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.25;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; /* ★ 2行で省略 ★ */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-height: 2.6em !important; /* 1.3em × 2行分 */
}




/* スマホ最適化（作者の文字少し小さめ＆行間を詰める） */
@media screen and (max-width: 768px) {
  .entry-author {
    font-size: 0.75em;
    line-height: 1.2;
    max-height: 2.4em; /* 1.2em × 2行 */
    margin-top: -2px;
    margin-bottom: 3px;
  }
}


/* ============================================================================================================
 【アダルト漫画】エントリーカード内   作者名（2行で省略表示）（タイトル直下に配置）PC + スマホ最適化　　ここまで
============================================================================================================== */










/* ===========================================================================================
   【同人誌】エントリーカード内タイトル2行、省略あり（アダルト漫画と統一）
=========================================================================================== */
.video-list-doujin .entry-card .entry-title,
.video-list-doujin .entry-title,
.video-list-doujin .entry-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; /* ★ 2行に統一 ★ */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4em !important;
  min-height: 2.8em !important; /* 1.4em × 2行 */
  max-height: 2.8em !important;
  font-size: 0.85em !important; /* 漫画と統一 */
  text-align: left !important;
}

/* ===========================================================================================
   【同人誌】エントリーカード内タイトル2行、省略あり（アダルト漫画と統一）
=========================================================================================== */



/* ==============================================================================================
   【同人誌】エントリーカード内作者名（1行表示で省略）※漫画と完全一致
============================================================================================== */
.video-list-doujin .entry-author {
  font-size: 0.8em;
  color: #555;
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.25;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important; /* ★ 1行で省略 ★ */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-height: 1.3em !important; /* 1行分の高さ */
}

/* ==============================================================================================
 【同人誌】エントリーカード内作者名（1行表示で省略）※漫画と完全一致
============================================================================================== */





/* ===========================================================================================================
【同人誌】エントリーカード内星 評価（Font Awesome）＋数値表示        ※ アダルト漫画と全く同じ見た目に
============================================================================================================= */
.video-list-doujin .entry-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 2px !important;
  margin-bottom: 6px;
  font-size: 0.95em;
  line-height: 1.2;
}

.video-list-doujin .entry-rating .stars i {
  color: #ffb400;
  font-size: 0.9em;
}

.video-list-doujin .entry-rating .fa-star.fa-regular {
  color: #ccc;
}

.video-list-doujin .entry-rating .fa-star-half-stroke {
  color: #ffcc33;
}

.video-list-doujin .entry-rating .rating-number {
  font-size: 0.9em;
  color: #777;
  margin-left: 4px;
}


/* ==========================================================================================================
【同人誌】エントリーカード内星 評価（Font Awesome）＋数値表示   ※ アダルト漫画と全く同じ見た目に    　ここまで
============================================================================================================= */


/* ==========================================================
【同人誌】エントリーカード内 スマホ時の微調整
========================================================== */
@media screen and (max-width: 768px) {
  .video-list-doujin .entry-rating {
    font-size: 0.9em;
    margin-top: 1px !important;
    margin-bottom: 4px;
  }

  .video-list-doujin .entry-rating .rating-number {
    font-size: 0.85em;
  }

  .video-list-doujin .entry-author {
    font-size: 0.75em;
    line-height: 1.2;
    max-height: 1.2em;
    margin-top: -2px;
    margin-bottom: 3px;
  }
}


/* ==========================================================
【同人誌】エントリーカード内 スマホ時の微調整　　　ここまで
========================================================== */







/* ==========================================================
   【星マークhover時】やわらかく光るアニメーション
   （FANZA公式風・派手すぎず高級感のある輝き）
========================================================== */
.entry-rating .stars i {
  color: #ffb400;                      /* 通常の星色 */
  transition: color 0.3s ease, filter 0.3s ease;
}

/* hover時：ほんのり明るく、ゴールドが発光 */
.entry-rating .stars i:hover {
  color: #ffd700;                      /* やや明るい金色 */
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
  transform: scale(1.05);              /* 軽く拡大して“浮く”効果 */
}

/* 評価数値はhover時も変化させない（安定感を保つ） */
.entry-rating .rating-number {
  color: #777;
  transition: none;
}

/* ==========================================================
   【スマホ時】hoverが無効な環境でも発光効果を抑制
========================================================== */
@media (hover: none) {
  .entry-rating .stars i:hover {
    filter: none;
    transform: none;
  }
}




/* ==========================================================
   【星4.5以上】常時うっすら発光（高評価強調）
   ※ data-rating 属性または rating-number の数値を利用
========================================================== */

/* 星評価の基本（既存設定と共存OK） */
.entry-rating .stars i {
  color: #ffb400;
  transition: color 0.3s ease, filter 0.4s ease;
}









/* ------------------------------------------
   ★ 常時発光ルール（高評価限定）
   4.5以上の作品にクラス付与される想定：
   <div class="entry-rating high-rating"> … </div>
------------------------------------------- */
.entry-rating.high-rating .stars i {
  color: #ffd700; /* より明るい金色 */
  filter: drop-shadow(0 0 4px rgba(255, 220, 80, 0.65));
  animation: starGlow 3s ease-in-out infinite alternate;
}

/* 柔らかく呼吸するような光のゆらぎ */
@keyframes starGlow {
  0%   { filter: drop-shadow(0 0 2px rgba(255, 220, 80, 0.4)); }
  50%  { filter: drop-shadow(0 0 6px rgba(255, 230, 100, 0.9)); }
  100% { filter: drop-shadow(0 0 2px rgba(255, 220, 80, 0.4)); }
}

/* ------------------------------------------
   通常hover時（低評価・標準評価含む）
------------------------------------------- */
.entry-rating .stars i:hover {
  color: #ffd700;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
  transform: scale(1.05);
}

/* スマホではhover効果を無効化（安全） */
@media (hover: none) {
  .entry-rating .stars i:hover {
    filter: none;
    transform: none;
  }
}









/* ======================================
   アダルト漫画高評価一覧ページ専用
   ====================================== */
.adult-manga-rating .entry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

.adult-manga-rating .entry-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

.adult-manga-rating .entry-title,
.adult-manga-rating .entry-performer {
  font-size: 0.9em;
  text-align: center;
  margin-top: 5px;
}

.adult-manga-rating .entry-rating {
  text-align: center;
  margin-top: 3px;
  font-size: 0.85em;
}

@media screen and (max-width: 768px) {
  .adult-manga-rating-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
  }
  .adult-manga-rating .entry-title {
    font-size: 0.85em;
  }
}









/*=========================================================================================
 高評価ページ　見出し⁺サブテキストアダルト漫画、同人は共通クラスを使用の為、共通
===========================================================================================*/


.rating-page-container {
  text-align: center;
  margin: 20px 0 16px;
}

.rating-page-title {
  font-size: 22px;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  margin-bottom: 6px;
}

.rating-page-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 auto 10px;
  max-width: 700px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .rating-page-container {
    margin: 14px 0 10px;
  }

  .rating-page-title {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .rating-page-desc {
    font-size: 13px;
    line-height: 1.5;
    padding: 0 10px;
  }
}



/*================================================================================================
 高評価ページ　見出し⁺サブテキストアダルト漫画、同人は共通クラスを使用の為、共通　　　ここまで
==================================================================================================*/









/*=====================================================================================
　　　　 高評価ページ【見出しサブテキスト】星3～5
======================================================================================*/
.rating-page-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 auto 10px;
  text-align: center;
  white-space: nowrap; /* ← PCで改行を防ぐ */
}

/* 星アイコン */
.rating-page-desc i.fas.fa-star {
  color: #FFA500;
  font-size: 0.95em;
  margin: 0 1px;
  vertical-align: middle;
  text-shadow: 0 0 1px rgba(0,0,0,0.2);
}

/* スマホ対応（折り返しOKにする） */
@media screen and (max-width: 768px) {
  .rating-page-desc {
    font-size: 13px;
    line-height: 1.5;
    padding: 0 10px;
    white-space: normal; /* ← スマホでは改行許可 */
  }

  .rating-page-desc i.fas.fa-star {
    font-size: 0.85em;
    margin: 0 0.5px;
  }
}


/*=====================================================================================
　　　　 高評価ページ【見出しサブテキスト】星3～5　　　　　　　　　　　ここまで
======================================================================================*/





/*============================================================================================================
　※当サイトで紹介している漫画・同人作品は、すべて 【高解像度・完全版】 の公式配信です。スマホレイアウト崩さずPCもレイアウト整える
=============================================================================================================*/

.page .quality-note {
  text-align: center;
  color: #333;
  line-height: 1.
 font-size: 16px;
  margin: 18px auto;
  max-width: 760px;
}

.page .quality-note .highlight {
  background: #fff7c2;
  padding: 0 4px;
  border-radius: 3px;
}

.page .quality-note .asterisk {
  color: #c00;
  font-weight: bold;
}

/* スマホ調整（768px以下） */
@media screen and (max-width: 768px) {
  .page .quality-note {
    font-size: 14px;
    line-height: 1.7;
    padding: 0 12px;
  }
}


/*============================================================================================================
　※当サイトで紹介している漫画・同人作品は、すべて 【高解像度・完全版】 の公式配信です。スマホレイアウト崩さずPCもレイアウト整える　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ここまで
=============================================================================================================*/







/* =============================================================================================
   ナビメニュー星アイコン装飾（PC,スマホ共通）
   2025-10-25
============================================================================================== */

.rating-stars {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  position: relative;
  top: -1px;
}

.rating-stars .fa-star {
  color: #ffb400;
  font-size: 0.7em;       /* 小型でナビに収まるサイズ */
  margin: 0 -0.8px;       /* ← ★のSVGを意図的に重ねて密着 */
  vertical-align: middle;
  transform: scale(1.02); /* 微調整でバランスを均一化 */
  transition: color 0.3s ease;
}

/* hover時（PC） */
li:hover .rating-stars .fa-star {
  color: #ffd65c;
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
  .rating-stars {
    top: -1px;
  }
  .rating-stars .fa-star {
    font-size: 0.8em;
    margin: 0 -1.2px;     /* スマホでは少し余裕を残す */
  }
}

/* =============================================================================================
   ナビメニュー星アイコン装飾（PC,スマホ共通）
   2025-10-25
============================================================================================== */




@media screen and (max-width: 768px) {
  /* GA4ランキング専用：横4列維持 */
  .acf-and-ga4-wrap .ga4-thumbs-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .acf-and-ga4-wrap .ga4-thumbs-grid .ga4-image-wrapper {
    padding-top: 120% !important;
    overflow: hidden !important;
  }

  .acf-and-ga4-wrap .ga4-thumbs-grid .ga4-image-wrapper img {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}








/* ==========================================================
   同じ作家の作品（related-by-author）
   related-by-genre と完全同一ロジック
   ========================================================== */

/* 親 */
.related-by-author .related-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 !important;
}

/* 箱（幅はここで決まる） */
.related-by-author .related-item {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex: 1 1 160px !important;
  max-width: calc(20% - 10px) !important;
}

/* img は箱に100%追従 */
.related-by-author .related-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* ------------------------------
   漫画（10列・縦長）
-------------------------------- */
.related-by-author.manga .related-item {
  flex: 1 1 110px !important;
  max-width: calc(10% - 10px) !important;
}

.related-by-author.manga .related-item img {
  aspect-ratio: 3 / 4.5 !important;
  object-position: center top !important;
}

/* ------------------------------
   同人（5列・横広）
-------------------------------- */
.related-by-author.doujin .related-item {
  flex: 1 1 calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
}

.related-by-author.doujin .related-item img {
  aspect-ratio: 4 / 3 !important;
  object-position: center center !important;
}






/* ==========================================================
   スマホ表示（〜768px）：列数と比率を最適化
   ========================================================== */
@media screen and (max-width: 768px) {

  /* スマホではアダルト漫画：3列 */
  .related-by-author.manga .related-thumbs .related-item {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }
  .related-by-author.manga .related-item img {
    aspect-ratio: 3 / 4.5 !important;
  }

  /* スマホでは同人作品：2列（横広なので少なめ） */
  .related-by-author.doujin .related-thumbs .related-item {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  .related-by-author.doujin .related-item img {
    aspect-ratio: 4 / 3 !important;
  }

  .related-thumbs {
    gap: 6px !important;
  }
}



/* ================================================================================================
   ※※※　この作家の他の作品　領域（flex横並び・比率別対応・完全版）　※※※
   ================================================================================================*/




/* ==============================================================================================
   この作家の他の作品：見出し最適化（px指定・左寄せ）
   ============================================================================================== */
.related-title {
  font-size: 20px !important;   /* PCでの最適サイズ */
  font-weight: 600 !important;
  color: #333 !important;
  text-align: left !important;  /* 左寄せ固定 */
  margin: 5px 0 5px 0 !important;
  line-height: 1.4 !important;
	
	/*下線スタイルを追加*/
  border-bottom: 1px solid #ccc !important;
  padding-bottom: 6px !important;   /* 下線との間に少し余白 */
	
}



/* ==========================================================
   この作家の他の作品　見出し：スマホ最適化   【この作家の他の作品】
   ========================================================== */
@media screen and (max-width: 768px) {
  .related-by-author .related-author-section h2.related-title {
    font-size: 18px !important;           /* スマホで視認性の良いサイズ */
    font-weight: 600 !important;          /* 適度な太さ（強調しすぎない） */
    color: #333 !important;               /* 視認性の高い中間トーン */
    text-align: left !important;          /* 左寄せを完全固定 */
    line-height: 1.4 !important;          /* 行間をやや広めに */
    letter-spacing: 0.5px !important;     /* 少しだけ字間を開けて読みやすく */
    display: flex !important;                /* ← 横並びに修正 */
    justify-content: space-between !important; /* ← 修正ポイント */
	  
	  
    /* 余白を方向ごとに指定（視覚的バランス最適） */
    margin-top: 0px !important;           /* 見出し直前との間 */
    margin-right: 0 !important;
    margin-bottom: 2px !important;       /* 下に少し余白 */
    margin-left: 0 !important;
  }
}



/* ==========================================================
   この作家の他の作品：スマホ最適化       【この作家の他の作品】
   ========================================================== */
@media screen and (max-width: 768px) {
  .related-by-author .related-author-section h2.related-title {
    font-size: 15px !important;           /* スマホで視認性の良いサイズ */
    font-weight: 600 !important;          /* 適度な太さ（強調しすぎない） */
    color: #333 !important;               /* 視認性の高い中間トーン */
    text-align: left !important;          /* 左寄せを完全固定 */
    line-height: 1.4 !important;          /* 行間をやや広めに */
    letter-spacing: 0.5px !important;     /* 少しだけ字間を開けて読みやすく */
    display: flex !important;                /* ← 横並びに修正 */
    justify-content: space-between !important; /* ← 修正ポイント */

    /* 余白を方向ごとに指定（視覚的バランス最適） */
    margin-top: 6px !important;           /* 見出し直前との間 */
    margin-right: 0 !important;
    margin-bottom: 10px !important;       /* 下に少し余白 */
    margin-left: 0 !important;
  }
}


/* ==============================================================================================
   この作家の他の作品：見出し最適化（px指定・左寄せ）
   ============================================================================================== */








/* ========================================================================================================
 ※※※　この作家の他の作品　領域（flex横並び・比率別対応・完全版） ※※※　
【この作家の全作品を見る>>】のテキストリンクがスマホでどうしても右端に寄らなかったのでやっとで効いた苦労したコード
   ========================================================================================================*/

h2.related-title a.view-all-link[href*="/author/"] {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  text-align: right !important;
}

/* 親要素を基準にするため relative 付与 */
.related-by-author h2.related-title {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding-right: 10px !important; /* 端ギリ防止 */
}



/* ========================================================================================================
 ※※※　この作家の他の作品　領域（flex横並び・比率別対応・完全版） ※※※　
【この作家の全作品を見る>>】のテキストリンクがスマホでどうしても右端に寄らなかったのでやっとで効いた苦労したコード
   ========================================================================================================*/











/* ===========================================================================================================
   【全体構造】この作品の類似人気作品（.related-by-genre）　　　　　ACFのジャンル⁺GA4クリックで精度上げる表示
  　アダルト漫画（縦長）／同人作品（横広）の両方を自動レイアウト対応
  ============================================================================================================ */






/* ------------------------------------------------------------
   ① 親コンテナ設定：flex横並び配置
   ------------------------------------------------------------ */
.related-by-genre .related-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 10px 0 !important;
  box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   ② 各アイテム共通設定
   ------------------------------------------------------------ */
.related-by-genre .related-item {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex: 1 1 160px;              /* ← 最小幅だけ指定 */
  max-width: calc(20% - 10px);  /* ← 上限だけ軽く制御（任意） */
}


/* ------------------------------------------------------------
   ③ サムネイル画像共通設定
   ------------------------------------------------------------ */
.related-by-genre .related-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}



/* ================================================================================================
   【PC表示】アダルト漫画／同人作品で列数・比率を出し分け
   ================================================================================================ */

/* ------------------------------------------------------------
   ④ アダルト漫画（.manga）10列
   ------------------------------------------------------------ */
.related-by-genre.manga .related-thumbs .related-item {
  flex: 1 1 110px !important;
  max-width: calc(10% - 10px) !important;
}

.related-by-genre.manga .related-item img {
  aspect-ratio: 3 / 4.5 !important;
  object-position: center top !important;
}


/* ------------------------------------------------------------
   ⑤ 同人作品（.doujin）5列・横広（4:3）
   ------------------------------------------------------------ */
.related-by-genre.doujin .related-thumbs .related-item {
  flex: 1 1 calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
}
.related-by-genre.doujin .related-item img {
  aspect-ratio: 4 / 3 !important;
  object-position: center center !important;
}



/* ================================================================================================
   【スマホ表示（〜768px）】列数・比率・間隔の最適化
   ================================================================================================ */
@media screen and (max-width: 768px) {

  /* ------------------------------------------------------------
     ⑥ アダルト漫画（.manga）3列レイアウト
     ------------------------------------------------------------ */
  .related-by-genre.manga .related-thumbs .related-item {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }
  .related-by-genre.manga .related-item img {
    aspect-ratio: 3 / 4.5 !important;
  }


  /* ------------------------------------------------------------
     ⑦ 同人作品（.doujin）2列レイアウト
     ------------------------------------------------------------ */
  .related-by-genre.doujin .related-thumbs .related-item {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  .related-by-genre.doujin .related-item img {
    aspect-ratio: 4 / 3 !important;
  }


  /* ------------------------------------------------------------
     ⑧ スマホ時の隙間調整
     ------------------------------------------------------------ */
  .related-by-genre .related-thumbs {
    gap: 6px !important;
  }
}



/* ================================================================================================
   【見出しデザイン】（.related-title）
   ================================================================================================ */

/* ------------------------------------------------------------
   ⑨ PC表示時の見出し  　　　　【この作品の類似人気作品】
   ------------------------------------------------------------ */
.related-by-genre .related-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-align: left !important;
  margin: 5px 0 10px 0 !important;
  line-height: 1.4 !important;
}


/* ------------------------------------------------------------
   ⑩ スマホ表示時の見出し  　【この作品の類似人気作品】
  ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .related-by-genre .related-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    justify-content: flex-start !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}



/* ===========================================================================================================
   【全体構造】この作品の類似人気作品（.related-by-genre）　　ACFのジャンル⁺GA4クリックで精度上げる表示
   アダルト漫画（縦長）／同人作品（横広）の両方を自動レイアウト対応　　　　　　　　　　　　　　　　　　ここまで
  ============================================================================================================ */











/* ==================================================================================
   同じ出版社の作品（related-by-publisher）  ※ この作品の類似作品と完全同一
   ================================================================================== */

/* 親 */
.related-by-publisher .related-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 !important;
  box-sizing: border-box !important;
}

/* サイズ固定（類似作品と同値） */
.related-by-publisher .related-item {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;

  width: 110px !important;
  max-width: 110px !important;
  flex: 0 0 110px !important;
}

/* 画像 */
.related-by-publisher .related-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* 漫画：縦長 */
.related-by-publisher.manga .related-item img {
  aspect-ratio: 3 / 4.5 !important;
  object-position: center top !important;
}

/* 同人：横広 */
.related-by-publisher.doujin .related-item img {
  aspect-ratio: 4 / 3 !important;
  object-position: center center !important;
}







/* ================================================================================================
   【スマホ表示（〜768px）】列数・比率・間隔の最適化
   ================================================================================================ */
@media screen and (max-width: 768px) {

  /* ------------------------------------------------------------
     ⑥ アダルト漫画（.manga）3列レイアウト
     ------------------------------------------------------------ */
  .related-by-publisher.manga .related-thumbs .related-item {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }
  .related-by-publisher.manga .related-item img {
    aspect-ratio: 3 / 4.5 !important;
  }


  /* ------------------------------------------------------------
     ⑦ 同人作品（.doujin）2列レイアウト
     ------------------------------------------------------------ */
  .related-by-publisher.doujin .related-thumbs .related-item {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  .related-by-publisher.doujin .related-item img {
    aspect-ratio: 4 / 3 !important;
  }


  /* ------------------------------------------------------------
     ⑧ スマホ時の隙間調整
     ------------------------------------------------------------ */
  .related-by-publisher .related-thumbs {
    gap: 6px !important;
  }
}



/* ================================================================================================
   【見出しデザイン】（.related-title）
   ================================================================================================ */

/* ------------------------------------------------------------
   ⑨ PC表示時の見出し　　　　　　【この出版社の人気ヒット作品】
   ------------------------------------------------------------ */
.related-by-publisher .related-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-align: left !important;
  margin: 5px 0 10px 0 !important;
  line-height: 1.4 !important;
}


/* ------------------------------------------------------------
   ⑩ スマホ表示時の見出し　　　　【この出版社の人気ヒット作品】
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .related-by-publisher .related-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    justify-content: flex-start !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}












/* =====================================================================================================
   作品詳細ページ　｜（縦棒）を上下で完全に揃える：作家　サークル　☆評価 の固定幅化
  ===================================================================================================== */

.wrr-meta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  margin: 8px 0 14px 0;
  line-height: 1.8;
  margin-left: 35px;
}

/* 各行の配置（作家・サークル／評価） */
.wrr-meta-author,
.wrr-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ラベル部分（作家｜／サークル｜／評価｜）の固定幅 */
.wrr-meta-label {
  display: inline-flex;          /* ← inline-blockから変更 */
  align-items: baseline;         /* ｜の高さを文字に合わせる */
  justify-content: flex-end;     /* ｜を右端に固定して揃える */
  width: 62px;
  min-width: 62px;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  padding-right: 4px;            /* ← ★ この余白で「｜」右側の距離を統一 ★ */
}

/* ハイライト名（作家・サークル名） */
.wrr-meta-author .highlight {
  display: inline-block;
  vertical-align: middle;
  color: #333 !important;
  font-weight: 600;
  background: #fff8e1;
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 14px;  /* ★ここを追加（例：14px） */
}

/* 星評価本体 */
.wrr-rating i {
  color: #f5c518;
  margin-right: 1px;
}

/* 評価数値（括弧付き） */
.wrr-rating .rating-number {
  font-size: 14px;
  color: #666;
  margin-left: 2px;
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
  .wrr-meta-block {
    margin-left: 8px;
    line-height: 1.6;
	margin-left: 35px;  
  }
  .wrr-meta-label {
    width: 60px;
    padding-right: 3px; /* スマホでは少し詰める */
  }
  .wrr-meta-author .highlight {
    font-size: 14px;  /* スマホではさらに少し小さく */
  }
	
}

/* =====================================================================================================
  作品詳細ページ　｜（縦棒）を上下で完全に揃える：作家　サークル　☆評価 の固定幅化　　　　ここまで
  ===================================================================================================== */




/* ==================================================================
  作品詳細ページの 複数作家・サークル名を折りたたみ（…で省略）
  ==================================================================== */

.wrr-meta-author .highlight {
  display: inline-block;
  max-width: 220px;         /* ✅ PC時の幅制限（お好みで） */
  white-space: nowrap;      /* 折り返さず1行で表示 */
  overflow: hidden;         /* 溢れた部分を非表示 */
  text-overflow: ellipsis;  /* 溢れた部分を「…」で表現 */
}

/* スマホ時は幅を調整（より短く） */
@media screen and (max-width: 768px) {
  .wrr-meta-author .highlight {
    max-width: 160px;      /* ✅ スマホでの省略幅 */
  }
}


/* ==================================================================
  作品詳細ページの 複数作家・サークル名を折りたたみ（…で省略）
  ==================================================================== */






/* ============================================================================================================
   作品タイトル H1 下にパステルグラデーションラインを表示 　【横幅100%バージョン】
   ============================================================================================================ */
.wrr-title-gradient {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  margin: 0px 0 6px 0;
  background: linear-gradient(
    90deg,
    #f9c5d1 0%,   /* ピンク */
    #fad0c4 15%,  /* オレンジ系 */
    #f1f0b6 30%,  /* イエロー */
    #b8f2e6 50%,  /* ミントグリーン */
    #b4d4fa 70%,  /* パステルブルー */
    #d8c5f1 85%,  /* パープル */
    #f9c5d1 100%  /* ピンクに戻る */
  );
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .wrr-title-gradient {
    height: 6px;
    margin: 2px 0 2px 0;
    border-radius: 4px;
  }
}


/* ============================================================================================================
   作品タイトル H1 下にパステルグラデーションラインを表示　　　　　　【横幅100%バージョン】　　　　ここまで　　
  ============================================================================================================ */






/* ============================================================================================================
   作品詳細ページのCVボタン領域専用　のパステルグラデーションライン　【作品詳細CV領域専用　横幅90％】
   ============================================================================================================ */

.wrr-border-cv-gradient {
  width: 90%;
  height: 8px;
  border-radius: 6px;
  /* marginの左右をautoに変更して中央配置 */
  margin: 6px auto 6px auto;
  background: linear-gradient(
    90deg,
    #f9c5d1 0%,   /* ピンク */
    #fad0c4 15%,  /* オレンジ系 */
    #f1f0b6 30%,  /* イエロー */
    #b8f2e6 50%,  /* ミントグリーン */
    #b4d4fa 70%,  /* パステルブルー */
    #d8c5f1 85%,  /* パープル */
    #f9c5d1 100%  /* ピンクに戻る */
  );
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .wrr-border-cv-gradient {
    height: 6px;
    margin: 4px auto 4px auto; /* スマホでも中央寄せ */
    border-radius: 4px;
  }
}


/* ============================================================================================================
   作品詳細ページのCVボタン領域専用のパステルグラデーションライン　【作品詳細CV領域専用　横幅90％】　　ここまで　　　　　
   ============================================================================================================ */






/* ============================================================================================================
  カテゴリー代用ページのタイトル下ショートverのパステルグラデーションラインを表示 　【横幅50%ショートver】
   ============================================================================================================ */

/* グラデーションライン（ショートver） */
.wrr-short-gradient {
  width: 50%;
  height: 8px;
  border-radius: 6px;
  display: block;
  margin: 4px auto 4px; /* ← 上4px（タイトルとの間）／下10px（下余白） */
  background: linear-gradient(
    90deg,
    #f9c5d1 0%,
    #fad0c4 15%,
    #f1f0b6 30%,
    #b8f2e6 50%,
    #b4d4fa 70%,
    #d8c5f1 85%,
    #f9c5d1 100%
  );
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* タイトル（見出し）直下の余白を詰める */
.gradation-section h2,
.related-author-section h2,
.related-by-genre h2,
.related-by-publisher h2 {
  margin-bottom: 4px !important; /* ← ここが最重要。Cocoonデフォルトの20pxを上書き */
}





@media screen and (max-width: 768px) {
  /* 🌈 グラデーションライン（ショートver）スマホ調整 */
  .wrr-short-gradient {
    width: 70%;               /* ← スマホではやや長めにして中央で見栄え良く */
    height: 5px;              /* ← 細くして繊細に */
    border-radius: 4px;       /* ← 丸みも少し控えめに */
    margin: 3px auto 8px;     /* ← タイトルとの距離を詰め、下に少し余白 */
    display: block;
    background: linear-gradient(
      90deg,
      #f9c5d1 0%,
      #fad0c4 15%,
      #f1f0b6 30%,
      #b8f2e6 50%,
      #b4d4fa 70%,
      #d8c5f1 85%,
      #f9c5d1 100%
    );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ← スマホでは影を少し控えめに */
  }

  /* 📏 スマホ時の見出し余白リセット（上書き） */
  .gradation-section h2,
  .related-author-section h2,
  .related-by-genre h2,
  .related-by-publisher h2 {
    margin-bottom: 3px !important; /* ← タイトルとラインをより密接に */
    font-size: 18px !important;     /* ← 文字サイズをやや小さく（全体の調和） */
  }
}





/* ============================================================================================================
  カテゴリー代用ページのタイトル下ショートverのパステルグラデーションラインを表示 【横幅50%ショートver】 ここまで
  ============================================================================================================ */






/* ===================================================================================================
   作品詳細ページ   全ページ数　表示領域のフォントサイズ、配置
   =================================================================================================== */



/* PC（デフォルト） */
.cv-page-info {
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: #b46a00; /* 落ち着いたゴールド */
  margin: 12px 0 16px 0; /* 上下の距離をバランス調整 */
}

.cv-page-info span {
  display: inline-block;
  background: rgba(255, 245, 225, 0.85); /* 淡いベージュ */
  padding: 6px 18px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* スマホ最適化（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .cv-page-info {
    margin: 10px 0 12px 0; /* 上下の余白をやや詰める */
    font-size: 15px;
  }

  .cv-page-info span {
    padding: 5px 14px; /* スマホで少しコンパクトに */
    border-radius: 6px;
  }
}

/* ===================================================================================================
   作品詳細ページ   全ページ数　表示領域のフォントサイズ、配置　　　　　　　　　　　　ここまで
   =================================================================================================== */






	
/* =========================================================================
▼ 全編を読む ▼ グラデーション枠（淡いパステルトーンVer）
   ========================================================================= */

.cvbutton-gashitu {
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.9)
    ),
    url('https://stat.ameba.jp/user_images/20230930/23/migomigo7/64/76/j/o100010015344921455.jpg') repeat-y center top / 100% auto;
  border: 3px solid #fff;
  border-radius: 12px;
  padding: 25px;
  margin: 20px auto;
  max-width: 860px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background-blend-mode: lighten;
}

/* 内側に白の半透明レイヤーを重ねて、柔らかい効果に */
.cvbutton-gashitu > div {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 20px;
}



/* =========================================================================
▼ 全編を読む ▼ グラデーション枠（淡いパステルトーンVer）
   ========================================================================= */











/* 共通スタイル */
.play-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  fill: currentColor;       /* SVG内で指定されている currentColor に従う */
  transition: color 0.3s ease;
}

/* 各ジャンル別トーン */
.ranking-link.new  { color: #f9c5d1; }   /* ピンク：新着 */
.ranking-link.manga  { color: #b4d4fa; } /* パステルブルー：漫画 */
.ranking-link.doujin { color: #b8f2e6; } /* ミントグリーン：同人 */
.ranking-link.author { color: #d8c5f1; } /* ラベンダー：作家 */

/* hover時：パステルグラデーション風 */
.ranking-link:hover {
  color: #ffcc33;
  transform: translateY(-1px);
}








/* ======================================================
 人形アイコンと作家行全体を少し右へ。2～4pxで微調整
========================================================= */

/*作家行全体を少し右へ。2～4pxで微調整 */
.wrr-meta-author {
  margin-left: 3px;
}

/* ======================================================
 人形アイコンと作家行全体を少し右へ。2～4pxで微調整　ここまで
========================================================= */


/* ==================================================================================================
 同人作品のみ適用　contentphpにて同人サークルに独自クラス付与した 人形とサークルの間隔、作家名を左に寄せる
===================================================================================================== */

.doujin-gap {
  gap: 22px; /* 同人作品だけ間隔を広げる */
}


.doujin-gap .highlight {
	margin-left: -20px;
}


/* ==================================================================================================
 同人作品のみ適用　contentphpにて同人サークルに独自クラス付与した 人形とサークルの間隔、作家名を左に寄せる
===================================================================================================== */





/* ==================================================================================================
　　ナビ項目の中央折り目をつけて立体感を出す　　　【PC,スマホ共通】
===================================================================================================== */
.simple-menu-list li {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,   /* 上のハイライトを少し明るく */
    #f5f5f5 45%,  /* 中間をやや暗めにして立体感 */
    #e5e5e5 50%,  /* 折り目の影を少し強める */
    #f9f9f9 100%  /* 下は軽く戻して柔らかさを残す */
  );
  border-left: 1px solid #ccc !important;
  border-right: none;
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}
	
/* ==================================================================================================
　　ナビ項目の中央折り目をつけて立体感を出す　　　【PC,スマホ共通】
===================================================================================================== */
	





/* ==================================================================================================
　アダルト漫画 同人誌 作品評価の目安　この領域のサブテキスト※以下はFANZAユーザーのレビュー傾向
===================================================================================================== */
	

.quality-subtext {
  text-align: center;
  font-size: 0.9em;
  color: #7a6048; 
  margin: 6px 0 12px;
  padding-bottom: 4px;

  border-bottom: 1.5px solid rgba(160, 130, 90, 0.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  line-height: 1.5;
}


	
/* ==================================================================================================
　アダルト漫画 同人誌 作品評価の目安　この領域のサブテキスト※以下はFANZAユーザーのレビュー傾向
===================================================================================================== */








/* =============================================================================================
   星評価テキスト＋アイコン アダルト漫画、同人誌 作品評価の目安の領域
================================================================================================ */





/* 星評価ブロック全体 */
.hosoku-note .quality-item {
  margin-bottom: 12px;
  border-bottom: 2px solid #ffeb99;
  padding-bottom: 8px;
}

/* 星評価タイトル＋星アイコン（上段）＋説明文（下段） */
.hosoku-note .quality-text {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* 星評価タイトル＋星アイコンを横並びに */
.hosoku-note .quality-text strong,
.hosoku-note .quality-text .quality-icon-img,
.hosoku-note .quality-text .bar {
  display: inline-block;
  vertical-align: middle;
}

/* 星アイコンの調整　　 下のスマホコードbodyが強いのでここあえて指定する　 */
@media only screen and (min-width: 768px) {
  .hosoku-note .quality-text .quality-icon-img {
    width: 100px !important;
    height: auto !important;
    margin: 0 4px;
  }
}

/* 「｜」記号の見た目 */
.hosoku-note .quality-text .bar {
  margin-right: 4px;
  color: #333;
}

/* 説明文（下段）を星評価と揃える */
.hosoku-note .quality-text .desc {
  display: block;        /* 下段へ配置 */
  margin-left: 4.2em;    /* ← ★ここで開始位置を調整 */
  margin-top: 3px;
  line-height: 1.7;
}





/* =============================================================================================
   星評価テキスト＋アイコン アダルト漫画、同人誌 作品評価の目安の領域　　　　　　　　ここまで
================================================================================================ */





/* ==========================================================================================
   スマホ専用　星評価ブロックの配置・整列強制上書き
   CocoonモバイルCSSより強く効く設定
============================================================================================= */

@media only screen and (max-width: 767px) {

  /* 星評価行の基本構造 */
  body .hosoku-note .quality-item .quality-text {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #555 !important;
  }

  /* 星評価タイトル（左） */
  body .hosoku-note .quality-item .quality-text strong {
    display: inline-block !important;
    color: #6a5a20 !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

	
  /* 星アイコン */
  body .hosoku-note .quality-item .quality-text .quality-icon-img {
    display: inline-block !important;
    width: 90px !important;
    height: auto !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -2px !important; /* ← ★ 上方向に2px持ち上げる（調整値） */
  }
	
	

  /* ｜バー */
  body .hosoku-note .quality-item .quality-text .bar {
    display: inline-block !important;
    color: #666 !important;
    margin-right: 3px !important;
  }

  /* 下段説明文 */
  body .hosoku-note .quality-item .quality-text .desc {
    display: block !important;
    margin-left: 4.8em !important; /* ← 星評価＋アイコンの位置に合わせる */
    margin-top: 2px !important;
    line-height: 1.7 !important;
    font-size: 14px !important;
    color: #444 !important;
  }

  /* 下線の余白（スマホ用） */
  body .hosoku-note .quality-item {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }
}


/* ==========================================================================================
   スマホ専用　星評価ブロックの配置・整列強制上書き
   CocoonモバイルCSSより強く効く設定　　　　　　　　　　　　　　　ここまで
============================================================================================= */




/* ===========================================================================================================
タクソノミーページのタイトルcocoon本体の body .entry-title にある !important が強いため上書き　同一セレクタの競合順序が原因でどちらかが効かなくなるため　PC,スマホ両方効くように分けて@media screenで書いている
============================================================================================================== */


 /* PC専用（768px以上） */

@media screen and (min-width: 769px) {
  body .series-header .entry-title {
    font-size: 1.5em !important;
    font-weight: 700 !important;
    color: #555 !important;
    text-align: center !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}


 /*  スマホ専用（768px以下） */

@media screen and (max-width: 768px) {
  body .series-header .entry-title {
    font-size: 1em !important;
    color: #555 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    text-align: center !important;
  }
}


  
/* ===========================================================================================================
タクソノミーページのタイトルcocoon本体の body .entry-title にある !important が強いため上書き　同一セレクタの競合順序が原因でどちらかが効かなくなるため　PC,スマホ両方効くように分けて@media screenで書いている　　　ここまで
============================================================================================================== */










  
/* ===========================================================================================================
※ 当サイトで紹介している漫画・同人作品は すべて 【高解像度】【完全版】横幅、フォント、囲み枠を定義
============================================================================================================== */





/* PC版：中央配置＋左揃え */
.gashitu-high-quality .quality-note {
  width: 720px;
  max-width: 90%;
  margin: 0 auto;
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

/* mark装飾 */
.gashitu-high-quality .quality-note mark {
  background: #fff8c5;
  padding: 0 4px;
  border-radius: 10px;
}




/* スマホ版 */
@media screen and (max-width: 768px) {
  .gashitu-high-quality .quality-note {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 3px;
    padding: 0 10px;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.8;
    white-space: normal;
    word-break: break-word;
  }
}








.gashitu-high-quality .quality-note {
  width: fit-content;          /* ← 中身にぴったり合わせる */
  max-width: 720px;            /* ← これ以上は広がらない */
  margin: 15px auto;
  padding: 15px 20px;
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  border: 1px solid #e0dcd2;
  border-radius: 6px;
  background: #fffaf6;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
}

/* mark装飾 */
.gashitu-high-quality .quality-note mark {
  background: #fff8c5;
  padding: 0 4px;
  border-radius: 3px;
}



/* スマホ版 */
@media screen and (max-width: 768px) {
  .gashitu-high-quality .quality-note {
    width: 95%;
    margin: 10px auto;
    padding: 12px;
    font-size: 0.8em;
    line-height: 1.8;
  }
}




/* PC版：中央配置＋左揃え */
.gashitu-high-quality .quality-note {
  width: fit-content;          /* ← 中身にぴったり合わせる */
  max-width: 720px;            /* ← これ以上は広がらない */
  margin: 15px auto;
  padding: 18px 22px;          /* ← 更新：余白を少し広げて上品に */
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  border: 1px solid #e0dcd2;
  border-radius: 8px;          /* ← 更新：角をやや丸めて上質感 */
  background: #fffaf6;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
}

/* mark装飾 */
.gashitu-high-quality .quality-note mark {
  background: #fff8c5;
  padding: 0 4px;
  border-radius: 3px;
}


/* スマホ版 */
@media screen and (max-width: 768px) {
  .gashitu-high-quality .quality-note {
    width: 95%;
    margin: 10px auto;
    padding: 12px;
    font-size: 0.8em;
    line-height: 1.8;
  }
}






/* PC版：中央配置＋左揃え */
.gashitu-high-quality .quality-note {
  width: fit-content;          /* ← 中身にぴったり合わせる */
  max-width: 720px;            /* ← これ以上は広がらない */
  margin: 15px auto;           /* ← 中央寄せ */
  padding: 18px 22px;          /* ← 余白をやや広めに上品に */
  text-align: left;            /* ← 左揃えで整然と */
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  border: 1px solid #e0dcd2;   /* ← 細めの淡い枠線 */
  border-radius: 8px;          /* ← 角を丸めて柔らかい印象に */
  background: #fffaf6;         /* ← やさしい暖色背景 */
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
}

/* mark装飾（強調部分） */
.gashitu-high-quality .quality-note mark {
  background: #fff8c5;
  padding: 0 4px;
  border-radius: 3px;
}


/* スマホ版 */
@media screen and (max-width: 768px) {
  .gashitu-high-quality .quality-note {
    width: 95%;
    max-width: 95%;
    margin: 10px auto;
    padding: 12px;
    text-align: center;        /* ← スマホでは中央寄せ */
    font-size: 0.8em;
    line-height: 1.8;
    white-space: normal;
    word-break: break-word;
  }
}

  
/* ===========================================================================================================
※ 当サイトで紹介している漫画・同人作品は すべて 【高解像度】【完全版】横幅、フォント、囲み枠を定義　　　ここまで
============================================================================================================== */













/* ====================================================================================
/author/作家名/ページのタイトル等の定義　　【※author.php　※ genre.php　※publisher.php　※series.php共通適用】もこのCSSを共通適用している
======================================================================================= */


.author-works-wrapper {
  width: 95%;
  margin: 20px auto;
  max-width: 1080px;
}

.author-page-title {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.author-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.author-post-card {
  text-align: center;
}

.author-post-card img {
  border-radius: 6px;
  transition: 0.3s;
}

.author-post-card img:hover {
  transform: scale(1.04);
}

.author-post-title {
  font-size: 0.9em;
  margin-top: 5px;
  line-height: 1.4;
}


/* ========================================================================================
/author/作家名/ページのタイトル等の定義　【※author.php　※ genre.php　※publisher.php　※series.php共通適用】もこのCSSを共通適用している　　ここまで　　　　
=========================================================================================== */






/* =================================================================================================
この作家の全作品を見る>>のテキストリンクの定義、　スマホのみテキストリンクの下線を非表示　【※author.php 　※genre.php　※publisher.php　※series.php共通適用】　　同じクラスを使用しCSSコードを流用し共通している
==================================================================================================== */



/*  見出しとリンクのレイアウト */
.related-title {
  position: relative;
  font-size: 21px;             /* ← 少し大きめに変更 */
  font-weight: 600;
  margin-bottom: 2px;          /* ← グラデーションとの距離を詰める */
  display: flex;               /* 横並びを確実にする */
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;           /* 折り返し禁止（スマホでも横並び維持） */
}

/* ▼ 右端のリンク */
.view-all-link {
  font-size: 15px;
  color: #0073aa;              /* テキストリンクはブルー */
  text-decoration: underline;
  transition: color 0.3s;
  white-space: nowrap;         /* 長いリンクでも折り返さない */
  margin-left: 10px;
}

.view-all-link:hover {
  color: #005177;
}

/*  スマホでも横並び維持・サイズ微調整 */
@media screen and (max-width: 768px) {
  .related-title {
    font-size: 18px;           /* スマホでは少し小さめ */
    margin-bottom: 3px;
  }
  .view-all-link {
    font-size: 14px;
	text-decoration: none; /* スマホではテキストリンク下線を非表示に */
  }
}



/* ======================================================================================================
この作家の全作品を見る>>のテキストリンクの定義、　スマホのみテキストリンクの下線を非表示　【※author.php　※ genre.php　※publisher.php　※series.php共通適用】　　同じクラスを使用しCSSコードを流用し共通している　　ここまで
========================================================================================================= */




/* ======================================================================================================
スマホでの【見出し・リンク行の横並びの指定】【※author.php　※ genre.php　※publisher.php　※series.php共通適用】
この作家の全作品を見る>>　この出版社の全作品を見る>>　このジャンルの全作品を見る>>　が見出しの下にcocoonが強制的にこれらを下段に押し下げてしまうため対策
Cocoonは h2 を「記事本文の見出し」として強制的に display:blockにするので　display:flexにするにはより深い指定をする　
========================================================================================================= */

.related-author-section h2.related-title,
.related-by-genre h2.related-title,
.related-by-publisher h2.related-title,
.related-by-series h2.related-title {  /* ← シリーズを追加 */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}


/* ======================================================================================================
スマホでの　【※author.php　※ genre.php　※publisher.php　※series.php共通適用】
この作家の全作品を見る>>　この出版社の全作品を見る>>　このジャンルの全作品を見る>>　が見出しの下にcocoonが強制的にこれらを下段に押し下げてしまうため対策
Cocoonは h2 を「記事本文の見出し」として強制的に display:blockにするので　display:flexにするにはより深い指定をする　
========================================================================================================= */








/* ==========================================
   週間アダルト漫画ランキング：横間隔を月間と揃える
   ========================================== */

section.ranking-weekly .ga4-horizontal-ranking {
  display: flex !important;
  gap: 10px !important;            /* 横の間隔を月間と同じに */
  padding: 4px 12px !important;   /* 左右の余白も少し広げる */
  overflow-x: auto !important;
  scrollbar-width: none;
}

section.ranking-weekly .ga4-horizontal-ranking::-webkit-scrollbar {
  display: none;
}

/* 念のため画像間に影や縁が付かないようリセット */
section.ranking-weekly .ga4-item {
  box-shadow: none !important;
  margin: 0 !important;
}

/* ==========================================================
   週間アダルト漫画ランキング：横間隔を月間と揃える ここまで
   ========================================================== */







/* ==========================================================
※30日間アダルト 漫画、同人ランキング：サブテキストの色
　　========================================================== */


.ranking-subtext {
  color: #555;              /* タイトルを邪魔しない落ち着いたグレー */
  font-size: 15px;
}

.ranking-subtext .days.month {
  color: #ff9800;           /* オレンジゴールド */
  font-weight: 600;
}



/* ==========================================================
※30日間アダルト 漫画、同人ランキング：サブテキストの色　ここまで
　　========================================================== */





/* ==========================================================
※7日間アダルト 漫画、同人ランキング：サブテキストの色　
　　========================================================== */

.ranking-subtext {
  color: #999 !important; /* 薄めの方が引き立つ */
  font-size: 15px;
}


.ranking-subtext .days.weekly {
  color: #1E90FF;           /* ターコイズブルー */
  font-weight: 600;
}

/* ==========================================================
※7日間アダルト 漫画、同人ランキング：サブテキストの色　ここまで
　　========================================================== */









/* ================================================================================================
   最近見た作品（上段＝アダルト漫画、下段＝同人作品）Cocoonの競合対策：#recent-viewed-list 対応
   ================================================================================================ */

/* 全体を縦並びに */
.history-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  margin-bottom: 60px !important;
}

/* グループタイトルなど */
.recent-group {
  width: 100% !important;
  display: block !important;
}

/* 横並びエリア */
.thumb-flex,
#recent-viewed-list.thumb-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 30px !important;
}

/* ===== アダルト漫画（上段） ===== */
#history-adult .thumb-item,
#recent-viewed-list .recent-group:first-child .thumb-item {
  flex: 0 0 100px !important;
  max-width: 100px !important;
}

#history-adult .thumb-item img,
#recent-viewed-list .recent-group:first-child .thumb-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* ===== 同人作品（下段） ===== */
#history-doujin .thumb-item,
#recent-viewed-list .recent-group:last-child .thumb-item {
  flex: 0 0 130px !important;
  max-width: 130px !important;
}

#history-doujin .thumb-item img,
#recent-viewed-list .recent-group:last-child .thumb-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* ===== スマホ時は2列 ===== */
@media screen and (max-width: 768px) {
  #history-adult .thumb-item,
  #history-doujin .thumb-item,
  #recent-viewed-list .thumb-item {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}

/* ========================================================================================================
   最近見た作品（上段＝アダルト漫画、下段＝同人作品）Cocoonの競合対策：#recent-viewed-list 対応　　ここまで
 ======================================================================================================== */









/* ====================================================================================
作品詳細ページ　続きの全編を読む≫のテキストリンク化
=======================================================================================*/
.cv-read-link {
  display: inline-block;
  color:  #d57a00;           
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.2s ease;
}

.cv-read-link:hover {
  color: #ff9b00;           
  transform: translateY(-1px);
}


/* 矢印記号を追加 */
.cv-read-link::after {
  content: "›››";              /* 記号を付加 */
  margin-left: 6px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1;
}

/* ====================================================================================
作品詳細ページ　続きの全編を読む≫のテキストリンク化　　　　　　ここまで
=======================================================================================*/	




























/* ============================================================================
【TOPページのみ使用の 品質内容セクション】（PC・スマホ両対応：文章中央＋枠ジャスト＋margin相殺防止）
============================================================================ */

/* 親ラッパー：margin相殺防止のため必須 */
.gashitu-high-quality {
  display: block !important;
  overflow: hidden !important;   /* ← margin相殺防止 */
  padding-top: 1px !important;   /* ← 上方向のズレ防止 */
  text-align: center !important; /* ← PC時の中央寄せ維持 */
  background: #fff8f4;           /* ← 背景統一 */
  position: relative !important; /* ← 内部子要素の位置制御を安定化 */
}

/* 本体囲み枠 */
body div.quality-note {
  display: block !important;                /* ← inline-blockを廃止（スマホでも安定） */
  position: relative !important;
  width: 80% !important;                    /* ← スマホ時に柔軟化 */
  max-width: 620px !important;              /* ← PCでは最大幅固定 */
  margin: 35px auto !important;             /* ← 中央寄せ */
  padding: 34px 46px 38px 46px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #555 !important;
  border: 2px solid #e8d8c7 !important;
  border-radius: 10px !important;
  background: #fffaf6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  z-index: 1;
}

/* タイトルラベル */
body div.quality-note::before {
  content: "品質内容";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff8f4;
  padding: 0 16px;
  font-size: 18px;
  color: #c35c7a;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* ============================================================================
TOPページのみ使用の品質内容セクション【スマホ】（768px以下）
============================================================================ */
@media screen and (max-width: 768px) {
  .gashitu-high-quality {
    overflow: hidden !important;
    padding-top: 6px !important;           /* ← 統一: 8px → 6px */
    text-align: center !important;
  }

  body div.quality-note {
    display: block !important;
    width: 96% !important;
    margin: 15px auto 15px auto !important; /* ← 統一: 15px→10px */
    padding: 14px 12px 16px 12px !important; /* ← 統一: 16px→14pxなど */
    font-size: 13px !important;
    line-height: 1.8 !important;
    border-width: 1.8px !important;        /* ← 統一 */
    border: 1.8px solid #e8d8c7 !important;
    border-radius: 10px !important;
    background: #fffaf6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
  }

  body div.quality-note::before {
    font-size: 15px !important;
    top: -10px !important;                /* ← 統一: -12px→-10px */
    padding: 0 8px !important;            /* ← 統一: 0 10px→0 8px */
  }

  /* 品質アイコン画像 */
  .gashitu-icon {
    display: block !important;
    width: 110px !important;              /* ← 統一: 120px→110px */
    height: auto !important;
    margin: 8px auto !important;          /* ← 統一: 10px auto 6px auto → 8px auto */
  }

  /* ミニ王冠ラベル群 */
  .gashitu-labels {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;                  /* ← 統一: 6px据え置き */
    margin-bottom: 10px !important;       /* ← 統一: 12px→10px */
  }

  .gashitu-labels img {
    width: 42px !important;               /* ← 統一: 46px→42px */
    height: auto !important;
  }
}


/* ============================================================================================================
【TOPページのみ使用の 品質内容セクション】（PC・スマホ両対応）ここまで
============================================================================================================ */









/* ============================================================================
 【/indexphp/以外で使う品質内容説明】
============================================================================ */
.gashitu-high-quality-new {
  display: block !important;
  overflow: hidden !important;
  padding-top: 1px !important;
  text-align: center !important;
  background: #fff8f4;
  position: relative !important;
}

/* 囲み枠 */
body div.quality-note-new {
  display: block !important;
  position: relative !important;
  width: 94% !important;
  max-width: 620px !important;
  margin: 30px auto 32px auto !important;
  padding: 20px 32px 20px 32px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #333 !important;
  border: 2px solid #e8d8c7 !important;
  border-radius: 10px !important;
  background: #fffaf6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  text-align: left !important;
}





body div.quality-note-new::before {
  content: "品質内容";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff8f4;
  padding: 0 14px;
  font-size: 17px;
  color: #c35c7a;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* アイコン画像 */
.gashitu-icon-new {
  display: block !important;
  width: 140px !important;
  height: auto !important;
  margin: 12px auto 10px auto !important;
}

/* 王冠バッジ群 */
.gashitu-labels-new {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 15px !important;
}

.gashitu-badge-new {
  width: 50px !important;
  height: auto !important;
}

/* ============================================================================
 【/indexphp/以外で使う品質内容説明】【スマホ】（768px以下）
============================================================================ */
@media screen and (max-width: 768px) {
  .gashitu-high-quality-new {
    overflow: hidden !important;
    padding-top: 6px !important;
    text-align: center !important;
  }

  body div.quality-note-new {
    width: 96% !important;
    margin: 10px auto 15px auto !important;
    padding: 14px 12px 16px 12px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    border-width: 1.8px !important;
  }

  body div.quality-note-new::before {
    font-size: 15px !important;
    top: -10px !important;
    padding: 0 8px !important;
  }

  .gashitu-icon-new {
    width: 110px !important;
    margin: 8px auto !important;
  }

  .gashitu-labels-new {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .gashitu-badge-new {
    width: 42px !important;
  }
}
/* ============================================================================
 【/indexphp/以外で使う品質内容説明】 品質内容セクションここまで
============================================================================ */








/* ==============================================================================================
   【改定】【7日、30日共通適用】  同人誌ランキング 　 高さゼロ問題、ラベル消失、白帯すべて解決   
   ============================================================================================== */

/* 横並び要素 */
section.ranking-section.ranking-doujin .ga4-horizontal-ranking {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  height: auto !important; /* ← 高さを確実に維持 */
}

/* 各アイテム */
section.ranking-section.ranking-doujin .ga4-item {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 210px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  line-height: 0 !important;
}

/* 画像ラッパー */
section.ranking-section.ranking-doujin .ga4-image-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  height: auto !important;
}

/* サムネイル画像 */
section.ranking-section.ranking-doujin .ga4-image-wrapper img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

/* 順位ラベル */
section.ranking-section.ranking-doujin .ga4-rank-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: linear-gradient(135deg, #ff0066 0%, #cc0077 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 0 0 6px 0;
  z-index: 10 !important;
  line-height: 1.2;
}

/* コミック（黒帯） */
section.ranking-section.ranking-doujin .performer-label {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 3px 0;
  line-height: 1.3;
  z-index: 9 !important;
}



/* ========================================================================================================
   【改定】【7日、30日共通適用】 同人誌ランキング 　 高さゼロ問題、ラベル消失、白帯すべて解決   　ここまで
   ======================================================================================================== */



/* ===============================================================================================
   作品詳細ページのサムネ上部にある作家名、サークル名、ACF内も共通テキストリンク化
   =============================================================================================== */


.author-link {
  color:   #1a73e8;             /*アダルト漫画テキストリンク色*/
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* hover時の色（より濃い青） */
.author-link:hover {
  color: #0b5fc6;
  text-decoration: underline;
}

/* サークル名　　クラス　doujin-gap　強制適用 */
.doujin-gap .author-link {
  color: #1a73e8 !important;    /*サークル名をテキストリンク化*/
}

/* hover時の色（より濃い青） */
.doujin-gap .author-link:hover {
  color: #0b5fc6 !important;
  text-decoration: underline;
}



/* =====================================================================================================
   作品詳細ページのサムネ上部にある作家名、サークル名、ACF内も共通テキストリンク化　　ここまで
   ===================================================================================================== */











.page-ranking-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin-bottom: 6px;
    text-align: center; /
}





















/* ========================================================================================================
　　　　　　　　　　　　　　　　　 ナビ項目説明欄テキストの共通適用
 =========================================================================================================*/


@media screen and (max-width: 768px) {

  /* ▼ ナビ説明欄全体（レイアウト維持） */
  .new-desc-with-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    padding: 6px 0 !important;
  }

  /* ▼ テキスト折り返し対応 */
  .new-desc-with-icons .desc-text {
    display: inline-block !important;
    max-width: 95% !important;
    word-break: keep-all !important;
  }
}


/* ========================================================================================================
 　　　　　　　　　　　　　　　　　ナビ項目説明欄テキストの共通適用　　　　　　　　　　ここまで
 =========================================================================================================*/





/* ========================================================================================
　 /tags/ ページ 最終デザイン 背景、見出し、グラデーション、タグボタン全対応  
   ========================================================================================*/

/* ▼ 全体背景と余白調整 */
.tagpage-container {
  background-color: #fff8f4;
  padding-top: 5px;
  padding-bottom: 25px;
  text-align: center;
}

/* ▼ 見出しテキスト */
.tagpage-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #222;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* ▼ タグリンク群 */
.tag-list-wrapper {
  text-align: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ▼ 各タグボタン */
.tag-list-wrapper .tag-link {
  display: inline-block;
  margin: 8px 8px;
  padding: 6px 16px;
  background: #fff;
  border: 1px solid #e0d0c9;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-size: 15.5px;
  transition: all 0.25s ease;
}

/* ▼ hover時の柔らかい反応 */
.tag-list-wrapper .tag-link:hover {
  background: #ffeae0;
  border-color: #f3c3b1;
  color: #000;
}





/* =======================================================
　 スマホ表示
   ======================================================= */

@media screen and (max-width: 768px) {

  /* 見出しサイズを少し小さく */
  .tagpage-title {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* ボタン群の並びを中央寄せ・複数行対応 */
  .tag-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px; /* 上下・左右の隙間 */
    margin-top: 12px;
  }

  /* ボタン自体を指で押しやすいサイズに */
  .tag-list-wrapper .tag-link {
    padding: 8px 14px;   /* 少し大きめのタップ領域 */
    font-size: 14.5px;   /* 読みやすく軽め */
    margin: 4px;
  }
}



/* ========================================================================================
　 /tags/ ページ 最終デザイン 背景、見出し、グラデーション、タグボタン全対応     ここまで
   ======================================================================================== */





/* ===========================================================
 /tags/へのテキストリンク　ページタイトル人気タグ一覧　
   =========================================================== */

.tags-link-footer {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.tags-page-link {
  font-size: 14px;
  color: #777;
  text-decoration: none;
}
.tags-page-link:hover {
  color: #c77a6b;
}


/* ========================
　【スマホ版】
   ======================== */

@media screen and (max-width: 768px) {
  .tags-link-footer {
    margin-top: 25px;
    margin-bottom: 18px;
  }

  .tags-page-link {
    font-size: 13.5px;        /* スマホでバランス良く見えるサイズ */
    color: #666;
    display: inline-block;
    padding: 6px 10px;        /* タップしやすい範囲を確保 */
    border-radius: 3px;
  }

  .tags-page-link:hover {
    background-color: #fff0ea; /* 軽いタップ効果 */
    color: #b25e4f;
  }
}



/* ===============================================================
 /tags/へのテキストリンク　ページタイトル人気タグ一覧　ここまで
   =============================================================== */







/* ===========================================================
   細いグラデーションライン
=========================================================== */
.wrr-smart-gradient {
  display: block;
  width: 80%;
  max-width: 1200px;
  height: 5px; /* ←線の太さ */
  margin: 25px auto;
  background: linear-gradient(to right, #f5b0b0, #f5deb3, #b0e0e6, #d8bfd8);
  border-radius: 10px;
  box-sizing: border-box;
}

/* ===========================================================
   細いグラデーションライン　　　　　　　　　　　ここまで
=========================================================== */








/* ===========================================================
   TOPページへのボタンリンクを囲む枠線
   =========================================================== */


.ranking-box .top-page-link {
  position: relative;
  margin: 20px auto;
  padding: 35px 50px 40px; 
  border: 2px solid #e8d8c7;
  border-radius: 10px;
  background: #fffaf6;
  width: 95%;
  max-width: 1200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  text-align: center;
  overflow: visible !important; /* ← これが最重要！はみ出しを許可 */
}

/* タイトル装飾（中央表示） */
.ranking-box .top-page-link-title {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: #3a2e2e;
  letter-spacing: 1px;
  margin-bottom: 18px;
  padding: 0 24px;
  background: #fffaf6;
  white-space: nowrap; /* 改行防止 */
}

/* 説明文 */
.ranking-box .top-page-description {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 22px;
}



/* ===========================================================
   TOPページへのボタンリンクを囲む枠線　　　　　　　ここまで
   =========================================================== */









/* ==============================================================================
  【スマホ】 TOPページへのボタンリンクを囲む枠線 TOPページボタン 2列×3行
   ============================================================================== */
@media screen and (max-width: 768px) {

  /*  タイトル| TOPページへ |  */
  .ranking-box .top-page-link-title {
    font-size: 14px !important;        /*  スマホ用に少し小さく調整 */
    margin-bottom: 14px !important;    /*  下の説明文との余白を微調整 */
    letter-spacing: 0.5px !important;  /*  スマホで詰まり防止 */
    line-height: 1.4 !important;
  }

  div.top-page-link div.ranking-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /*  2列指定 */
    gap: 4px !important;                              /*  ボタン間の余白 */
    justify-items: stretch !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 4% !important;                         /*  枠との余白バランス */
    margin: 8px auto 0 !important;
    box-sizing: border-box !important;
  }

  div.top-page-link div.ranking-links a.ranking-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 38px !important;                      /*  2列表示に合わせてやや余裕 */
    padding: 4px 0 !important;
    font-size: 12px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  div.top-page-link div.ranking-links a.ranking-link img.play-icon {
    width: 10px !important;
    height: 10px !important;
    margin-right: 3px !important;
    vertical-align: middle !important;
  }

  div.ranking-box div.top-page-link {
    width: 100% !important;          /* 枠の横幅 */
    padding: 20px 16px 10px !important; /* 内側の余白 */
    margin: 0px auto !important;
    box-sizing: border-box;
  }
}
/* ===================================================================================
  【スマホ】 TOPページへのボタンリンクを囲む枠線 TOPページボタン 2列×3行 ここまで
   =================================================================================== */










/* ===========================================================
エントリーカード内の作家の箇所をテキストリンク化
   =========================================================== */

.entry-author {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
  text-align: center;
}

.entry-author .author-link {
  color: #3b65c0;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.entry-author .author-link:hover {
  color: #1d3b9c;
  text-decoration: underline;
}




@media screen and (max-width: 768px) {
  .entry-author {
    font-size: 13px;
    margin-top: 4px;
    text-align: center;
    line-height: 1.6;
  }

  .entry-author .author-link {
    display: inline-block;
    color: #3b65c0;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 6px; /* ← タップしやすい余白 */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .entry-author .author-link:hover {
    background-color: rgba(59, 101, 192, 0.08);
    color: #1d3b9c;
    text-decoration: none; /* スマホでは下線なし */
  }
}



/* ===========================================================
エントリーカード内の作家の箇所をテキストリンク化
   =========================================================== */





/* ===========================================================
タグ見出し下専用グラデーションラインPCは左寄せ
   =========================================================== */

.wrr-smart-tag-gradient {
  display: block;
  width: 100%; /* ← 横幅は見出しより少し長めに */
  height: 4px;
  margin: 6px 0 16px 0px; /* ← 左側に少しインデント（アイコンと見出し揃え） */
  background: linear-gradient(
    to right,
    #f5b0b0,
    #f5deb3,
    #b0e0e6,
    #d8bfd8
  );
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0.9;
}


/* ===========================================================
タグ見出し下専用グラデーションラインPCは左寄せ　　　ここまで
   =========================================================== */




/* ===========================================================
タグセクション全体
   =========================================================== */


.tag-section {
  background: #fff8f4;
  padding: 30px 20px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #f1e4da;
}

/* ▼ セクション見出し */
.tag-title {
  font-size: 1.2em;
  margin-bottom: 25px;
  font-weight: 600!important;
  display: flex;
  align-items: center;
  gap: 10px;  
}

/* ▼ 作品タイプから探す 中央寄せ */
h2.tag-title.tag-heading-banner {
  display: flex;
  justify-content: center !important;
  align-items: center;
}



/* 見出しの土台（幅100%でOK） */
.tag-title {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

/* ※※※【スマホ】※※※ 作品タイプから探す*/
.tag-title-text {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 600;
  color: #666 !important;
  padding-bottom: 2px;
　margin-top: 0 !important;    　 /*  ブラウザ既定の上マージンを打ち消す */
  margin-bottom: 0px !important;

}




.tag-title-icon {
  width: 35px;
  height: auto;
}



/* ▼ 各カテゴリ見出し */
.tag-label {
  font-size: 1.1em;
  font-weight: 600!important;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 8px;
  margin-top: 20px;      /* 見出し上の余白 */
 
}


/* ▼ タグリンク群 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ▼ 個別タグリンク */
.tag-list a {
  display: inline-block;
  background: #f6f9ff;
  border: 1px solid #bdd3f3;
  border-radius: 8px;
  padding: 6px 16px;
  text-decoration: none;
  color: #205699;
  font-size: 0.98em;
  transition: 0.2s;
}

.tag-list a:hover {
  background: #e6f0ff;
  color: #103b6f;
  border-color: #6ba0de;
}



/* ▼ スマホ用 */
@media screen and (max-width: 768px) {
  .tag-section {
    padding: 20px 15px;
  }
  .tag-list a {
    font-size: 0.9em;
    padding: 3px 8px;
  }
}

/* ▼ タグリンク群 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ▼ 個別タグリンク */
.tag-list a {
  display: inline-block;
  background: #f6f9ff;
  border: 1px solid #bdd3f3;
  border-radius: 8px;
  padding: 1px 6px;
  text-decoration: none;
  color: #205699;
  font-size: 0.98em;
  transition: 0.2s;
}

.tag-list a:hover {
  background: #e6f0ff;
  color: #103b6f;
  border-color: #6ba0de;
}






.ranking-title {
  display: flex;
  align-items: center;
  gap: px;4
}



/* ===========================================================
タグセクション全体　　　　　　　　　　　　ここまで
   =========================================================== */







/* ====================================================================================
【スマホ】　タグセクション全体　　　　スマホをPC版デザインと同じ見た目に統一
==================================================================================== */
@media screen and (max-width: 768px) {

  /* ▼ 全体背景をPCと同じ淡いピンクに */
  .tag-section {
    background: #fff8f4 !important;  /* ← PCと同じ */
    border: none !important;
    box-shadow: none !important;
    padding: 3px 1px!important;
  }

 
/*  各カテゴリブロック（タイプ別／プレイ別／シチュエーション別） */
  .tag-box {
    background: #fff8f4 !important;  /* PCと同じ淡いピンク */
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0;                /*  各見出し上の余白を調整 */
	   
	}

  /*  各見出し（タイプ別など）の内側背景も透明に */
  .tag-label {
    background: transparent !important;
  }

	
	
	
/* ▼ 各見出し（タイプ別・プレイ別など）中央寄せ */
.tag-label {
  background: none !important;
  border: none !important;
  color: #333 !important;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;  /* ★ 中央寄せに変更！ */
  gap: 1px;
  text-align: center;        /* 念のためテキストも中央寄せ */  
 
  font-size: 1em !important;
	 
}
	
	
 

  /* ▼ プレイ別などの見出し下のグラデーションライン */
  .wrr-smart-tag-gradient {
    width: 80%;
    height: 4px;
    margin: 2px 0 16px 45px;
    background: linear-gradient(to right, #f5b0b0, #f5deb3, #b0e0e6, #d8bfd8);
    border-radius: 8px;
  }

  /* ▼ 各タグリスト部分 */
  .tag-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
  }

  .tag-list a {
    background: #f6f9ff;
    border: 1px solid #bdd3f3;
    border-radius: 8px;
    padding: 2px 8px;
    text-decoration: none;
    color: #205699;
    font-size: 0.9em;
    transition: 0.2s;	 
  }

  .tag-list a:hover {
    background: #e6f0ff;
    color: #103b6f;
    border-color: #6ba0de;
  }


	
	
  /* ▼ 「人気タグから探す」見出し */
  .tag-title {
    background: none !important;
    border: none !important;
    color: #333;
    font-size: 0.8em !important;
    font-weight: 600;
    margin-bottom: 20px;
  }
}


/* 各見出しの上余白を完全リセット */
.tag-label {
  margin-top: 0 !important;     /*  ブラウザ既定の上マージンを打ち消す */
  margin-bottom: 2px !important;
	color: #777!important;
	font-weight: 400!important;
	letter-spacing: 0.02em;

}

/* 個別タグボタンとタイプなどの見出しの余白距離 */
.tag-list {
 margin-bottom: 10px !important;
	
}

/* ====================================================================================
【スマホ】　タグセクション全体　　　スマホをPC版デザインと同じ見た目に統一　　ここまで
======================================================================================= */




/* ====================================================================================
【スマホ】　タグセクション　キャラクター別、プレイ別の見出しを少し右寄せ
======================================================================================= */

@media screen and (max-width: 768px) {
  .tag-label {
    padding-left: 12px;   /* ← 好みで 8〜16px */
  }
}

/* ====================================================================================
【スマホ】　タグセクション　キャラクター別、プレイ別の見出しを少し右寄せ　　ここまで
======================================================================================= */





/* =================================================
PC版：タグセクション全体 見出し上下の余白を最適化
==================================================== */

@media screen and (min-width: 769px) {
  /* 見出し全体 */
  .tag-label {
    margin-top: 20px !important;   /* ← 見出しの上余白（増やす） */
    margin-bottom: 10px !important; /* ← グラデーションとの距離を整える */
	font-weight: 400!important;
	letter-spacing: 0.02em;  
  }

  /* 直前のタグリストとの距離を少し詰める */
  .tag-list {
    margin-bottom: 10px !important;  /* ← これが大きすぎると上に押し上げられる */
  }

  /* グラデーションラインとの調整 */
  .wrr-smart-tag-gradient {
    margin-top: 4px !important;   /* ← 見出しとの距離を微調整 */
  }
}

/* =================================================
PC版：タグセクション全体 見出し上下の余白を最適化
==================================================== */







/* ==========================================================
   /tag/ ページに /doujinshi/ と全く同じレイアウトを適用
   ========================================================== */

/* タグページ全体を同人誌レイアウト化 */
.tag .video-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
  max-width: 1280px !important;
  box-sizing: border-box !important;
}

/* カード（同人誌カード構成と同一） */
.tag .video-list .entry-card {
  flex: 0 0 calc(20% - 10px) !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: #fff !important;
  transition: transform 0.2s ease !important;
  box-sizing: border-box !important;
}
.tag .video-list .entry-card:hover {
  transform: scale(1.02) !important;
}

/* サムネイル画像（横長比率・同人誌仕様） */
.tag .video-list .entry-card .entry-thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}
.tag .video-list .entry-card:hover .entry-thumb img {
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

/* タイトル・作者・星位置も同人と同一 */
.tag .video-list .entry-title {
  font-size: 14px !important;
  margin: 6px 4px 2px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.tag .video-list .entry-author {
  font-size: 13px !important;
  color: #333 !important;
  margin: 2px 4px !important;
  text-align: left !important;
}
.tag .video-list .entry-rating {
  margin: 4px 6px 8px !important;
  text-align: left !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .tag .video-list .entry-card {
    flex: 0 0 calc(25% - 8px) !important;
  }
}
@media screen and (max-width: 768px) {
  .tag .video-list .entry-card {
    flex: 0 0 calc(50% - 8px) !important;
  }
}


/* =================================================================
   /tag/ ページに /doujinshi/ と全く同じレイアウトを適用　　ここまで
   ================================================================= */









/* =================================================================
アダルト漫画、同人 週間月間ランキング　＞ 横スクロール記号   【JS】
   ================================================================= */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 42px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1;
  transition: all 0.25s ease;
}

.scroll-btn:hover {
  color: #fff;
  transform: translateY(-50%) scale(1.1);
  text-shadow: 0 0 12px rgba(255,255,255,0.8);
}

.left-btn { left: 10px; }
.right-btn { right: 10px; }

.ga4-horizontal-ranking {
  overflow-x: auto;
  position: relative;
  padding: 10px 60px; /* ボタン分の余白 */
  scroll-behavior: smooth;
  white-space: nowrap;
}




@media (max-width: 768px) {

  /* 〈〉サイズ */
  .scroll-btn {
    font-size: 38px;
    height: 5px;
	color: rgba(255, 255, 255, 0.7);  
  }

  /* 〈〉位置 */
  .left-btn { left: 15px; }
  .right-btn { right: 15px; }

  /* 横スクロール余白もスマホ最適化 */
  .ga4-horizontal-ranking {
    padding: 8px 44px; /* 〈〉が被らない最小限 */
  }
}

/* ============================================================================
アダルト漫画、同人 週間月間ランキング　＞ 横スクロール記号   【JS】　　ここまで
   ============================================================================ */
















/* =========================================================
【スマホ】人気タグ　をスマホでのみ画面中央配置する
============================================================= */

@media (max-width: 768px) {
  h2.tag-title.tag-heading-banner {
      display: block !important;       /*  flexを強制解除 */
      text-align: center !important;   /*  完全中央寄せ */
  }

  .tag-heading-banner::after {
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 53% !important;
  }
	

 /* 人気タグ全体の余白を詰める */
  .tag-section {
      margin-top: 0px !important;
      margin-bottom: 6px !important;
  }

  /* 見出しの余白調整（上詰め・下詰め） */
  .tag-heading-banner {
      margin-top: 2px !important;
      margin-bottom: 30px !important;
      padding-bottom: 2px !important;
  }	
	
}


/* ============================================================
【スマホ】人気タグ　をスマホでのみ画面中央配置する ここまで
=============================================================== */









/* ============================================================================
　-wildriverreviewについて-セクション
=============================================================================== */


/* 説明セクション */
.wrr-description {
  background: #fffaf5;
  border: 1px solid #f1e4d3;
  border-radius: 12px;
  padding: 1.5em;
  text-align: center;
  margin: 2em auto;
  max-width: 680px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.wrr-desc-title {
  font-size: 1.2em;
  color: #555;
  margin-bottom: 0.6em;
  font-weight: 600;
}
.wrr-desc-text {
  color: #666;
  font-size: 0.95em;
  line-height: 1.7;
}







/* ▼ スマホ向け調整 */
@media screen and (max-width: 768px) {
  .wrr-description {
    padding: 1.2em 1em;        /* 内側余白を少し詰めて読みやすく */
    margin: 1.8em auto;        /* 上下マージンやや縮小 */
    max-width: 95%;            /* 横幅をデバイス幅にフィット */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
  }

  .wrr-desc-title {
    font-size: 0.95em;         /* タイトルサイズをわずかに小さく */
    margin-bottom: 0.5em;
    letter-spacing: 0.03em;    /* スマホでの詰まり防止 */
  }

  .wrr-desc-text {
    font-size: 0.87em;         /* 可読性を保ちながらややコンパクトに */
    line-height: 1.8;          /* スマホは行間を広く */    
	word-break: normal;        /* ← ここを変更 */
    overflow-wrap: break-word; /* ← 追加（重要） */ 
  }
}




/* 発刊年ラベル */
.wrr-desc-publisher {
  margin-top: 1em;
  font-size: 0.85em;
  color: #888;
  letter-spacing: 0.05em;
  font-style: italic;
  text-align: center;
  opacity: 0.9;
}

/* スマホ向け */
@media screen and (max-width: 768px) {
  .wrr-desc-publisher {
    font-size: 0.78em;
    margin-top: 0.8em;
  }
}




/* エレナ自己紹介 */
.wrr-illust-name {
  font-size: 13px;
  color: #555;
  text-align: center;
  margin-top: 6px;
  opacity: 0.85;
}



/* ============================================================================
　-wildriverreviewについて-セクション     ここまで
=============================================================================== */





/* ============================================================================
作家ページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */


/* PC用をスマホで非表示 */
.author-desc-pc {
  display: block;
}
.author-desc-sp {
  display: none;
}

/* スマホ（〜768px） */
@media screen and (max-width: 768px) {
  .author-desc-pc {
    display: none;
  }
  .author-desc-sp {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0px;
  }
}



/* ============================================================================
作家ページ の説明文　スマホで短縮文が表示される切り替えCSS　　　　　　ここまで
=============================================================================== */




/* ============================================================================
出版社ページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */

/* PCデフォルト */
.publisher-desc-pc {
  display: block;
}
.publisher-desc-sp {
  display: none;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
  .publisher-desc-pc {
    display: none;
  }
  .publisher-desc-sp {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0px;
  }
}



/* ============================================================================
出版社ページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */



/* ============================================================================
ジャンルページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */

/* まずPC用説明を表示、スマホ用を非表示（デフォルト） */
.genre-description-pc {
  display: block;
}
.genre-description-sp {
  display: none;
}

/* スマホ（768px以下）で切り替え */
@media screen and (max-width: 768px) {
  .genre-description-pc {
    display: none;
  }
  .genre-description-sp {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0px;
  }
}


/* ============================================================================
ジャンルページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */









/* ============================================================================
タグページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */


/* --- デフォルト（PC） --- */
.tag-description-pc { display: block; }
.tag-description-sp { display: none; }

/* --- スマホで切り替え（768px以下） --- */
@media screen and (max-width: 768px) {
  .tag-description-pc { display: none; }

  .tag-description-sp {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0px;
  }
}



/* ============================================================================
タグページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */












/* ============================================================================
シリーズページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */

/* --- デフォルト（PC）：長文を表示 --- */
.series-description-pc {
  display: block;
}

/* --- デフォルト（SP）は非表示 --- */
.series-description-sp {
  display: none;
}


/* --- スマホ（768px以下）で切り替え --- */
@media screen and (max-width: 768px) {

  /* PC説明文を非表示 */
  .series-description-pc {
    display: none;
  }

  /* SP短縮文を表示 */
  .series-description-sp {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0px;
    color: #555;
  }
}


/* ============================================================================
シリーズページ の説明文　スマホで短縮文が表示される切り替えCSS
=============================================================================== */














/* ==========================================================================
   このシリーズの他の作品（作家／ジャンル／出版社と完全統一レイアウト）
   ========================================================================== */

/* セクション余白リセット */
.related-by-series .related-author-section {
  margin: 0 !important;
  padding: 0 !important;
}

/* 親コンテナ */
.related-by-series .related-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 !important;
  box-sizing: border-box !important;
}

/* 箱（幅はここで制御） */
.related-by-series .related-item {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex: 1 1 160px !important;
  max-width: calc(20% - 10px) !important;
}

/* img は箱に100%追従 */
.related-by-series .related-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* ------------------------------
   漫画（10列・縦長）
-------------------------------- */
.related-by-series.manga .related-item {
  flex: 1 1 110px !important;
  max-width: calc(10% - 10px) !important;
}

.related-by-series.manga .related-item img {
  aspect-ratio: 3 / 4.5 !important;
  object-position: center top !important;
}

/* ------------------------------
   同人（5列・横広）
-------------------------------- */
.related-by-series.doujin .related-item {
  flex: 1 1 calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
}

.related-by-series.doujin .related-item img {
  aspect-ratio: 4 / 3 !important;
  object-position: center center !important;
}







/* --- スマホ（他領域と完全同じ） --- */
@media screen and (max-width: 768px) {

  /* 漫画：3列 */
  .related-by-series.manga .related-thumbs .related-item {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }

  /* 同人：2列 */
  .related-by-series.doujin .related-thumbs .related-item {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }

  .related-by-series .related-thumbs {
    gap: 6px !important;
  }
}




/* ==========================================================
 Wild River Reviewについての左側に魔法少女
   ========================================================== */


/* WRR説明エリア：立ち絵＋本文の横並び */
.wrr-flex {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 立ち絵エリア（幅固定せずバランス優先） */
.wrr-desc-illust {
  flex: 0 0 35%;
  text-align: center;
}

.wrr-illust-img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* 説明文（右側） */
.wrr-desc-body {
  flex: 1;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .wrr-flex {
    flex-direction: column;
  }
  
  .wrr-desc-illust {
    order: 1;
  }

  .wrr-desc-body {
    order: 2;
    text-align: center;
  }

  .wrr-illust-img {
    max-width: 200px;
    margin: 0 auto;
  }
}


/* ==========================================================
 Wild River Reviewについての左側に魔法少女　　　ここまで
   ========================================================== */


　　


















/* --------------------------------------------------------------------------------------
 【最新アダルト漫画     最新同人誌】 の見出し横  10秒周期 アイコンバウンド　　
---------------------------------------------------------------------------------------- */

.title-icon {
  display: inline-block;
  animation: braOccasional 10s ease-in-out infinite;
  transform-origin: center bottom;
}

/* 6秒に1回だけ、1〜2pxだけ動くアニメーション */
@keyframes braOccasional {
  0%   { transform: translateY(0); }
  3%   { transform: translateY(-2px); }
  6%   { transform: translateY(0); }
  100% { transform: translateY(0); }
}


/* --------------------------------------------------------------------------------------
 【最新アダルト漫画     最新同人誌】 の見出し横  10秒周期 アイコンバウンド　　ここまで
---------------------------------------------------------------------------------------- */







/* ====================================================================================================
   【PC】　　品質説明キャラ配置　　各ページの品質内容セクションと同じクラス
   ==================================================================================================== */

@media screen and (min-width: 769px) {

  .quality-guide {
    position: absolute !important;
    right: 0px; !important;          /* 右側に固定 */
    bottom: -10px !important;     /* ← キャラの足が綺麗に出るように微調整 */
    width: 230px !important;      /* PC用の大きめ表示 */
    height: auto !important;
    z-index: 20 !important;       /* 囲みより上、他セクションより下 */
  }

  .gashitu-high-quality-new {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 40px !important; /* キャラ足用の余白（最小限） */
  }
}



/* =========================================================================================================
   【PC】品質説明キャラ配置　　　　各ページの品質内容セクションと同じクラス　　　　　ここまで
 ======================================================================================================= */




/* ===========================================================================================================
   【スマホ】品質説明キャラを右側のまま上に移動   各ページの品質内容セクションと同じクラス
=========================================================================================================== */

@media screen and (max-width: 768px) {

  .quality-guide {
    position: absolute !important;
    right: 0 !important;
       
    bottom: auto !important;    /* 下固定を無効化 */
    width: 110px !important;
    height: auto !important;
    z-index: 10 !important;
	 
  }

  /* 親は何も押し下げない（余白を作らない） */
  .gashitu-high-quality-new {
    padding-bottom: 30px !important;
    overflow: visible !important;
    position: relative !important;
  }
}


@media screen and (max-width: 768px) {
  .quality-guide {
	/* キャラの位置 */  
    top: 40% !important;
  }
}



/* ===========================================================================================================
   【スマホ】品質説明キャラを右側のまま上に移動   各ページの品質内容セクションと同じクラス　　　　ここまで
=========================================================================================================== */







/* =========================================================================
   【クーポンボタン】テキストカラー制御（PC・スマホ共通）
   通常＝白、ホバー／タップ＝一般的なリンク青、visited赤対策、青枠消去
   ========================================================================= */

/* ▼ 通常のボタン文字色（白） */
a.elena-coupon-btn {
  color: #fff;
}

/* ▼ ホバー・タップ時は一般的なリンク色（青） */
a.elena-coupon-btn:hover,
a.elena-coupon-btn:active,
a.elena-coupon-btn:focus {
  color: #0066cc !important; /* ← 一般的なテキストリンク色 */
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ▼ visited が赤くなるのを防止 */
a.elena-coupon-btn:visited {
  color: #fff !important;
}


/* =============================================================================
   【クーポンボタン】テキストカラー制御（PC・スマホ共通）
   通常＝白、ホバー／タップ＝一般的なリンク青、visited赤対策、青枠消去　ここまで
 =============================================================================== */














/* ===============================================================================================
 　　　　　　　　【キャラ＋クーポン全体セクション】
================================================================================================= */


.wrr-elena-coupon {
  background: #fff7f6;
  border-radius: 12px;
  padding: 5px 10px;
  margin: 10px 0;
  box-shadow: 0 0 10px rgba(255,150,170,0.15);
  border: 1px solid rgba(255,200,210,0.35);
}

/* PC：左70% 右30% */
.elena-coupon-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.elena-coupon-textwrap {
  width: 70%;
}

.elena-coupon-chara {
  width: 30%;
  text-align: right;
}

.elena-coupon-chara img {
  width: 200px;
  height: auto;
}


/* ======================================
   ▼ テキストカラー最適化（控えめ・上品）
====================================== */

/*  タイトルピンク */
.elena-coupon-title {
  color: #d87a95;       /* ←スクショに近い柔らかピンク */
  font-weight: 700;
  line-height: 1.45;
}

/* 本文：完全ニュートラル（押しつけ感ゼロ） */
.elena-coupon-text {
  color: #555;          /* 読みやすさ＆自然さ */
  line-height: 1.6;
  font-size: 15px;
}

/* strong：色を付けない */
.elena-coupon-text strong {
  color: #555;
  font-weight: 700;
}

/* エレナの名前：色をつけないで自然に */
.elena-name {
  color: #555;
  font-weight: 700;
}



/* ======================================
   ▼ ボタン
====================================== */
.elena-coupon-btn {
  display: block;
  width: 240px;
  margin: 20px auto 0;
  padding: 10px 22px;
  background: linear-gradient(90deg, #ff9ac6, #ff7bb4);
  color: #fff;
  font-weight: 700;
  border-radius: 25px;
  text-align: center;
  text-decoration: none;
}





/* ====================================================
 　【PC】　【キャラ＋クーポン全体セクション】
======================================================= */
@media screen and (min-width: 769px) {


  .elena-coupon-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 10px;
	  
  }

  /*  文章をもっと右へ移動（理想位置）  */
  .elena-coupon-textwrap {
    width: 70%;
    margin-left: 400px !important;   /*  さらに右へ（調整済） */
  }

  .elena-coupon-title {
    margin-top: 0;
	font-size: 25px;  
  }

  .elena-coupon-chara {
    width: 30%;
    text-align: right;
	margin-right: 200px !important;  /*  この数値を追加して中央へ寄せる ★ */ 
    margin-top: 30px;   /* ← これを追加・調整 */  
  }

  .elena-coupon-chara img {
    width: 200px;  /* キャラの大きさPC */
  }
	
  .elena-coupon-btn {
    margin-top: -50px !important;   /*  今の20pxから大幅に詰める */
  }
	
}






/* ======================================
   ▼ スマホ最適化（768px以下）
====================================== */
@media screen and (max-width: 768px) {

  .elena-coupon-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 !important;
  }

  .elena-coupon-textwrap {
    width: calc(100% - 105px) !important;
    padding-right: 5px;
  }

  .elena-coupon-title {
    font-size: 18px;
  }

  .elena-coupon-text {
    font-size: 13px;
  }

  .elena-coupon-chara {
    width: 150px !important;
    flex-shrink: 0 !important;
  }

  .elena-coupon-chara img {
    width: 170px !important;
    height: auto;
  }

  .elena-coupon-btn {
    width: 75%;
    margin-top: 9px;　/* クーポンボタンの上部余白 */
  }
}








@media screen and (max-width: 768px) {

  .elena-coupon-inner {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
  }

  .elena-coupon-textwrap {
      width: 62% !important;        /* ← 文の塊を60％に拡大！ */
      text-align: right;             /* ← 行数は変わらず右寄せ */
      padding-right: 5px;            /* ← 微調整 */
  }

  .elena-coupon-chara {
      width: 40% !important;         /* ← キャラ幅を合わせて調整 */
  }
}







/* ========================================================================================================
    　　　　　　　【キャラ＋クーポン全体セクション】　　　　　ここまで
=========================================================================================================== */










/* =========================================================
タグの見出し横のアイコンサイズ、位置　　　　　
============================================================ */

/* PC */
.bra-icon {
  width: 15px;
  height: auto;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.95;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {

  .bra-icon {
    width: 13px !important;      /* ← 強制で上書き */
    margin-left: 5px !important; /* ← 強制で上書き */
    opacity: 0.9 !important;
  }
}

/* ===========================================================
タグの見出し横のアイコンサイズ、位置　　　　　ここまで
============================================================== */





/* ============================================================================
ナビ追従説明テキスト下とメインコンテンツエリアとの余白を狭める
============================================================================== */

/*  説明エリア下の余白を詰める（PC・スマホ共通） */
#content-top {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/*  contentエリア上の余白を狭くする */
#content,
#content-in,
.content,
.content-in.wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*  “ナビ追従説明文” のバー .menu-description の直下余白を詰める */
.menu-description {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*  パンくずリスト直上の余白も削りたい場合オプション */
.wrr-breadcrumb {
  margin-top: 5px !important;
}




/* ============================================================================
ナビ追従説明テキスト下とメインコンテンツエリアとの余白を狭める　　　ここまで
============================================================================== */




/* スマホ専用：パンくずの下に余白を追加 */
@media screen and (max-width: 768px) {
  .wrr-breadcrumb {
    margin-bottom: 14px !important;   /* お好みで 10〜20px */
  }
}






/* ========================================================================================================
【アダルト漫画人気ランキング】【同人誌週間人気ランキング】サムネイル最適化　スマホ幅に合わせ1位から3位表示
==========================================================================================================*/

@media screen and (max-width: 768px) {

  /* 各ランキングアイテムを3カラム化 */
  .ga4-horizontal-ranking .ga4-item {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 4px !important;
  }

  /* JS がつけた高さ・アスペクト比を完全に無効化する */
  .ga4-horizontal-ranking .ga4-image-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  /* ★ これが最重要（JSの object-fit:cover + height:100% を破壊） */
  .ga4-horizontal-ranking .ga4-image-wrapper img {
    width: 100% !important;
    height: auto !important;         /* ← 高さの固定を完全解除 */
    object-fit: contain !important;  /* ← cover を contain に変更（3枚入るように） */
    display: block !important;
  }

}




/* ========================================================================================================
【アダルト漫画人気ランキング】【同人誌週間人気ランキング】サムネイル最適化　スマホ幅に合わせ1位から3位表示
==========================================================================================================*/









/* ============================================================================
投稿本文入力を自動でボックス化　functionphpにも記載済み
============================================================================== */


/* WRRオリジナルレビューBOX（薄いベージュ） */
.wrr-box {
  background: #fffaf0; /* 薄いベージュ（上品） */
  border: 1px solid #e6d9b8; /* 柔らかいゴールド系ベージュの枠線 */
  padding: 18px 22px;
  border-radius: 12px;
  margin: 25px 0;
  color: #444;
  font-size: 16px;
  line-height: 1.8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04); /* 高級出版社サイト風の薄い影 */
}




/* ==============
【スマホ版】
================== */
@media screen and (max-width: 768px) {
  .wrr-box {
    font-size: 15px;
    line-height: 1.7;
  }
}




/* 【PC限定】だけレビューBOXの横幅を狭くして中心寄せ */
@media screen and (min-width: 1025px) {
  .wrr-box {
    max-width: 720px;   /* ← 読みやすい幅 */
    margin: 0 auto;     /* 横中央寄せ */
    padding: 28px 36px; /* 左右にゆとり */
  }
}


/* ============================================================================
投稿本文入力を自動でボックス化　functionphpにも記載済み　　　　　ここまで
============================================================================== */



/* =====================================================================
 【PCのみ】サンプル画像は見やすく読みやすく880pxの可読幅⁺中央寄せ
======================================================================== */



/* PCだけサンプル画像の最大幅を制限して中央寄せ */
@media (min-width: 1025px) {
  .sample-item img {
    max-width: 880px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* サンプル画像全体の中央寄せ調整用 */
  .sample-item {
    display: flex;
    justify-content: center;
  }
}


/* ==========================================================================
 【PCのみ】サンプル画像は見やすく読みやすく880pxの可読幅⁺中央寄せ　ここまで
============================================================================= */













/* ======================================================================================================
【スマホ】　スマホタップ時にキャラの周りの四角いフォーカス枠を消す　青い囲み線出る問題を解消する
=========================================================================================================*/



/* ▼ タップ時の青い枠を完全に無効化する */
.bottom-character,
.bottom-character:focus,
.bottom-character:active,
.bottom-character img,
.bottom-character img:focus,
.bottom-character img:active {
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-focus-ring-color: rgba(0,0,0,0) !important;
  box-shadow: none !important;
}




/* ============================================================================================================
【スマホ】　スマホタップ時にキャラの周りの四角いフォーカス枠を消す　青い囲み線出る問題を解消する　　ここまで
===============================================================================================================*/















/* =========================================================
【PC】WRRのようこそ吹き出し文＋キャラ中央配置＋背景つき
=============================================================*/

/* ▼ 親コンテナ（PCでも背景色をつけて中央に配置） */
.wrr-welcome-container {
  background: #fffaf5;
  border-radius: 16px;
  padding: 25px 30px;
  margin: 25px auto 35px;   /* 上下は控えめの余白 */
  max-width: 900px;         /* PCで横長になりすぎないように */
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* ▼ 内部レイアウト（横並び・中央揃え） */
.wrr-welcome {
  display: flex;
  justify-content: center;  /* ←★中央揃えの決め手★ */
  align-items: flex-start;   /* ← 吹き出しとキャラの上端を揃える */
  gap: 30px;
  margin: 0;                /* ←コンテナに余白を任せるためリセット */
}



/* ▼ 吹き出し */
.wrr-balloon {
  position: relative;
  max-width: 420px;
  background: #fff7f5;
  border: 2px solid #f1d7cf;
  padding: 20px 22px;
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: #444;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);

}






/* ▼ 吹き出しの三角（右側のキャラ方向） */
.wrr-balloon:before {
  content: "";
  position: absolute;
  right: -12px;
  top: 38px;
  border-width: 12px 0 12px 14px;
  border-style: solid;
  border-color: transparent transparent transparent #f1d7cf;
}

.wrr-balloon:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 40px;
  border-width: 10px 0 10px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #fff7f5;
}

/* ▼ キャラ画像（PC向けサイズ） */
.wrr-welcome img {
  width: 180px;
  height: auto;
  pointer-events: none;
  user-select: none;
}





/* ================================================================
【スマホ】WRRのようこそ吹き出し文＋キャラ右側（完全版）
====================================================================*/

@media screen and (max-width: 768px) {

  /* ▼ 全体最適化（横並び維持） */
  .wrr-welcome {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px !important;  /* ← 吹き出し横幅拡張後にバランス調整 */
    margin: 2px 0 2px;
    background: transparent;
  }

  /* ▼ 吹き出し本体（横幅を広げて縦長解消） */
  .wrr-balloon {
    max-width: 70% !important;  /* ← ★ これが決定版：幅広く自然に */
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;

    /* 下げる調整は維持（上が詰まらないように） */
    margin-top: 5px !important;
  }

  /* ▼ 三角の位置（吹き出しが広がったので同期調整） */
  .wrr-balloon:before,
  .wrr-balloon:after {
    top: 34px !important;
  }

  /* ▼ キャラ画像（吹き出し幅増のため少し小さく） */
  .wrr-welcome img {
    width: 95px !important;
    height: auto;
  }
}


/* ▼ 吹き出し＋キャラ全体の背景（スマホ + PC共通） */
.wrr-welcome-container {
  background: #fffaf5;
  border-radius: 14px;
  padding: 2px 10px;
  margin: 0 auto 10px;
}

/* ▼ 内部レイアウトの透明化（共通） */
.wrr-welcome {
  background: transparent !important;
}



/* 【スマホ】セクシャル×総合エンタメサイトのフォントサイズ.wrr-welcome-headlineクラス*/
@media screen and (max-width: 768px) {
  .wrr-welcome-headline,
  body .wrr-welcome-headline,
  .entry-content .wrr-welcome-headline,
  .content .wrr-welcome-headline,
  article .wrr-welcome-headline,
  #main .wrr-welcome-headline {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
    display: block !important;

    /* ▼ ここが 改行禁止 1行表示 の決め手 */
    white-space: nowrap !important;
  }
}




/* 安らぎ空間 WRRの世界へようこそ  .wrr-welcome-textセクシャルとは別クラス */

@media screen and (max-width: 768px) {
  .wrr-welcome-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 4px 0 5px !important;
    text-align: center !important;
    display: block !important;
	margin-top: 15px !important;  
  }

  .wrr-balloon {	
	  top: 33px !important;  /* 数値を小さくすると上に移動する */
    position: relative !important;
  }
}




/* ================================================================
【スマホ】WRRのようこそ吹き出し文＋キャラ右側（完全版）
====================================================================*/












/* ====================================================================
【PC】 WRRのようこそ吹き出し文＋キャラ右側（ベース）
=======================================================================*/

/* ▼ 親コンテナ（PC） */
@media screen and (min-width: 769px) {
  .wrr-welcome-container {
    background: #fffaf5;
    border-radius: 16px;
    padding: 25px 30px;
    margin: 25px auto 35px;
    max-width: 900px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  }

  /* ▼ 内部レイアウト（PC横並び） */
  .wrr-welcome {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin: 0;
  }

  /* ▼ 吹き出し（PC） */
  .wrr-balloon {
    max-width: 420px;
    background: #fff7f5;
    border: 2px solid #f1d7cf;
    padding: 20px 22px;
    border-radius: 14px;
    font-size: 17px;
    line-height: 1.65;
    color: #444;
    box-shadow: 0 3px 6px rgba(0,0,0,0.06);

  }

  /* ▼ 三角（PC） */
  .wrr-balloon:before {
    content: "";
    position: absolute;
    right: -12px;
    top: 38px;
    border-width: 12px 0 12px 14px;
    border-style: solid;
    border-color: transparent transparent transparent #f1d7cf;
  }

  .wrr-balloon:after {
    content: "";
    position: absolute;
    right: -10px;
    top: 40px;
    border-width: 10px 0 10px 12px;
    border-style: solid;
    border-color: transparent transparent transparent #fff7f5;
  }

  /* ▼ キャラ（PC） */
  .wrr-welcome img {
    width: 180px;
    height: auto;
    pointer-events: none;
    user-select: none;
  }
}



/* 【PC】セクシャル×総合エンタメサイトフォント位置*/
@media screen and (min-width: 769px) {
  .wrr-welcome-headline,
  .entry-content .wrr-welcome-headline,
  .content .wrr-welcome-headline {
    font-size: 22px !important;   /* ← PC用フォントサイズ */
    margin-bottom: 8px !important;
    display: block !important;
  }
}


/* PC：安らぎ空間 WRRの世界へようこそ */
@media screen and (min-width: 769px) {
  .wrr-welcome-text {
    font-size: 20px !important;   /* ← お好みで調整可能（推奨24〜28） */	
    line-height: 1.6 !important;
    margin: 6px 0 18px !important; /* 上 6px / 下 18px（黄金比でバランス良） */
    text-align: center !important;
    display: block !important;
  }
}
	  



/* PCだけ吹き出しの位置を上に移動 */
@media screen and (min-width: 769px) {
  .wrr-balloon {
    top: -45px !important;  /* 数値を小さくすると上に移動する */
    position: relative !important;
  }
}


/* ==================================================================================
【PC】キャッチコピー（セクシャル×癒し×総合エンタメサイト）フォント調整　ここまで
====================================================================================*/

 


/* ===========================================================================================
【PCのみ】吹き出し＋キャラの位置（セクシャル×癒し×総合エンタメサイト）フォント調整　
=============================================================================================*/

@media screen and (min-width: 769px) {
  .wrr-balloon {
    position: relative !important;  
    top: -75px !important;          /* ← 上方向移動は現状維持 */
    margin-left: 70px !important;   /* ← ★ これだけで吹き出しが右へ移動 */
	 color: #a66e4a;   
  }
}



/* ====================================================================================================
【PCのみ】吹き出し＋キャラの位置（セクシャル×癒し×総合エンタメサイト）フォント調整　　　　ここまで
======================================================================================================*/












/* ===================================================================================================
くつろぎ空間～を囲っている二重外枠【PC・スマホ共通】    CV領域と同じ手法「外側ふんわり枠」　　
   =================================================================================================== */


.wrr-welcome-container {
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.90)
    ),
    url('https://stat.ameba.jp/user_images/20230930/23/migomigo7/64/76/j/o100010015344921455.jpg')
      repeat-y center top / 100% auto;

  border: 3px solid #ffffff;
  border-radius: 14px;
  padding: 28px;
  margin: 0px auto;
  max-width: 900px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background-blend-mode: lighten;
}


/* ============================================================
   「内側ふんわり白レイヤー」（PC、スマホ共通）
   ============================================================ */
.wrr-welcome-inner {
  background: rgba(255, 255, 255, 0.78); /* ふんわり見える白 */
  border-radius: 12px;
  border: 2px solid rgba(255, 220, 200, 0.55); /* 優しい桃色の枠線 */
  padding: 25px 22px;

  /* 内側ぼかしシャドウ：CV領域と同質感 */
  box-shadow:
      inset 0 0 18px rgba(255, 200, 170, 0.12),
      0 2px 6px rgba(255, 150, 120, 0.07);
}


/* =========================================
 【スマホ】
  ==========================================*/
@media screen and (max-width: 768px) {

  .wrr-welcome-container {
    padding: 10px 14px;
    margin: 1px auto 1px; 
	 max-width: 340px;  /*スマホの外側枠の幅*/
  }

  .wrr-welcome-inner {
    padding: 18px 14px;

    /* スマホで枠が消える問題を防止 */
    border: 2px solid rgba(255, 190, 170, 0.75); 
    background: rgba(255, 255, 255, 0.83);
    box-shadow:
        inset 0 0 14px rgba(255, 190, 160, 0.18),
        0 1px 4px rgba(255, 150, 120, 0.08);
  }
}





/* ------------------------------------------------------------
   ★ 内枠ふわふわ強化バージョン（CV領域の質感をさらに柔らかく）
------------------------------------------------------------ */
.wrr-welcome-inner {
  background: rgba(255,255,255,0.70);     /* ← 少し透明度を上げて溶ける感じに */
  border-radius: 16px;

  /* ★ 線をさらに淡く、限界近くの優しい色に */
  border: 1px solid rgba(255, 180, 160, 0.22);

  padding: 22px 28px;

  /* ★ ふわっと広がる柔らかい光の影（ここがキモ） */
  box-shadow:
    0 0 18px rgba(255, 170, 150, 0.18),   /* ← 半径広めの霞の光 */
    0 4px 10px rgba(255, 150, 130, 0.10), /* ← 下方向の自然影 */
    inset 0 0 25px rgba(255, 200, 180, 0.18); /* ← 内側からの光のにじみ */
}



/* ===================================================================================================
くつろぎ空間～を囲っている二重外枠【PC・スマホ共通】    CV領域と同じ手法「外側ふんわり枠」　ここまで　　
   =================================================================================================== */






/* =======================================
くつろぎ空間ようこそ文のハートの色　　
   ======================================= */

/*  ハートマーク ピンク色 */
.heart:before {
  color: #ff7fbf !important;
}


/*  ♡ハートマーク */
.heart:before {
  color: #ff7fbf !important;
  font-size: 10px; /* PCベストサイズ */
  margin-left: 4px;
}

/* スマホ ハートマーク */
@media screen and (max-width: 768px) {
  .heart:before {
    font-size: 12px;
	margin-left: 3px;  
  }
}


/* =============================================
くつろぎ空間ようこそ文のハートの色　　ここまで
   ============================================= */



/* ======================================================
くつろぎ空間ようこそのボックス(吹き出し)の2重囲いの色
   ====================================================== */

.wrr-welcome-container {
  background: #fff8f4 !important;
}

.wrr-welcome-inner {
  background: #fff8f4 !important;
}


/* =================================================================
くつろぎ空間ようこそのボックス(吹き出し)の2重囲いの色　　ここまで
   ================================================================= */



/* ========================================================================================
安らぎ空間・WRRの世界へようこそセクションの外、ボックスの外の薄ピンク背景
   ======================================================================================== */

body.home #main,
body.home #main-in,
body.home #content {
    background: #fff8f4 !important;
}

/* ========================================================================================
安らぎ空間・WRRの世界へようこそセクションの外、ボックスの外の薄ピンク背景　　　ここまで
   ======================================================================================== */











/* ============================================================
  キャッチコピー　見出し　（吹き出し外）
============================================================ */

/* 見出しを flex の外に独立させ、100%幅で中央寄せ */
.wrr-welcome-headline {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 auto 22px auto !important; /* 下に余白、左右中央 */
  padding: 0 10px;
  z-index: 2;
}

/* 吹き出し＋キャラを flex グループとして明確に区切る */
.wrr-welcome {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  position: relative;
  text-align: left; /* ← 吹き出し内の自然な左寄せ */
}

 /* ▼ キャラのサイズ調整 */
  .wrr-welcome img {
    width: 250px !important;
    height: auto !important;
  }

/* スマホでは縦並びに */
@media screen and (max-width: 768px) {
  .wrr-welcome {
    flex-direction: column !important;
    gap: 5px;
    text-align: center;
  }

  .wrr-welcome-headline {
    font-size: 15px;
    margin-bottom: 5px !important;
  }
}

/* ================================================
キャッチコピーの見出し（吹き出し外）　ここまで
   ================================================ */





/* =======================================================================================================
【スマホ】キャッチコピーは独立、吹き出し＋キャラだけ横並び　 セクシャル領域とアダルト漫画エリア、同人エリアの吹き出し共通
=========================================================================================================*/

@media screen and (max-width: 768px) {

  /* ▼ キャッチコピー（これを巻き込まない＝絶対に触らない） */
  .wrr-welcome-headline {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* ▼ 吹き出し＋キャラだけ横並び（最重要） */
  .wrr-welcome {
    display: flex !important;
    flex-direction: row !important;  /* ←横並び固定 */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* ▼ 吹き出しの幅調整 */
  .wrr-balloon {
    width: 60% !important;
    max-width: 240px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
	position: relative !important;
    top: 15px !important;   /* ← 上に移動（数字はお好みで） */ 
  }

 
}


/* =================================================
【強制上書き：アダルト漫画WELCOMEキャラ】
================================================= */

/* PC */
@media screen and (min-width: 769px) {
  body .wrr-welcome > img {
    width: 230px !important;
    height: auto !important;

    position: relative !important;
    left: 40px !important;   /* ← 右に大きく動かす */
    top: -20px !important;   /* ← 上に動かす */
    max-width: none !important;
  }
}

/* PCすぐ上のキャラ位置が効かないのでtransformで回避 */
@media screen and (min-width: 769px) {
  .wrr-welcome img {
    transform: translateX(-50px) !important;
  }
}


/* ================================================================================================
※※※※※※※【スマホ】アダルト漫画｜｜同人誌｜セクションのキャラサイズ位置※※※※※※※
================================================================================================== */

@media screen and (max-width: 768px) {
body .wrr-welcome > img {
    width: 150px !important;
    height: auto !important;

    position: relative !important;
    left: -20px !important;   /* ← 横移動 */
    top: 0px !important;     /* ← 縦移動 */
    max-width: none !important;
  }
}

/* ================================================================================================
※※※※※※※【スマホ】アダルト漫画｜｜同人誌｜セクションのキャラサイズ位置※※※※※※※
================================================================================================== */

/* =========================================================================================================
【スマホ】 キャッチコピーは独立、吹き出し＋キャラだけ横並び　　セクシャル領域とアダルト漫画エリア、同人エリアの吹き出し共通　 
=========================================================================================================== */







/* ========================================================
   WRR キャラ紹介ページのデザイン /characters/
=========================================================== */

/* ページ全体の包み */
.wrr-characters-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* h1（ページタイトル） */
.wrr-ch-title {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px; /* ← 重なり防止の最重要 */
    font-size: 32px;
    color: #666;
    font-weight: 700;
}


/* セクション説明（WRRをご案内～） */
.chars-top {
    text-align: center;
    margin-bottom: 40px;
}

.chars-top h2 {
    font-size: 24px;
    color: #777;
    margin-bottom: 10px;
}

.chars-top p {
    font-size: 16px;
    color: #5c4d57;
}


/* キャラ一覧ボックス */
.wrr-char-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* キャラ同士の間隔 */
}

/* 各キャラの枠 */
.wrr-char-box {
    text-align: center;
}

.wrr-char-box img {
    width: 250px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    animation: fadeUp 0.6s ease-out;
}

/* 名前 */
.wrr-char-box h2 {
    font-size: 26px;
    color: #46324a;
    margin-bottom: 10px;
}

/* 説明文 */
.wrr-char-box p {
    font-size: 15px;
    color: #5c4d57;
    line-height: 1.7;
}

/* フワッと浮くアニメーション */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}






.wrr-charlink {
    text-align: center;
    margin-top: 6px;
    margin-bottom: 10px;
}

.wrr-charlink a {
    font-size: 14px;
    color: #3366cc;
    text-decoration: none;
}

.wrr-charlink a:hover {
    text-decoration: underline;
}




/* ============================================
【スマホ】 WRR キャラ紹介ページ
============================================ */
@media screen and (max-width: 768px) {

  /* ページ全体 */
  .wrr-characters-page {
      padding: 0 15px;
  }

  /* h1 タイトル */
  .wrr-ch-title {
      font-size: 15px;
      margin-top: 25px;
      margin-bottom: 20px;
      line-height: 1.4;
  }

  /* グラデーションライン */
  .wrr-title-gradient {
      height: 4px;
      margin: -3px auto 25px;
  }

  /* セクション説明 */
  .chars-top h2 {
      font-size: 14px;
      margin-bottom: 8px;
  }

  .chars-top p {
      font-size: 14px;
      padding: 0 10px;
      line-height: 1.5;
  }

  /* キャラ一覧（キャラどうしの間隔） */
  .wrr-char-list {
      gap: 20px;
  }

  /* 各キャラブロック */
  .wrr-char-box img {
      width: 200px;
      max-width: 80%;
      margin-bottom: 15px;
  }

  .wrr-char-box h2 {
      font-size: 20px;
      margin-bottom: 8px;
  }

  .wrr-char-box p {
      font-size: 14px;
      line-height: 1.6;
      padding: 0 10px;
  }

  /* キャラリンク */
  .wrr-charlink a {
      font-size: 13px;
  }
}



/* ========================================================
   WRR キャラ紹介ページのデザイン /characters/   ここまで
=========================================================== */









/* ========================================================
プライバシーポリシーテキスト　　footerエリア
=========================================================== */

/* フッタープライバシーポリシー */
.footer-privacy {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.footer-privacy a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
}






/* スマホ */
@media screen and (max-width: 768px) {
    .footer-privacy {
        margin-top: 14px;
        margin-bottom: 10px;
    }

    .footer-privacy a {
        font-size: 14px;
        color: #666;
    }
}


/* ========================================================
プライバシーポリシーテキスト　　footerエリア
=========================================================== */














/* ==============================================================
   アダルト漫画エリア説明文付きセクション ヘッドライン
============================================================== */

.wrr-area-headline {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #c33; /* 赤系でカテゴリ感を出す */
  padding-top: 8px;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .wrr-area-headline {
    font-size: 16px;
    margin-bottom: 8px;
	margin-top: -10px !important;  
  }
}


/* ================================================================
   アダルト漫画エリア説明文付きセクション ヘッドライン   ここまで
================================================================== */







/* ==============================================================
   同人誌エリア説明文付きセクション ヘッドライン（青）
============================================================== */

.wrr-area-headline-doujin {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #3366cc; /* ← 青系に変更 */
  padding-top: 8px;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .wrr-area-headline-doujin {
    font-size: 16px;
    margin-bottom: 8px;
	margin-top: -10px !important;  
  }
}


/* ==============================================================
   同人誌エリア説明文付きセクション ヘッドライン（青）　ここまで
================================================================= */







/* ===================================================================================
     セクシャル×総合エンタメサイトの下線専用
   =================================================================================== */
/* PC（共通） */
.wrr-title-berry-short {
  width: 45%;
  height: 8px;
  border-radius: 2px;
  margin: 6px auto;   /* ←中央寄せ */
  background: linear-gradient(
    90deg,
    #f9c5d1 0%,
    #fad0c4 15%,
    #f1f0b6 30%,
    #b8f2e6 50%,
    #b4d4fa 70%,
    #d8c5f1 85%,
    #f9c5d1 100%
  );
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

/* スマホ */
@media screen and (max-width: 768px) {
  .wrr-title-berry-short {
    width: 98% !important;        /* ←スマホは少し幅広 */
    height: 2px !important;
    margin: 4px auto !important;   /* ←中央寄せの鍵！ */
    border-radius: 2px !important;
  }
}

/* ===================================================================================
     セクシャル×総合エンタメサイトの下線専用
   =================================================================================== */








/* ===========================================================
   WRR BEST QUALITY ロゴ　　【作品評価の目安の直上】
   =========================================================== */

.wrr-bestquality {
    width: 100%;
    text-align: center;
    margin: 10px 0 8px 0; /* 上30px 下10px */
}

.wrr-bestquality img {
    width: 140px;     /* PC表示用：小さめに美しく */
    height: auto;
    opacity: 0.95;    /* 少しなじませる、高級感 */
    transition: opacity 0.3s ease;
}

.wrr-bestquality img:hover {
    opacity: 1;
}



/* ======================================
   スマホ（〜768px）
   ====================================== */
@media screen and (max-width: 768px){

    /* ロゴボックス自体の上下マージン */
    .wrr-bestquality {
        margin: 10px 0 10px 0 !important;
        display: block;          /* collapse対策 */
    }

    /* スマホ時のロゴサイズ */
    .wrr-bestquality img {
        width: 100px !important; 
        height: auto !important;
        display: inline-block;   /* collapse対策 */
    }
}


/* ===========================================================
   WRR BEST QUALITY ロゴ　　【作品評価の目安の直上】　ここまで
   =========================================================== */






/* ===========================================================
キャラクター紹介はこちら　テキストリンク
   =========================================================== */


/* キャラ紹介リンク：画像の下専用に独立させる */
.wrr-character-link-wrap {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    display: block;
    position: relative; /* flex干渉を切るため */
}

.wrr-character-link {
    font-size: 15px;
    letter-spacing: 1px;
    color: #d48ac8;
    text-decoration: none;
    padding: 3px 6px;
    display: inline-block;
    transition: opacity .2s ease;
    white-space: nowrap;     /* ← 改行禁止 */
    display: inline-block;   /* ← 幅を確保して折り返し防止 */
}

.wrr-character-link:hover {
    opacity: 0.75;
}

/* スマホ */
@media (max-width: 768px) {
    .wrr-character-link {
        font-size: 14px;
    }
}


/* ===========================================================
キャラクター紹介はこちら　テキストリンク　　こちら
   =========================================================== */














/* =========================================================================================================================
【スマホ】スマホで吹き出しが潰れず、右寄せが安定する　「吹き出し＋キャラ」の位置　アダルト漫画(赤)、同人誌(青)　共通クラス
============================================================================================================================ */

@media screen and (max-width: 768px) {

  /* ▼ 吹き出し＋キャラを横並び＆右寄せにする */
  .wrr-welcome {
    display: flex !important;
    flex-direction: row !important; 
    align-items: flex-start !important; /*  これ最重要 */
    width: 100% !important;
    flex-wrap: nowrap !important;
	 justify-content: flex-start !important;  /*  これ最重要 */
    gap: 1px !important;  
  }

  /* ▼ 吹き出し（潰れ防止） */
  .wrr-balloon {
    width: 58% !important;
    min-width: 170px !important;
    max-width: 240px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin-left: 1px !important;  /* ▼ 吹き出しだけ右に寄せる */
  }

  /* ▼ キャラ画像 */
  .wrr-welcome img {
    width: 118px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* ▼ キャッチコピー */
  .wrr-welcome-headline {
    display: block !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    font-size: 15.5px !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }
}



/* ==============================================================================================================================
【スマホ】スマホで吹き出しが潰れず、右寄せが安定する「吹き出し＋キャラ」の位置　アダルト漫画(赤)、同人誌(青)　共通クラス　ここまで
================================================================================================================================= */









/* ================================================================================
キャラクター紹介の詳しくはこちら マリナのセクシャル×総合エンタメサイト領域
 ================================================================================ */

.wrr-character-top-link-wrap {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    display: block;
    position: relative;
}

.wrr-character-top-link {
    font-size: 15px;
    letter-spacing: 1px;
    color: #2c6fdd;  /* ← 通常の青リンクに寄せる */
    text-decoration: underline;
    padding: 3px 6px;
    display: inline-block;
    transition: opacity .2s ease;
    white-space: nowrap;
}

.wrr-character-top-link:hover {
    opacity: 0.75;
}

/* スマホ */
@media (max-width: 768px) {
    .wrr-character-top-link {
        font-size: 14px;
    }
}

/* =========================================================================================
 キャラクター紹介の詳しくはこちら マリナのセクシャル×総合エンタメサイト領域    ここまで
 ============================================================================================ */








/* ===============================================
   キャラ紹介ページ レイアウト  縦長を圧縮
================================================== */

/* ★ キャラボックス全体の基本調整 */
.wrr-char-box {
    padding: 0;
    margin-bottom: 40px; /* ここでキャラ間の間隔調整も可能 */
    text-align: center;
}

/* ★ キャラ画像（PC） */
.wrr-char-box img {
    max-width: 260px;
    height: auto;
    margin-bottom: 0px !important;
    margin-top: 0 !important;
}

/* ★ h2（キャラ名）の余白を削る */
.wrr-char-box h2 {
    font-size: 20px;
    margin: 0px 0 0px 0 !important;
    padding: 0 !important;
}

/* ★ 説明文（p） */
.wrr-char-box p {
    line-height: 1.55;
    font-size: 15px;
    margin: 0 auto 2px auto;
    max-width: 620px; /* 読みやすい横幅に制御 */
}


/* ===========================
   ▼ スマホ最適化（必須）
=========================== */
@media screen and (max-width: 768px) {

  .wrr-char-box img {
      max-width: 180px !important; /* スマホでは少し小さめが美しく見える */
      margin-bottom: 4px !important;
  }

  .wrr-char-box h2 {
      font-size: 18px;
      margin: 2px 0 4px 0 !important;
  }

  .wrr-char-box p {
      font-size: 14px;
      line-height: 1.45;
      margin-bottom: 10px;
      padding: 0 10px; /* 画面端の余白を確保して読みやすく */
  }
}


/* ===============================================
   キャラ紹介ページ レイアウト  縦長を圧縮
================================================== */


/* ======================================================
   キャラ紹介ページ 紹介文の背景うすピンク
========================================================= */

/* キャラ紹介文のやわふわ背景 */
.wrr-char-box p {
  background: rgba(255, 182, 193, 0.15); /* うすピンク */
  padding: 14px 18px;
  border-radius: 10px;
  line-height: 1.7;
  margin-top: 10px;
  color: #444;
}


/* ======================================================
   キャラ紹介ページ 紹介文の背景うすピンク　ここまで
========================================================= */
















/* ============================
   最新アダルト漫画・最新同人誌 用カラー
   ============================ */

/* アダルト漫画（赤） */
.manga-color {
  color: #e65a6e !important;       /* 派手すぎず上品な赤 */
  font-weight: 700 !important;
}

/* 同人誌（青） */
.doujin-color {
  color: #4a88ff !important;       /* キャラ色に合う爽やかな青 */
  font-weight: 700 !important;
}








/* ==================================================
      シリーズページの人気の箇所のみ「赤」カラー
   ================================================== */

.series-color {
  color: #e65a6e !important;       /* 派手すぎず上品な赤 */
  font-weight: 700 !important;
}






/* ==========================================
      tagページの人気の箇所のみ「赤」カラー
   ========================================== */


.tag-color {
  color: #e65a6e !important;       /* 派手すぎず上品な赤 */
  font-weight: 700 !important;
}


/* ==========================================
      genreページの人気の箇所のみ「赤」カラー
   ========================================== */

.genre-color {
  color: #e65a6e !important;       /* 派手すぎず上品な赤 */
  font-weight: 700 !important;
}








/* ======================================================
   全ページ共通：背景色をトップページと統一する
   （Cocoonテーマが上書きする白背景をすべて解除）
========================================================= */


html, body,
body[class],
body.custom-background {
  background: #fff8f4 !important;
}

/* Cocoon が上から白で塗る領域を全部ピンクに統一 */
#content,
#content-in,
#main,
#main .main,
.wrap,
.container,
.article,
.entry-content,
.main,
.content,
.content-in {
  background: #fff8f4 !important;
}




/* ======================================================
   全ページ共通：背景色をトップページと統一する
   （Cocoonテーマが上書きする白背景をすべて解除）　ここまで
========================================================= */






/* =====================================================
   履歴・お気に入り（header-icons）フォント調整
===================================================== */

.header-icons .icon {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif !important;
  font-size: 15px !important;
  font-weight: 550 !important;
  color: #333 !important;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

/* 画像との余白を整える */
.header-icons .icon-img {
  width: 20px;
  height: auto;
  margin: 0 4px 0 6px;
}


/* =====================================================
   履歴・お気に入り（header-icons）フォント調整
===================================================== */






/* ======================================================
【PC】   ランキング大見出し
====================================================== */

.ranking-bigtitle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #777 !important;
  gap: 6px !important;
  margin: 10px 0 12px !important;
  text-align: center !important;
	letter-spacing: 0.03em;
}

/* 赤文字（アダルト） */
.ranking-bigtitle .manga-color {
  color: #ff4d6a !important;
  font-weight: 700 !important;
}

/* NEWアイコン */
.ranking-bigtitle .title-icon {
  width: 45px !important;
  height: auto !important;
  margin-left: 4px !important;
}




/* ======================================================
   【スマホ】ランキング大見出し
====================================================== */

@media screen and (max-width: 768px) {

  /* h2固有指定でCocoonの強制h2ルールを上書き */
  h2.ranking-bigtitle {
    font-size: 16px !important;   /* ←全体のフォントサイズ（調整OK） */
    line-height: 1.3 !important;
    gap: 4px !important;
    margin: 18px 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* “アダルト” の赤い部分（必要なら別サイズに可変） */
  h2.ranking-bigtitle .manga-color {
    font-size: 16px !important;  /* ←同じにしたいなら16のままでOK */
    font-weight: 700 !important;
  }

  /* NEWアイコン（スマホ軽量版） */
  h2.ranking-bigtitle .title-icon {
    width: 38px !important;
    margin-left: 2px !important;
    margin-top: 1px !important;
  }
}

/* ======================================================
【PC】   ランキング大見出し           ここまで
====================================================== */













/* ============================================================
【PC】         TOPページへセクション
============================================================ */

.top-page-box {
  width: 100%;
  max-width: 1050px;
  margin: 40px auto 60px;
  padding: 45px 0 50px;
  background: #fff8f4;
  border: 2px solid #f1e4e8;
  border-radius: 18px;
  position: relative;
  box-sizing: border-box;
}

/* サイトロゴ */
.top-page-box .gashitu-icon-new {
  display: block;
  width: 200px;
  margin: 0 auto 20px;
}

/* 見出し */
.top-page-link-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #555;
  margin-bottom: 10px;
}

/* 説明文 */
.top-page-description {
  text-align: center;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* ボタン横並び */
.top-page-box .ranking-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 30px;
}

/* ボタン本体 */
.top-page-box .ranking-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  padding: 12px 0;
  background: #fff;
  border: 1px solid #e0dcd2;
  border-radius: 10px;
  font-size: 15px;
  color: #333;
  font-weight: 600;
  transition: 0.25s ease;
  gap: 6px;
}

.top-page-box .ranking-link:hover {
  background: #f7eaf0;
  border-color: #efbfd4;
  color: #c24f6d;
}

/* アイコン */
.top-page-box .ranking-link .play-icon {
  width: 16px;
  height: 16px;
}





/* ============================================================
【PC】         TOPページへセクション       　　　ここまで
============================================================ */






/* ======================================================================
【スマホ】   TOPページへセクション — ボタン幅＆間隔最適化
   （他のセクションには一切影響しない構成）
========================================================================= */

@media screen and (max-width: 768px) {

  /* ▼ TOPページセクションの外枠 */
  body div.top-page-box {
    width: 96% !important;
    max-width: 360px !important;
    margin: 20px auto 35px !important;
    padding: 28px 0 32px !important;
    background: #fff8f4 !important;
    border-width: 1.6px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }


body .top-page-box .top-page-link-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
  }	
	

  /* ▼ 説明文 */
  body div.top-page-box .top-page-description {
    font-size: 13.5px !important;
    margin-bottom: 22px !important;
    padding: 0 14px !important;
    line-height: 1.5 !important;
  }

  /* ▼ ボタンエリア（スマホ2列×2段） */
  body div.top-page-box .ranking-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 18px !important;
  }

  /* ▼ 各ボタン（細め・押しやすい高さ） */
  body div.top-page-box .ranking-link {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    padding: 12px 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #e0dcd2 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* ▼ アイコン（少し小さく） */
  body div.top-page-box .ranking-link .play-icon {
    width: 14px !important;
    height: 14px !important;
  }

}


/* ======================================================================
【スマホ】   TOPページへセクション — ボタン幅＆間隔最適化
   （他のセクションには一切影響しない構成）
========================================================================= */











/* =======================================================================
 トップページの同人誌エリア　同人誌ページへのテキストリンク
========================================================================== */

/* ▼ テキストリンクを中央寄せする外枠 */
.doujinshi-page-link {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    display: block;
    position: relative; /* flex干渉を防ぐ */
}

/* ▼ 実際のリンクスタイル */
.doujinshi-page-link a {
    font-size: 19px;
    letter-spacing: 1px;
    color: #0066cc;
    text-decoration: none;
    padding: 3px 6px;
    display: inline-block;
    transition: opacity .2s ease;
    white-space: nowrap;           /* 改行禁止 */
	font-weight: 600;
}

.doujinshi-page-link a:hover {
    opacity: 0.75;
}

/* ▼ スマホ（768px以下） */
@media (max-width: 768px) {
    .doujinshi-page-link a {
        font-size: 14px;
		
    }
}



/* ===========================================================
   【スマホ】同人誌ページへのリンクを確実に中央配置
=========================================================== */
@media screen and (max-width: 768px) {

  /* ▼ 親の flex 影響をスマホ時のみ解除（最重要） */
  .wrr-welcome-section,
  .wrr-welcome-container,
  .wrr-welcome-inner {
      display: block !important;
      width: 100% !important;
  }

  /* ▼ 同人誌ページへのリンクを中央へ */
  .doujinshi-page-link {
      width: 100% !important;
      display: block !important;
      text-align: center !important;
      position: relative !important;

      margin: 14px auto 6px !important;
      padding: 0 !important;
      clear: both !important;
      float: none !important;
  }

  /* ▼ aタグをどんな状況でも中央に固定 */
  .doujinshi-page-link a {
      display: inline-block !important;
      margin: 0 auto !important;

      font-size: 15px !important;
      line-height: 1.4 !important;
      padding: 4px 6px !important;
      white-space: nowrap !important;

      position: relative !important;
      left: 0 !important;
      right: 0 !important;
	  font-weight: 700;
  }
}



/* =======================================================================
 トップページの同人誌エリア　同人誌ページへのテキストリンク　　ここまで
========================================================================== */






/* ============================================================================
 トップページのアダルト漫画エリア　アダルト漫画ページへのテキストリンク
=============================================================================== */

/* ▼ テキストリンク外枠（中央寄せ） */
.adarutomanga-page-link {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    display: block;
    position: relative;
}

/* ▼ 一般的な青いリンク色 (#0066cc) */
.adarutomanga-page-link a {
    font-size: 19px;
    letter-spacing: 1px;
    color: #0066cc;            /* ← 標準ブルー */
    text-decoration: none;
    padding: 3px 6px;
    display: inline-block;
    transition: opacity .2s ease;
    white-space: nowrap;
	font-weight: 600;
}

.adarutomanga-page-link a:hover {
    opacity: 0.75;
}

/* ▼ スマホ（768px以下） */
@media (max-width: 768px) {
    .adarutomanga-page-link a {
        font-size: 14px;
		font-weight: 700;
    }
}


/* ===========================================================
   【スマホ】同人誌ページへのリンクを確実に中央配置
=========================================================== */

@media screen and (max-width: 768px) {

  /* ▼ 親 flex の干渉を完全に断つ（最重要） */
  .wrr-welcome-section,
  .wrr-welcome-container,
  .wrr-welcome-inner {
      display: block !important;
      width: 100% !important;
  }

  /* ▼ リンクを確実に「吹き出しの下中央」に固定する */
  .adarutomanga-page-link {
      width: 100% !important;
      display: block !important;
      text-align: center !important;
      position: relative !important;

      margin: 14px auto 6px !important;
      padding: 0 !important;
      clear: both !important;
      float: none !important;
  }

  /* ▼ aタグを中央固定 */
  .adarutomanga-page-link a {
      display: inline-block !important;
      margin: 0 auto !important;

      font-size: 15px !important;
      line-height: 1.4 !important;
      padding: 4px 6px !important;
      white-space: nowrap !important;

      position: relative !important;
      left: 0 !important;
      right: 0 !important;
  }
}



/* ===================================================================================
 トップページのアダルト漫画エリア　アダルト漫画ページへのテキストリンク　　ここまで
====================================================================================== */








/* ===========================================================
ナビ項目のランキング左側、王冠アイコン
   ============================================================ */


.navi-ranking-crown {
  color: #e8c55f !important;
  font-size: 15px !important;
  position: relative !important;
  top: 0px !important;
  margin-left: 3px !important;   /* ← テキストと王冠の間隔 */
  margin-right: 0 !important;
  display: inline-block !important;
}

.navi-ranking-crown i {
  font-size: inherit !important;  /* 親サイズを継承 */
  line-height: 1 !important;
}



/*  スマホ */
@media screen and (max-width: 768px) {
  .navi-ranking-crown {
    font-size: 10px !important;
    top: 0px !important;
    margin-left: 3px !important;
  }
}


/* ===========================================================
ナビ項目のランキング左側、王冠アイコン　　　ここまで
   ============================================================ */








/* ==========================================================================================
   王冠アイコン　　　【アダルト漫画ランキングセクション、同人ランキングセクション】
   =========================================================================================== */

/* PCランキング内の王冠アイコン*/
.ranking-crown,
.ranking-crown::before {
    font-size: 22px !important;
    line-height: 1 !important;
}



/* スマホ */
@media screen and (max-width: 768px) {
    .ranking-crown,
    .ranking-crown::before {
        font-size: 18px !important;
        line-height: 1 !important;
    }
}


/* ==========================================================================================
   王冠アイコン　　　【アダルト漫画ランキングセクション、同人ランキングセクション】 ここまで
   =========================================================================================== */















/* ============================================================================================================
  【クーポンセクションのキャラ】　上からスーッと降りる演出　　　　【 JS 記述済み 】　　  
   =========================================================================================================== */



/* 「上から降りてくる」アニメーション */
.slide-down {
  opacity: 0;
  transform: translateY(-90px); /* ← 40px → 90px に拡大：落下感アップ */
  transition: 
    opacity 1s ease-out 0.2s,   /* 表示は少し遅れて開始（自然） */
    transform 1s cubic-bezier(0.15, 0.75, 0.30, 1); /* 落ちる動きが自然 */
}

.slide-down.active {
  opacity: 1;
  transform: translateY(0);
}




/* ========================================================================================================
   【クーポンセクションのキャラ】上からスーッと降りる演出　　　　　【 JS 記述済み 】　　  ここまで
   ======================================================================================================== */















/* ========================================================================================================
      品質内容セクション、左側キャラ上からスクロールで画面に入った所で上から舞い降りる演出      【 JS 記述済み】 
   ==================================================================================================== */


/*  右からスーッと中央へ（速度ゆったり） */
.slide-right {
  opacity: 0;
  transform: translateX(90px); /* ← 少しだけ遠い位置から自然に */
  transition:
    opacity 1.6s ease-out 0.25s,
    transform 1.6s cubic-bezier(0.20, 0.80, 0.30, 1) 0.25s;
}

.slide-right.active {
  opacity: 1;
  transform: translateX(0);
}




/* =====================================================================================================
  品質内容セクション、左側キャラ上からスクロールで画面に入った所で上から舞い降りる演出 【 JS 記述済み】  ここまで
   ==================================================================================================== */












/* =========================================================================
   足を広げたキャラを中央に大きく配置
============================================================================ */

.wrr-center-character {
  width: 300px;          /* PCで存在感のあるサイズ */
  max-width: 95%;        /* 画面幅に合わせて縮小 */
  display: block;
  margin: 0 auto;        /* 中央寄せ */
  position: relative;
  z-index: 10;
  transform: translateY(-10px); /* 少し上に寄せて自然に */
}


/* ============================================================
 【スマホ】  足を広げたキャラを中央に大きく配置
=============================================================== */
@media screen and (max-width: 768px) {

  .wrr-center-character {
    width: 200px !important;      /* スマホで大きく見せる最適値 */
    max-width: 90% !important;     /* 横幅に合わせて安全に縮小 */
    margin: 0 auto !important;     /* 完全中央寄せ */
	 
    display: block !important;
    transform: translateY(-5px);   /* 少しだけ上に */
    z-index: 10 !important;
  }
}


/* =========================================================================
   　　高評価作品はこちら　足を広げたキャラを中央に大きく配置　　ここまで
============================================================================ */








/* =========================================================================
 【スマホ】  　セクシャル×総合エンタメの箇所のキャラのサイズのみ定義
============================================================================ */
@media screen and (max-width: 768px) {

  /* ▼ 画像を確実に拡大する */
  .wrr-welcome .wrr-welcome-chara img,
  .wrr-welcome img {
    width: 150px !important;    /* ← 好きな大きさに */
    max-width: none !important; /* ← Cocoonの自動縮小を無効化 */
    height: auto !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* ▼ キャラ側の領域も拡大（重要） */
  .wrr-welcome-chara {
    width: 200px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
	
  }
}

/* =========================================================================
   　セクシャル×総合エンタメの箇所のキャラのサイズのみ定義
============================================================================ */

















/* =======================================================================
   同人誌ランキングセクションタイトル箇所のみ青色
========================================================================== */


/* 同人誌ランキングタイトルを絶対に青にする最強セレクタ */

.ranking2-box .ranking2-inner h2.ranking2-title.doujin-collar {
  color: #3399ff !important;
}


/* =======================================================================
   同人誌ランキングセクションタイトル箇所のみ青色　　　　　ここまで
========================================================================== */













/* =======================================================================
 　　TOPページへセクション直ぐ下エリアに中央ロゴ＋両サイドキャラ
========================================================================== */




/* ▼▼ 中央ロゴ＋左右キャラ：配置エリア ▼▼ */
.center-chara-area {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 10px auto;
  text-align: center;
  height: 360px; /* エリアの高さ：キャラが重なるため固定 */
}

/* ▼ 左キャラ ▼ */
.center-chara-left {
  position: absolute;
  left: -120px;       /* 画面外からスタート */
  bottom: 0;
  width: 240px;
  opacity: 0;
  transition: all 1.2s ease-out;
}

.center-chara-left.active {
  left: 0;            /* 中に入ってくる */
  opacity: 1;
}

/* ▼ 右キャラ ▼ */
.center-chara-right {
  position: absolute;
  right: -120px;      /* 画面外からスタート */
  bottom: 0;
  width: 240px;
  opacity: 0;
  transition: all 1.2s ease-out;
}

.center-chara-right.active {
  right: 0;
  opacity: 1;
}

/* ▼ 中央ロゴ（初期状態） ▼ */
.center-chara-logo {
  position: relative;
  z-index: 2;
  width: 180px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease-out 0.3s;
  transform: scale(0.9); /* バウンド開始の初期スケール */
}

/* ▼ ロゴアクティブ時：バウンドアニメーション追加 ▼ */
.center-chara-logo.active {
  opacity: 1;
  animation: wrr-logo-bounce 0.7s ease-out forwards;
}

/* ▼ ロゴのバウンドアニメーション（ポン → 戻り → 安定） ▼ */
@keyframes wrr-logo-bounce {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* ▼ スマホ調整 */
@media (max-width: 768px) {
	
/* エリアの高さ調整 */	
  .center-chara-area {
   height: 215px;
  }

/* 左キャラ 右キャラのサイズ両方一括定義 */	
  .center-chara-left,
  .center-chara-right {
    width: 140px;
  }

  .center-chara-logo {
    width: 120px;
  }
	
}


/* =================================================================================
 　　TOPページへセクション直ぐ下エリアに中央ロゴ＋両サイドキャラ　　　　ここまで
==================================================================================== */







/* =================================================================================
【PC】中央ロゴ＋両サイドキャラのセクション　　　サイト説明文の定義
=================================================================================== */

.wrr-site-description {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 20px;   /* ロゴとの間隔 */
  text-align: center;
  font-size: 17px;
  line-height: 1.8;
  color: #555;
  padding: 18px 10px;
  background: #fff8f4;
  border: 1px solid #e8dcdc;
  border-radius: 12px;

}

/* PCサイト説明下の余白 */
@media screen and (min-width: 769px) {
  .wrr-site-description {
    margin-bottom: 10px;
  }
}


/* =================================================================================
【PC】中央ロゴ＋両サイドキャラのセクション　　　サイト説明文の定義　　　ここまで
=================================================================================== */




/* ==========================================================================================================
【PC】中央ロゴ＋両サイドキャラのセクション　　　サイト説明文の定義の下に余白を追加 　(説明文自体を上に移動させる)
============================================================================================================= */





/* ===================================================================================
【スマホ】中央ロゴ＋両サイドキャラのセクション　　　【サイト説明文の定義】　　　
=================================================================================== */

@media screen and (max-width: 768px) {

  .wrr-site-description {
    max-width: 95%;
    margin: 8px auto 0 !important;  /* ← これだけでOK！上へ詰める */
	margin-bottom: 10px !important;   
    padding: 16px 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    text-align: center !important;
    background: #fff8f4 !important;
    border: 1px solid #e8dcdc !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
	margin-bottom: 10px !important;  
  }

  .wrr-site-description p {
    margin: 0 !important;
    padding: 0 !important;
  }

}


/* ===================================================================================
【スマホ】中央ロゴ＋両サイドキャラのセクション　　　【サイト説明文の定義】　　　ここまで
===================================================================================== */







/* ================================================================================
【PC】両サイドキャラを確実に下へ移動（PCのみ一度transformをリセット上書き）
================================================================================= */


@media screen and (min-width: 769px) {

  .center-chara-left,
  .center-chara-right {
    transform: translateY(0) !important; /* ← これが最重要 */
    bottom: -50px !important;            
  }

}

/* ========================================================================================
【PC】両サイドキャラを確実に下へ移動（PCのみ一度transformをリセット上書き）　　ここまで
=========================================================================================== */







/* ========================================================================================================
【PC】最下部の中央ロゴだけを下に移動させるためクラス付与 .center-chara-logo--lower（専用クラス追加）
========================================================================================================== */

@media screen and (min-width: 769px) {
  .center-chara-logo--lower {
    margin-top: 40px !important; /* ← 値は調整してOK（35〜50px推奨） */
  }
}

/* ========================================================================================================
【PC】最下部の中央ロゴだけを下に移動させるためクラス付与 .center-chara-logo--lower（専用クラス追加）ここまで
========================================================================================================== */






/* =========================================================================================================================
【PC / スマホ共通】中央ロゴを絶対に中央に揃える強制リセット　　※このコードを剥がすとロゴの中央配置がズレるので保持する
============================================================================================================================= */

.center-chara-area .center-chara-logo,
.center-chara-area .center-chara-logo--lower {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform-origin: center center !important;
}


/* =========================================================================================================================
【PC / スマホ共通】中央ロゴを絶対に中央に揃える強制リセット　　※このコードを剥がすとロゴの中央配置がズレるので保持する
============================================================================================================================= */





/* ============================================================
【PCのみ】両サイドキャラをもっと中央へ寄せる
============================================================ */

@media screen and (min-width: 769px) {

  /* 左キャラを中央側へ寄せる（例：80px → お好みで調整） */
  .center-chara-left.active {
    left: 100px !important;
  }

  /* 右キャラも中央側へ寄せる（例：80px → お好みで調整） */
  .center-chara-right.active {
    right: 100px !important;
  }

}


/* ===============================================================
【PCのみ】両サイドキャラをもっと中央へ寄せる　　　ここまで
================================================================== */




















/* ===============================================================
【PC、スマホ共通】両サイドキャラに影を追加　
================================================================== */


/* 左右キャラの足元に、より広く濃い影を追加 */
.center-chara-left,
.center-chara-right {
 filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.25));

}


/* ===============================================================
【PC、スマホ共通】両サイドキャラに影を追加　ここまで
================================================================== */




/* ==========================================================================================================
【スマホ】エントリーカードないの作家は2行まで表示以降…処理　　作家の上下の高さを保持する調整　　【アダルト漫画】
============================================================================================================== */

@media screen and (max-width: 768px) {

  .entry-author {
    font-size: 0.72em !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;

    /* ★ ここから 2行省略（…）の必須セット ★ */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; /* ← 2 行でカット */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;

    max-height: 2.9em !important; /* 1.25 × 2 行 */
  }

  .entry-rating {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }
}




/* ==========================================================================================================
【スマホ】エントリーカード内の作家は2行まで表示以降…処理　　作家の上下の高さを保持する調整　　【アダルト漫画】ここまで
============================================================================================================== */








/* ========================================================================================
  【PC】エントリーカード内 作品タイトル中央寄せ　【アダルト漫画】
======================================================================================== */

/* タイトルの外側ブロックが左寄せされている可能性をゼロにする */
.entry-card .entry-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

/* タイトル内部の <a> も中央揃え */
.entry-card .entry-title a {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Cocoon が上書きしている強制 display:-webkit-box を無効化 */
.entry-card .entry-title {
  display: block !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
}

/* 「テキストが左に詰まる現象」を根本から止める */
.entry-card .entry-title,
.entry-card .entry-title * {
  text-align: center !important;
}



/* ==========================================================================================
  【PC】エントリーカード内 作品タイトル中央寄せ 　　【アダルト漫画】　　　　　　ここまで
============================================================================================= */



/* ==============================================================================================
   【スマホ】エントリーカード内 作品タイトル中央寄せ　　　【アダルト漫画】
============================================================================================== */
@media screen and (max-width: 768px) {

  /* タイトル外側ブロックを中央寄せ用に強制調整 */
  .entry-card .entry-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* スマホは行間が詰まりやすいので調整 */
    line-height: 1.3 !important;
  }

  /* タイトル内のリンクを完全中央寄せ */
  .entry-card .entry-title a {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  /* Cocoon の縦並び強制を OFF（これが効かない最大要因） */
  .entry-card .entry-title {
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
  }

  /* 念押しで子要素にも中央寄せを適用 */
  .entry-card .entry-title,
  .entry-card .entry-title * {
    text-align: center !important;
  }
}


/* ===========================================================================================
   【スマホ】タイトル中央寄せ　　　　　　　　　　　【アダルト漫画】　　　　　ここまで
============================================================================================== */









/* =========================================================================
   【PC】作品タイトル中央寄せ　　　　【同人誌】　
============================================================================ */

/* タイトル外側ブロック */
.video-list-doujin .entry-card .entry-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* Cocoonの強制を打ち消す */
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
}

/* タイトル内のリンク（aタグ）も中央寄せ */
.video-list-doujin .entry-card .entry-title a {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* 子要素すべてに中央寄せ強制 */
.video-list-doujin .entry-card .entry-title,
.video-list-doujin .entry-card .entry-title * {
  text-align: center !important;
}


/* =========================================================================
   【PC】作品タイトル中央寄せ　　　　【同人誌】　　　　　　　ここまで
============================================================================ */



/* =========================================================================
   【スマホ】　　　　　　作品タイトル中央寄せ　　　　【同人誌】　　　　　　　
============================================================================ */

@media screen and (max-width: 768px) {

  .video-list-doujin .entry-card .entry-title {
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .video-list-doujin .entry-card .entry-title a {
    font-size: 0.9em !important;
    line-height: 1.25 !important;
  }

}

/* ==============================================================================
   【スマホ】　　　　　　作品タイトル中央寄せ　　　　【同人誌】　　ここまで　　　　　
================================================================================= */




/* =====================================================================================================================
【スマホ】　エントリーカード内の作家は2行まで表示以降…処理　　      作家の上下の高さを保持する調整　　【同人誌】　
======================================================================================================================== */

@media screen and (max-width: 768px) {
  .video-list-doujin .entry-author {
    font-size: 0.75em !important;
    line-height: 1.25 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; /* ★ スマホは2行まで表示 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;

    max-height: 2.9em !important; 
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }
}





/* ========================================================================================================================
【スマホ】　エントリーカード内の作家は2行まで表示以降…処理　　作家の上下の高さを保持する調整　【同人誌】　ここまで
=========================================================================================================================== */







/* ----------------------------------------------------------
  【PC】   footerエリアのSNSアイコン群
----------------------------------------------------------- */

.wrr-footer-sns {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 5px 0 5px;
}

.wrr-footer-sns img {
  width: 32px;
  height: 32px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.wrr-footer-sns img:hover {
  transform: scale(1.15);
  opacity: 0.9;
}




/* ----------------------------------------------------------
  【PC】   footerエリアのSNSアイコン群　　　　　ここまで
----------------------------------------------------------- */




/* ----------------------------------------------------------
  【スマホ】footerエリアのSNSアイコン群
----------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .wrr-footer-sns {
    gap: 18px;          /* PCと同じぐらいでOK（詰めすぎない） */
    margin: 5px 0 5px;
  }

  .wrr-footer-sns img {
    width: 30px;        /* スマホに最適な上品サイズ */
    height: 30px;
  }

  .wrr-footer-sns img:hover {
    transform: scale(1.08); /* モバイルは控えめに */
  }
}

/* ----------------------------------------------------------
  【スマホ】footerエリアのSNSアイコン群　　　　ここまで
----------------------------------------------------------- */








/* -------------------------------------------------------------------------------------
  ヘッダーナビ項目のランキング直上のnewアイコン
-------------------------------------------------------------------------------------- */

/* NEWバッジの位置とサイズ */
.nav-new-badge {
  position: absolute;
  top: -18px;   /* 上に浮かせる距離 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.nav-new-badge img {
  width: 38px;
  height: auto;
  display: block;
}

/* ふわっと微アニメーション（控えめで上品） */
.nav-new-badge {
  animation: newBadgeFloat 2.8s ease-in-out infinite;
}

@keyframes newBadgeFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}






/* ---------------------------------------------
 スマホ最適化
------------------------------------------------ */
@media screen and (max-width: 768px) {

  /* NEW! アイコンの親 li を基準点にする */
  .simple-menu-list .new-item {
    position: relative;
  }

  /* NEW バッジそのものを下に移動させる */
  .nav-new-badge {
    position: absolute;
    top: 2px;  /* ← ここを変更すれば上下に動く */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  .nav-new-badge img {
    width: 28px;
    height: auto;
  }
}



/* -------------------------------------------------------------------------------------
  ヘッダーナビ項目のランキング直上のnewアイコン　　ここまで
-------------------------------------------------------------------------------------- */








/* ==========================================================================================
    スマホだけ改行　　　PCでは改行させたくない　　　　スマホ専用クラスつき <br>
============================================================================================ */ 

/* PCでは表示しない */
.sp-only {
    display: none;
}

/* スマホ（768px以下）だけ改行を表示 */
@media screen and (max-width: 768px) {
    .sp-only {
        display: inline;
    }
}


/* ==========================================================================================
    スマホだけ改行　　　PCでは改行させたくない　　　　スマホ専用クラスつき <br>
============================================================================================ */ 






/* ==========================================================================================
 【PC,スマホ共通】同人誌ランキングセクションのボタン色
============================================================================================ */


.ranking2-links a.ranking2-link.doujin-ranking-collar {
  background: #eef4ff !important;   /* かなり優しい淡ブルー */
  color: #5b84d6 !important;        /* 少し明るめの青 */
  border-color: #d6e3fa !important; /* 枠も淡い青 */
}



.ranking2-links a.ranking2-link.doujin-ranking-collar:hover {
  background: #e3ecff !important;  
  color: #4a76c9 !important;
  border-color: #c6d7f5 !important;
}


/* ==========================================================================================
 【PC,スマホ共通】同人誌ランキングセクションのボタン色　　　　　　　　　　ここまで
============================================================================================ */







/* ==========================================================================================
 【PC,スマホ共通】アダルト漫画ランキングセクションのボタン色
============================================================================================ */ 


/* アダルト漫画（さらに淡い・透明感あるピンク） */
.ranking2-links a.ranking2-link.manga-ranking-collar {
  background: #fff1f3 !important;     /* ほぼ白に近い極薄ピンク */
  color: #d36a76 !important;          /* 明るめで優しい赤 */
  border-color: #f5d4d8 !important;   /* 透明感のある淡い枠線 */
}

.ranking2-links a.ranking2-link.manga-ranking-collar:hover {
  background: #ffe7ec !important;     /* 少しだけ色が出る淡ピンク */
  color: #c25664 !important;          /* 押し感のある赤 */
  border-color: #ecc4ca !important;   /* やや存在感のある枠線 */
}


/* ==========================================================================================
 【PC,スマホ共通】アダルト漫画ランキングセクションのボタン色　　　　　　　　　　ここまで
============================================================================================ */ 



/* ==========================================================================================
 アダルト漫画高評価ページ と ランキングページのH1を統一 　　　　　【H1タイトル箇所】
============================================================================================ */ 

/* アダルト漫画高評価ページ と ランキングページのH1を統一 */
.rating-page-title,
.page-ranking-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* スマホ調整（必要ならそのまま使える） */
@media screen and (max-width: 768px) {
  .rating-page-title,
  .page-ranking-title {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 4px;
  }
}


/* ===============================================================================================
 アダルト漫画高評価ページ と ランキングページのH1を統一 　　　　　【H1タイトル箇所】　ここまで
================================================================================================= */ 











/* WRRロゴ全体の位置調整 */
.wrr-animated-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px; /* ← 文字間隔（PC） */
    margin-top: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* スマホ用：さらに狭く */
@media (max-width:768px) {
  .wrr-animated-logo {
      gap: 2px;
  }
}

/* WRRの1文字画像がつぶれないよう強制的に縦横比を維持 */
.wrr-letter {
    width: 35px;
    height: auto;
    flex-shrink: 0 !important;   /* ← 横につぶれる最大の原因をブロック */
    aspect-ratio: auto !important; /* ← アスペクト比を固定 */
    object-fit: contain !important; /* ← 変形せず収まる */
}



/* アニメーション開始 */
.wrr-animated-logo.active {
    opacity: 1;
    transform: translateY(0);
}

/* ▼▼ 個別の登場アニメ（回転＋バウンス） ▼▼ */

/* W */
.wrr-animated-logo.active .wrr-W {
    animation: rotateBounce 1.3s ease forwards,
               sparkle 2s ease 1.3s forwards;
}

/* R1 */
.wrr-animated-logo.active .wrr-R1 {
    animation: rotateBounce2 1.3s ease 0.2s forwards,
               sparkle 2s ease 1.5s forwards;
}

/* R2 */
.wrr-animated-logo.active .wrr-R2 {
    animation: rotateBounce3 1.3s ease 0.4s forwards,
               sparkle 2s ease 1.7s forwards;
}


/* ================================================
   キーフレーム：回転＋バウンス（ブランド演出）
   ================================================ */

/* W の動き */
@keyframes rotateBounce {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(-12deg) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) rotate(3deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* R1 の動き */
@keyframes rotateBounce2 {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(14deg) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) rotate(-3deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* R2 の動き */
@keyframes rotateBounce3 {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(-10deg) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) rotate(4deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}


/* ================================================
   キラッと光るエフェクト
   ================================================ */
@keyframes sparkle {
    0%   { filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
    50%  { filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)); }
    100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }
}








/* 文字＋影のラッパー */
.wrr-letter-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 丸い足元影 */
.wrr-shadow {
    width: 42px;
    height: 12px;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.00) 100%
    );
    border-radius: 50%;
    position: absolute;
    bottom: -10px; /* → 影の位置調整 */
    z-index: -1;   /* 文字の後ろ */
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .8s ease, transform .8s ease;
}

/* ロゴ表示開始時に影もふわっと出る */
.wrr-animated-logo.active .wrr-shadow {
    opacity: 1;
    transform: scale(1);
}





/* =========================================
   Pixar・3Dロゴ風：CG立体影
   ========================================= */
.wrr-shadow {
    width: 70px;
    height: 18px;
    position: absolute;
    bottom: -20px;
    z-index: -1;

    /* ★ 立体感を出す人物影のような楕円影 */
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.40) 0%,     /* ← 中心が濃い（リアル影のポイント） */
        rgba(0,0,0,0.22) 35%,
        rgba(0,0,0,0.12) 60%,
        rgba(0,0,0,0.00) 100%
    );

    border-radius: 50%;
    opacity: 0;
    transform: scale(0.85) translateX(0px);
    filter: blur(2px); /* ★ 少しぼかすとCGっぽくなる */
    transition: opacity .6s ease, transform .6s ease;
}

/* ロゴ表示時に影が “着地” する */
.wrr-animated-logo.active .wrr-shadow {
    opacity: 1;
    transform: scale(1) translateX(2px); 
    /* ↑ 光源が左上にあるように見える微妙なズレ */
}















/* ======================================================================
   ▼ 説明文エリア（ピンク背景）の奥行をつける立体感
   ====================================================================== */


#menu-description {
  background: linear-gradient(
      to bottom,
      #fffdfd 0%,
      #fff1f6 40%,     /* ← ここを少しだけ濃淡の差を強めた */
      #ffe3ed 100%     /* ← 下を少しだけ濃くして奥行きを上げた */
  );

  padding: 10px 0;
  text-align: center;

  /* 境界線（高級感を少しだけ強調） */
  border-top: 1px solid rgba(255, 200, 215, 0.55);
  border-bottom: 1px solid rgba(255, 150, 175, 0.55);

  /* ▼ 立体感アップの決定版（10%だけ強化） */
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.95),   /* 内側の光を少しだけ強める */
    0 3px 8px rgba(0, 0, 0, 0.07);               /* 下方向の影を10%増量 */

  /* 文字の立体感も少しだけアップ */
  font-size: 16px;
  font-weight: 600;
  color: #555;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}





/* ======================================================================
   ▼ 説明文エリア（ピンク背景）の奥行をつける立体感　　　　　ここまで
   ====================================================================== */








/* ======================================================================
   ▼ パンくずエリアの背景デフォルト白をベージュに
   ====================================================================== */

/* パンくず領域の背景を本文と同じ薄ベージュに統一 */
.breadcrumb,
.breadcrumbs,
.wrr-breadcrumb {
  background: #FFF8F5 !important;
}


/* パンくずの薄い枠線を完全に消す */
.breadcrumb,
.breadcrumbs,
.wrr-breadcrumb {
  border: none !important;
  box-shadow: none !important;
}


/* ▼ パンくずの下に極淡ピンクの1pxシャドウを追加 */
.wrr-breadcrumb,
.breadcrumb,
.breadcrumbs {
  box-shadow: 0 1px 0 rgba(255, 170, 200, 0.25) !important;
}



/* ======================================================================
   ▼ パンくずエリアの背景デフォルト白をベージュに　　　　　ここまで
   ====================================================================== */














/* ======================================================================================================
   作品詳細ページのパッケージ、AVFの下の全〇〇ページ本編はこちらテキストリンクCVボタン
   ====================================================================================================== */


/* ====== PC / 共通スタイル ====== */
.wrr-review-top-cv {
  text-align: center;
  margin: 3px 0 3px;
}

.wrr-review-top-cv a {
  font-size: 18px;
  font-weight: bold;
  color: #c06b1d;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}

.wrr-review-top-cv a:hover {
  opacity: 0.8;
}

/* =============================================
【スマホ】
 =============================================*/

@media screen and (max-width: 768px) {
  .wrr-review-top-cv {
    margin: 2px 0 2px;   /* スマホでは少し詰める */
  }

  .wrr-review-top-cv a {
    font-size: 16px;      /* スマホでは少し小さく */
    line-height: 1.5;
  }
}

/* ======================================================================================================
   作品詳細ページのパッケージ、AVFの下の全〇〇ページ本編はこちらテキストリンクCVボタン       ここまで
   ====================================================================================================== */






/* ======================================================================================================
   作品詳細ページのパッケージ、AVFの下の ＜最大90％OFFセールはこちら ＞ テキストリンクCVボタン
   ====================================================================================================== */

/* ▼ PC 共通 */
.wrr-sale-link-under {
  text-align: center;
  margin-top: 0px;
}

.wrr-sale-link-under a {
  color: #0073e6;
  text-decoration: underline;
  font-size: 15px;
}

.wrr-sale-link-under a:hover {
  opacity: 0.7;
}


/* =============================================
【スマホ】
 =============================================*/

@media screen and (max-width: 768px) {
  .wrr-sale-link-under {
    margin-top: 2px; /* 少し余白を増やしてタップしやすく */
  }

  .wrr-sale-link-under a {
    font-size: 16px;  /* スマホでは少し大きくして読みやすく */
    line-height: 1.6; /* 行間ゆったり */
    padding: 4px 0;   /* タップしやすい上下余白 */
    display: inline-block;
  }
}


/* ======================================================================================================
   作品詳細ページのパッケージ、AVFの下の ＜最大90％OFFセールはこちら ＞ テキストリンクCVボタン ここまで
   ====================================================================================================== */



















/* ======================================================================
   作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア
   ====================================================================== */

/* --- クーポンを確認するエリア全体 --- */
.wrr-coupon-area {
  width: 100%;
  max-width: 1100px; /* セクションを中央に固定 */
  margin: 40px auto; /* 完全中央寄せ */
  padding: 10px 40px;
  
  display: flex;
  justify-content: center; /* flex 要素全体を中央寄せ */
  align-items: center;
  gap: 40px; /* ボックスとキャラの間隔 */
  
  background: #fff9e6;
  border: 1px solid #f5d78c;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* --- クーポン説明ボックス --- */
.wrr-coupon-box {
  flex: 1;       /* 等幅で伸縮 */
  max-width: 60%; /* 文章が読みやすい幅に調整 */
}

.wrr-coupon-title {
  font-size: 20px;
  font-weight: 700;
  color: #c67b00;
  margin-bottom: 12px;
}

.wrr-coupon-btn {
  display: inline-block;
  background: #ffb400;
  color: #fff;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.wrr-coupon-btn:hover {
  opacity: 0.92;
}

/* --- キャラクター（右側）--- */
.wrr-coupon-character img {
  width: 220px;
  height: auto;
  display: block;
}

/* ====================================================================================
   作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア　　　ここまで
   ==================================================================================== */





/* ================================================================================================
  【吹き出しの定義】 作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア　　　
   ================================================================================================ */


.wrr-coupon-character {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}





/* ▼ 吹き出し本体（横長バージョン） */
.wrr-coupon-speech {
  position: absolute;
  right: 200px;          /* 横位置。キャラからの距離 */
  top: 20px;             /* 縦位置 */
  background: #fffdf8;
  border: 1px solid #f0d8b8;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;   /* ← 改行を禁止して横1行に */
  color: #a66e4a;
  box-shadow: 0 3px 7px rgba(0,0,0,0.08);
  z-index: 10;
}

/* ▼ 吹き出しの三角（横向け） */
.wrr-coupon-speech::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%); /* 真ん中に合わせる */
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fffdf8;
  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.08));
}



/* ===========================================================================================================
  【吹き出しの定義】 作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア　　　　　ここまで
   =========================================================================================================== */







/* ===========================================
   作品詳細ページのCVボタン横　ギフトアイコン
   ============================================ */
.coupon-gift-icon {
  width: 30px;
  height: auto;
  margin-left: 8px;
  vertical-align: middle;
  margin-top: -6px;
}


/* =====================
   【スマホ】
 ====================== */

@media (max-width: 768px) {
  .coupon-gift-icon {
    width: 26px;       /* ← スマホ・タブレット向けサイズ */
    margin-left: 6px;  /* ← 間隔を少し縮めて見やすく */
    vertical-align: middle;
  }
}

/* ========================================================
   作品詳細ページのCVボタン横　ギフトアイコン　　ここまで
   ======================================================== */








/* ============================================================================================
【スマホ】　作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア
  ============================================================================================ */

@media (max-width: 768px) {

  /* 吹き出し＋キャラの親を中央寄せの flex にする */
  .wrr-coupon-character {
    display: flex;
    flex-direction: row;        /* 左：吹き出し ／ 右：キャラ */
    justify-content: center;    /* 横方向の中央寄せ */
    align-items: center;        /* 縦位置を中央で揃える */
    width: 100%;
    margin-top: 3px !important;
	margin-bottom: 3px !important;  
    position: relative;         /* 吹き出し absolute を打ち消すため */
  }

  /* 吹き出し本体を absolute から通常フローに変更して横に並べる */
  .wrr-coupon-speech {
    position: static !important;
    margin-right: 10px;
    white-space: nowrap;
    background: #fffdf8;
    border: 1px solid #f0d8b8;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* 吹き出しの三角形を非表示（横並びでは不要） */
  .wrr-coupon-speech::after {
    display: none !important;
  }

  /* キャラ画像（スマホ最適幅に） */
  .wrr-coupon-character img {
    width: 150px;
    height: auto;
	margin-top: 0 !important;        /* 15px → 0 にする */
    margin-bottom: 0 !important; 
    position: relative;      /* ← 必須 */
    left: 25px;               /* ← プラスで右 / マイナスで左 */
	  
  }
}


@media (max-width: 768px) {
  .wrr-coupon-area {
    flex-direction: column;
    text-align: center;
    padding: 5px;
  }

  .wrr-coupon-box {
    max-width: 100%;
  }
	
 /* クーポン見出し */
  .wrr-coupon-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  /* クーポン本文 */
  .wrr-coupon-area p {
    font-size: 13px !important;
    line-height: 1.75 !important;
    margin-bottom: 10px !important;
  }	
	
/*吹き出しのみ上下位置、左右の定義 */	
  .wrr-coupon-speech {
    margin-bottom:  130px;  /* ← これで安全に上に移動する */
	margin-right: -40px;  /* キャラの方に右へ寄る */  
  }	

	
}




/* ============================================================================================
【スマホ】　作品詳細ページのCVボタン下領域FANZA採用のクーポンを確認するエリア　　　　ここまで
  ============================================================================================ */
	
	


	
	
	
	
	
/* ==============================================================================
   作品詳細ページの最大90％OFFセール作品を確認する文末の　　　　SALEアイコン
   ============================================================================== */

.sale-icon {
  width: 32px;
  height: 30px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ▼ スマホ版 SALE アイコン調整 */

@media (max-width: 768px) {
  .sale-icon {
    width: 26px;
    height: auto;
    margin-left: 6px;
    vertical-align: middle;
  }
}




/* =============================================================================================
   作品詳細ページの最大90％OFFセール作品を確認する文末の　　　SALEアイコン　　　　　ここまで
   ============================================================================================= */


	
	

	








/* ========================================================================================
作品詳細ページ  最大90％OFF作品 毎週火曜更新！セクション
   ======================================================================================== */

.sakuhin-rank-box {
  width: 100%;
  max-width: 1100px;
  margin: 10px auto;
  padding: 10px 60px;   /* ← クーポンと同じ内側余白に変更 */
  background: #fff9e6;
  border: 1px solid #f5d78c;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
}


/* 中身をクーポン成功仕様に完全一致 */
.sakuhin-rank-inner {
  width: 100%;               /* ← 横幅をフルで確保 */
  display: flex;
  align-items: center;
  justify-content: space-between;  /* ← 自然な左右配置 */
}


/* ===============================
   見出し（クーポン版と同じ）
   =============================== */
.sakuhin-rank-title {
  font-size: 21px;
  font-weight: 700;
  color: #a87400;
  margin-bottom: 12px;
}


/* ===============================
   本文
   =============================== */
.sakuhin-rank-desc {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 14px;
}


/* ==============================
   ボタン
   =============================== */
.sakuhin-rank-btn {
  display: inline-block;
  background: #ffb400;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 18px;
  margin-top: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  text-decoration: none;  /* ← 下線を消す */
}

.sale-icon {
  width: 30px;
  margin-left: 8px;
}


/* ====================
     キャラ画像
   ==================== */
.sakuhin-rank-chara img {
  width: 330px;     /* ← ここをクーポン成功レイアウトと完全一致 */
  height: auto;
  margin-top: 5px;
}

.sakuhin-rank-chara {
  position: relative;
}


/* =====================================
   PC吹き出し（位置もクーポン完全一致）
   ====================================== */
.sakuhin-ranking-speech {
  position: absolute;
  right: 200px;
  top: 85px;
  background: #fffdf8;
  border: 1px solid #f0d8b8;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 15px;
  white-space: nowrap;
  color: #a66e4a;
  z-index: 10;
}

.sakuhin-ranking-speech::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fffdf8;
}


/* ===========================================================
   スマホ（クーポン版と完全一致）
   =========================================================== */
@media (max-width: 768px) {

  .sakuhin-rank-inner {
    flex-direction: column;
    text-align: center;
  }

  .sakuhin-rank-chara {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px !important;
    margin-bottom: 3px !important;
    position: relative;      /* ← 必須 */
    left: 20px;               /* ← プラスで右 / マイナスで左 */  
  }
	
/* 吹き出し */
  .sakuhin-ranking-speech {
    position: static !important;
    margin-right: -30px;
    margin-bottom: 80px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
    background: #fffdf8;
    border: 1px solid #f0d8b8;
  }

  .sakuhin-rank-btn {
    padding: 10px 14px !important;  /* ← スマホ用に調整 */
    font-size: 16px !important;      /* ← スマホ用に調整 */
  }

  .sakuhin-rank-box {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

/* 吹き出しの三角をつけない */
  .sakuhin-ranking-speech::after {
    display: none !important;
  }

  .sakuhin-rank-chara img {
    width: 150px !important;
  }

  /* 見出し */
  .sakuhin-rank-title {
    font-size: 16px;
    line-height: 1.4;    
    margin-bottom: 10px;	  
    text-align: center;
	padding-left: 6px;
    padding-right: 6px;
    white-space: normal;    
  }

  /* 本文テキスト */
  .sakuhin-rank-desc {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 8px;
    text-align: center;
	padding-left: 3px;
    padding-right: 3px;  
  }

  /* テキスト全体のラッパー（あれば） */
  .sakuhin-rank-text {
    width: 100%;
    margin-bottom: 6px;
  }

	  /* テキスト全体を横いっぱいに */
  .sakuhin-rank-text {
    width: calc(100% + 28px);   /* ← boxの左右padding分を打ち消す */
    margin-left: -10px;
    margin-right: -10px;
  }
		
} 


/* ===========================================================
 【PC限定】吹き出し位置の上下の配置  吹き出しを上に移動
   =========================================================== */

/* ★ PC 向け：吹き出しを上に移動 */
@media (min-width: 769px) {
  .sakuhin-ranking-speech {
    top: 65px !important;   /* ← もっと上に動かす数値。自由に調整OK */
	  margin-right: -20px;
    position: absolute !important; /* ← PC用を強制維持 */
  }
}
/* ================================================================
 【PC限定】吹き出し位置の上下の配置　　吹き出しを上に移動ここまで
   ================================================================ */


/* ========================================================================================
作品詳細ページ  最大90％OFF作品 毎週火曜更新！セクション               ここまで
   ======================================================================================== */







/* ============================================
   作品タイプ ガイド（キャラ + 吹き出し）
============================================ */
.tag-guide-wrap {
  position: relative;
  margin: 0 auto;
  margin-bottom: 5px;
  padding: 10px 0 0 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* 吹き出し本体 */
.tag-guide-balloon {
  position: relative;
  max-width: 68%;
  background: #ffffff;
  padding: 12px 15px;
  border-radius: 12px;
  border: 2px solid #f4c8d8;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  margin-right: 10px;
}

/* 左向き吹き出し三角 */
.tag-guide-balloon::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ffffff;
}

/* 三角の外枠 */
.tag-guide-balloon::before {
  content: "";
  position: absolute;
  right: -14px;
  top: 19px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #f4c8d8;
}

/* キャラ画像（右側） */
.tag-guide-character {
  width: 110px;
  height: auto;
}

/* --- PC版：キャラ少し大きくする --- */
@media (min-width: 768px) {
  .tag-guide-character {
    width: 120px;
  }
  .tag-guide-balloon {
    max-width: 55%;
    font-size: 15px;
  }
}




/* ▼ WRRロゴ中央配置（セクションの象徴） */
.wrr-logo-center {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    animation: fadeIn 1.2s ease-out forwards;
}

.wrr-logo-img {
    width: 80px;           /* スマホサイズ */
    max-width: 80%;
    opacity: 0.95;
}

/* ▼ ふわっと表示アニメ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* ============================================
   作品タイプ ガイド（キャラ + 吹き出し）スマホ最適化
============================================ */
@media (max-width: 768px) {

  /* 吹き出しを少し左へ寄せる（右に寄りすぎ防止） */
  .tag-guide-balloon {
    max-width: 72%;          /* ← 少し余裕を持たせる */
    margin-right: -12px;       /* ← 右寄せ改善。8〜12pxで微調整可能 */
    font-size: 13.5px;
    line-height: 1.45;
	margin-top: 20px; /* ← 上へ持ち上げ */  
  }

  /* 吹き出しの三角位置調整（バランス用） */
  .tag-guide-balloon::after {
    right: -6px;             /* ← スマホは三角を少し短く */
    top: 16px;
  }

  .tag-guide-balloon::before {
    right: -10px;
    top: 15px;
  }

  /* キャラ画像（スマホではやや小さめに） */
  .tag-guide-character {
    width: 95px;             /* ← 110→95 にしてコンパクト */
  }

  /* 全体の縦バランス微調整 */
  .tag-guide-wrap {
    padding-top: 5px;
    margin-bottom: 1px;
  }

  /* WRRロゴをスマホで少し大きく表示（映えるため） */
  .wrr-logo-img {
    width: 110px;             /* 80 → 95 少し強調 */
    opacity: 0.97;
  }
}











/* キャラ＋吹き出し（左キャラVer.） */
.wrr-chara-speech.left-chara {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 20px 0;
}

/* 左側キャラ */
.wrr-chara-img.left {
  width: 110px;
  height: auto;
}

/* 右側吹き出し */
.wrr-speech-bubble.right {
  max-width: 65%;
  background: #fff;
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 2px solid #ffd6e6;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  margin-top: -100px; /* ← 上へ持ち上げ */
  
}

/* 吹き出しの三角（右側） */
.wrr-speech-bubble.right::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 20px;
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #ffd6e6 transparent transparent;
}






/* ▼▼ スマホ専用 ▼▼ */
@media (max-width: 768px) {

  /* 左キャラ＋右吹き出しの全体 */
  .wrr-chara-speech.left-chara {
    gap: 8px;
    margin: 16px 0;
    padding: 0 5px;
  }

  /* 左キャラ：スマホでは少し縮小して可愛く */
  .wrr-chara-img.left {
    width: 110px;  
  }

  /* 右側の吹き出し：スマホ幅に合わせて最大幅アップ */
  .wrr-speech-bubble.right {
    max-width: 70%;  /* ←PCは65% */
    font-size: 13.5px;
    padding: 10px 14px;
    border-radius: 14px;
	margin-left: -20px;  /* ← ここを -8px 〜 -20px で微調整可能 */
  }

  /* 三角の位置を微調整（スマホで完璧な位置に） */
  .wrr-speech-bubble.right::after {
    left: -10px;
    top: 18px;
    border-width: 7px 10px 7px 0;
  }
}












/* ▼ ナビ追従エリアのアイコンを右端へ寄せる（最安定版） */
.wrr-nav-icons {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* ★右端に揃えるメイン処理 */
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 4px 10px 4px 0;
    box-sizing: border-box;
}

/* テキスト & アイコン */
.wrr-nav-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: #444;
    text-decoration: none;
}

.wrr-nav-icon img {
    width: 20px;
    height: auto;
}

/* ▼ スマホは微調整（重要ポイント） */
@media (max-width: 600px) {
    .wrr-nav-icons {
        gap: 8px;
        padding-right: 6px;
    }
    .wrr-nav-icon {
        font-size: 12px;
    }
    .wrr-nav-icon img {
        width: 18px;
    }
}

























/* ▼ 週間TOP を丸く 各週間 月間ランキングリンクボタン */

.adult-badge {
  background: linear-gradient(180deg, #fff7fb, #ffe9f3);
  border: 1px solid #ffb7db;
  padding: 6px 16px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  color: #d44;
  letter-spacing: 0.02em;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  cursor: pointer;
  transition: all 0.18s ease;
}


/* アダルト漫画の既存色と統一 */
.manga-color {
    color: #d44;
}












/* ▼ 同人バッジ：アダルト漫画の色味と完全にバランス統一 */

.doujin-badge {
  background: linear-gradient(180deg, #f5f9ff, #eaf1ff);
  border: 1px solid #9fbfff;

  padding: 6px 16px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  color: #3f6edc;          /* ロイヤルブルー寄りに調整 */
  letter-spacing: 0.02em;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  cursor: pointer;
  transition: all 0.18s ease;
}





/* アダルト漫画色との統一 */
.manga-color {
    color: #4a88ff;
}



















/* =========================================================================================================
  【両サイドキャラ吹き出し付き+ロゴ中央セクション】 横並びの 3 カラム（左キャラ・ロゴ・右キャラ）
============================================================================================================ */

.wrr-hero-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 120px;
  margin-top: 40px;
  margin-bottom: 5px;

}


/* ============================================
   左ブロック（キャラ → 右上吹き出し）
============================================ */
.hero-left-block {
  position: relative;
}

/* ★ 左キャラ：少し左へ寄せる */
.hero-left-img {
  width: 200px;
  height: auto;
  position: relative;
  top: -40px;
  left: -100px;      /* ← 左へ20px 移動（希望反映） */
}

/* ★ 左吹き出し：キャラ口元より上へ移動 */
.hero-left-balloon {
  position: absolute;
  top: -10px;        /* ← 高さUP（キャラの口元より上）*/
  left: 45px;       /* ← キャラ右横へ調整 */
  
  background: #fff;
  border: 2px solid #ffd6e6;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 15px;
  color: #a66e4a;
  white-space: nowrap;
  max-width: none;
  display: inline-block;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.hero-left-balloon::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 14px;
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #ffd6e6 transparent transparent;
}



/* ============================================
   中央ロゴ
============================================ */
.hero-center-block {
  display: flex;
  justify-content: center;
}



.hero-logo {
  width: 180px;
  height: auto;
  position: relative;
  top: -40px;   /* ← 上へ20px移動（数値で調整） */
}


/* ============================================
   右ブロック
============================================ */
.hero-right-block {
  position: relative;
  text-align: center;
}

/* ★ 右キャラ：少し右へ寄せる */
.hero-right-img {
  width: 200px;
  height: auto;
  position: relative;
  top: 0px;
  right: -120px;     /* ← 右へ20px移動（バランス調整） */
}

/* ★ 右吹き出し：左と同じ高さにして、キャラの口元より上へ */
.hero-right-balloon {
  position: absolute;
  top: 40px;        /* ← 吹き出しを上へ */
  right: 55px;      /* ← キャラ左側へ適正距離 */

  background: #fff;
  border: 2px solid #ffd6e6;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 15px;
  color: #a66e4a;
  white-space: nowrap;
  max-width: none;
  display: inline-block;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.hero-right-balloon::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 14px;
  border-width: 8px 0 8px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #ffd6e6;
}



/* ============================================
   スマホでも PC と同じ横並び・横吹き出し
============================================ */
@media (max-width: 768px) {

  /* 全体：横並び維持 */
  .wrr-hero-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
	margin: 90px auto;  
  }

 /* ===== 左キャラ ===== */
 .hero-left-img {
    width: 190px;
    height: auto;
    position: relative;
    top: 90px;     /* ← 左キャラだけ少し上へ */
    left: 0;
  } 

  /* ===== 右キャラ ===== */
  .hero-right-img {
    width: 190px;
    height: auto;
    position: relative;
    top: -85px;      /* ← 右キャラは少し下げる */
    right: 0;
  }

	
  /* 中央ロゴ */
  .hero-logo {
    width: 130px;
    height: auto;
    top: -120px;
  }

  /* ===== 吹き出し（PCと同じ横表示） ===== */
  .hero-left-balloon,
  .hero-right-balloon {
    font-size: 13px;
    white-space: nowrap;     /* ★ 横表示の核心 */
    max-width: none;         /* ★ 強制改行させない */
    padding: 8px 14px;
    line-height: 1.4;
  }

/* 右吹き出し位置 */
  .hero-right-balloon {
    top: -65px;
    right: 110px;
  }
/* 左吹き出し位置 */
.hero-left-balloon {
    top: 110px;
    left:100px;
  } 
  
}








/* =========================================================================================================
  【両サイドキャラ吹き出し付き+ロゴ中央セクション】 横並びの 3 カラム（左キャラ・ロゴ・右キャラ）
============================================================================================================ */











/* ===============================================================================
   人気タグセクションの囲い枠デザイン
================================================================================== */

.tag-section-box {
	
  background:#fff8f4;
  border: 2px solid #f7dce9;         /* 薄いピンク系の線 */
  border-radius: 18px;
  padding: 25px 30px;
  margin: 10px auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);  /* ほんのり影 */
  max-width: 1150px;                /* 全体と同じ幅感 */
  position: relative;
}

/* 上部にグラデーションライン */
.tag-section-box::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,
    #f8b4d9,
    #eac7f5,
    #bfe3fc,
    #b0f5d0,
    #f8f1b4
  );
}

/* 下部にも同じグラデーション（任意） */
.tag-section-box::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(90deg,
    #f8b4d9,
    #eac7f5,
    #bfe3fc,
    #b0f5d0,
    #f8f1b4
  );
}




/* =====================================
   スマホ
========================================= */

@media screen and (max-width: 768px) {
  .tag-section-box {
    max-width: none;          /* 幅制限解除 */
    width: 100%;              /* 横幅いっぱい */
    margin: 20px 0;           /* auto をやめる */
    padding: 14px 12px;       /* スマホ用に余白を最適化 */
    border-radius: 14px;      /* 角丸を少しだけ控えめに */
  }

}

/* ===============================================================================
   人気タグセクションの囲い枠デザイン              ここまで
================================================================================== */













/* ===============================================================================================
アダルト漫画 同人誌 作品評価の目安 【星評価と説明】　カード風デザインにする
================================================================================================== */



.hosoku-note .quality-item {
  background: #fff8f4 !important;
  padding: 18px 22px !important;
  border-radius: 10px;
  margin-bottom: 25px !important;
  border: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}


/* カード風デザイン下部に細いゴールドラインを入れる */
.hosoku-note .quality-item {
  border-bottom: 3px solid #f3c875 !important;
}

/* ===============================================================================================
アダルト漫画 同人誌 作品評価の目安 【星評価と説明】　カード風デザインにする　　　　ここまで
================================================================================================== */














/* =========================================================================
当サイト掲載作品は【正規配信版】セクション　PC,スマホ 【切り替え文】
============================================================================ */

/* 初期状態：PC表示 */
.legal-text-sp {
  display: none;
}

/* スマホだけ簡易文に切り替え */
@media screen and (max-width: 768px) {
  .legal-text-pc {
    display: none;
  }
  .legal-text-sp {
    display: block;
  }
}


/* =============================================================================
当サイト掲載作品は【正規配信版】セクション　PC,スマホ 【切り替え文】　ここまで
================================================================================ */




/* ============================================================================
  共通クラス：重要セクション見出し（高級感）
  対象：
  ・アダルト漫画 同人誌 作品評価の目安
  ・当サイト掲載作品は【正規配信版】です
============================================================================ */


/* 共通・最優先で効かせる */
.hosoku-note .wrr-section-title,
.hikakubun-note .wrr-section-title {
  position: relative;
  background: #fff8f4;
  padding: 13px 28px !important;
  border-radius: 12px;
  text-align: center;

  font-size: 1.1em !important;
  font-weight: 600;
  color: #7a4e2d;

  margin-bottom: 35px;
  border-bottom: 3px solid #f3c875;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.12),
    0 1px 3px rgba(0,0,0,0.08);

  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 70%,
    rgba(0,0,0,0.03) 100%
  );
}




/* ============================================================================
  共通クラス：重要セクション見出し（高級感）
  対象：
  ・アダルト漫画 同人誌 作品評価の目安
  ・当サイト掲載作品は【正規配信版】です                        ここまで
============================================================================ */




















/* ===================================================================================
   CVページ：中央ロゴ＋両サイドキャラ中央寄る演出   
   =================================================================================== */

/* ▼ ステージ全体 */
.cv-hero-stage {
  position: relative;
  width: 100%;

  /* ★ 高さを詰める（最重要） */
  height: 270px;

  margin: 4px 0 10px;
  overflow: hidden;
}

/* ▼ キャラ共通 */
.cv-hero-chara {
  position: absolute;

  /* ★ 下基準をやめて中央寄せ思想に */
  bottom: 0;

  height: 240px; /* ← 少しだけ下げてバランス最適化 */
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  filter: none;

  transition:
   transform 1.6s cubic-bezier(.18,.72,.32,1),
   opacity 0.8s ease 0.3s; /* ← opacity を遅らせる */
}

/* 左右位置 */
.cv-hero-left {
  left: -80px;
}

.cv-hero-right {
  right: -80px;
}

/* ▼ 中央まとめ */
.cv-hero-center {
  position: absolute;
  left: 50%;

  /* ★ キャラより少し上に */
  bottom: 46px;

  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;

  transition: opacity 1s ease, transform 1s ease;
}

/* ▼ 中央ロゴ */
.cv-hero-logo {
  height: 130px;
  transform: translateY(-6px) scale(0.96);
  transition: transform 1s ease;
}

/* ▼ ロゴ下画像 */
.cv-hero-subimg {
  height: 20px;
  opacity: 0.95;
  transform: translateY(-4px);
}

/* ▼ 表示時 */
.cv-hero-stage.active .cv-hero-left {
  transform: translateX(280px);
  opacity: 1;
}

.cv-hero-stage.active .cv-hero-right {
  transform: translateX(-280px);
  opacity: 1;
}

.cv-hero-stage.active .cv-hero-center {
  opacity: 1;
  transform: translateX(-50%);
}

.cv-hero-stage.active .cv-hero-logo {
  transform: translateY(0) scale(1);
}

/* ===============================
   スマホ最適化
   =============================== */
@media (max-width: 768px) {

  .cv-hero-stage {
    height: 200px;
    margin: 10px 0 10px;
  }

  .cv-hero-chara {
    height: 190px;
    bottom: 0;
  }

  .cv-hero-left { left: -200px; }
  .cv-hero-right { right: -200px; }

  .cv-hero-stage.active .cv-hero-left {
    transform: translateX(240px);
  }

  .cv-hero-stage.active .cv-hero-right {
    transform: translateX(-240px);
  }

  .cv-hero-center {
    bottom: 36px;
  }
	
/* 中央のロゴサイズ */
  .cv-hero-logo {
    height: 82px;
  }
	
/* ロゴのしたのWRRのサイズ */
  .cv-hero-subimg {
    height: 20px;
  }
}


/* ===================================================================================
   CVページ：中央ロゴ＋両サイドキャラ中央寄る演出                 ここまで
   =================================================================================== */









/* =======================================================================================================
※アダルト漫画ランキングセクション、同人誌ランキングセクション共通クラス　　　　※一部同人で変更
========================================================================================================== */



/* =====================================================
   全体ラッパ
===================================================== */
.lead-box {
  background: #fff8f4;
  padding: 30px 0 10px;
}

/* =====================================================
  囲い枠（グラデーション線）
===================================================== */

.lead-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 60px 50px;

  /* ▼ 枠線をグラデ1本線に変更 */
  border: 3px solid transparent;   /* 太さ：今お使いの「3」でOK */
  border-radius: 14px;

  /* ▼ 背景＋枠線グラデ */
  background:
   linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      to right,
      #f7b7c9,
      #f7e4a8,
      #bfe3cf,
      #b7c8ff
    ) border-box;

  text-align: center;
}





/* =====================================================
   タイトル（上中央）
===================================================== */
.lead-title {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff8f4;
  padding: 0 18px;
  font-size: 18px;
  font-weight: 600;
  color: #c33;
  white-space: nowrap;
}

/* 王冠：色は一切変更しない */
.lead-title i {
  margin-right: 4px;
}

/* =====================================================
   上部（テキスト＋キャラ）
===================================================== */
.lead-top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin-top: 10px;
}

/* テキスト */
.lead-text {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0 auto;
}

/* =====================================================
   キャラ（右固定）
===================================================== */
.lead-chara {
  position: absolute;
  right: 40px;
  top: 50px;
  pointer-events: none;
}

.lead-chara img {
  width: 230px;
  height: auto;
}

/* =====================================================
  セクション内の仕切り グラデーションライン
===================================================== */
.lead-line {
  width: 50%;
  height: 6px;
  margin: 28px auto 26px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #f5b6c5,
    #f6e6a2,
    #a4d9c6,
    #b8c7f8
  );
}

/* =====================================================
   ボタン（← ここが修正ポイント）
===================================================== */
.lead-actions {
  display: flex;
  justify-content: center;
  gap: 26px;
}

/* ===============================
   lead ボタン（高品質 赤系）
=============================== */
.lead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 14px 34px;
  border-radius: 8px;

  background: #fff3f6;          /* 通常：ごく淡い赤 */
  border: 1px solid #e9a5b5;    /* 通常：落ち着いた赤ボーダー */

  font-size: 16px;
  font-weight: 500;
  color: #c3324f;               /* 通常：深みのある赤 */

  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
}

/* hover：一段だけ“濃く・はっきり” */
.lead-btn:hover {
  background: #ffe1e8;          /* 少し濃い赤 */
  border-color: #d56a85;        /* 輪郭が締まる */
  color: #a82840;               /* 文字だけ少し濃く */
}

/* =================================================
   スマホ最終調整
================================================= */
@media screen and (max-width: 768px) {

  .lead-box {
    padding: 14px 10px;
  }

  .lead-inner {
    padding: 32px 14px 24px;
  }

  .lead-title {
    top: -13px;
    padding: 0 12px;
    font-size: 15px;
  }

  .lead-top {
    display: flex;
    justify-content: space-between;
  }

  .lead-text {
    width: 64%;
    font-size: 13px;
    line-height: 1.65;
    margin: 6px 0 22px;
  }

  .lead-chara {
    width: 36%;
    margin-top: 10px;
    margin-right: -14px;
	
  }
/* キャラのサイズ */
  .lead-chara img {
    width: 120px;
  }

  .lead-line {
    width: 86%;
    height: 4px;
    margin: 10px auto 16px;
  }

  .lead-actions {
    gap: 10px;
  }

  .lead-btn {
    flex: 0 0 48%;
    padding: 10px 0;
    font-size: 13px;
    background: #fff0f3;   /* 薄い赤（ピンク寄り）背景 */
    border-color: #f0c3cf; /* 赤系ボーダー */ 	
	  
  }
	
.lead-line {
  width: 45%;
  height: 6px;
  margin: 18px auto 26px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #f5b6c5,
    #f6e6a2,
    #a4d9c6,
    #b8c7f8
  );
}	
	
	
}



/* =========================================================================================================
※※※【スマホ】※※※ アダルト漫画ランキングセクション、同人誌ランキングセクション【キャラの位置】ここで調整
=========================================================================================================== */
@media screen and (max-width: 768px) {
  .lead-top {
    flex-direction: column;
    align-items: center;
  }
/* キャラの位置 */
  .lead-chara {
    margin-top: 60px;
    width: 50%;
	 margin-right: -70px;  
  }
}

/* ==========================================================================================================
※※※【スマホ】※※※ アダルト漫画ランキングセクション、同人誌ランキングセクション　【キャラの位置】 ここまで
============================================================================================================= */






/* このセクションの王冠をゴールドに指定し直し */
.lead-title .ranking-crown {
  color: #f5c542; /* ゴールド */
}

/* ===========================================================================================================
※アダルト漫画ランキングセクション、同人誌ランキングセクション共通クラス　　※一部同人で変更　　　ここまで
============================================================================================================== */









/* ===========================================================================================
アダルト漫画ランキングセクション、同人誌ランキングセクション　内のボタン左アイコンの定義
============================================================================================= */

/* leadボタン内の左アイコンだけサイズを正常化 */
.lead-btn .ranking2-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}


@media screen and (max-width: 768px) {
  /* leadボタン内の左アイコンだけ（スマホ最適化） */
  .lead-btn .ranking2-icon {
    width: 16px;        /* ← スマホでは一回り小さく */
    height: 16px;
    margin-right: 5px; /* ← 文字との間隔を微調整 */
    flex-shrink: 0;    /* ← 圧縮されて潰れるのを防止 */
  }

}


/* =====================================================================================================
アダルト漫画ランキングセクション、同人誌ランキングセクション内のボタン左アイコンの定義　　　ここまで
======================================================================================================= */










/* ==========================================================================================================
※同人誌ランキング※：【青系ボタン・見出し・囲い線・枠】を青に（is-manga ではない lead-box）共通クラスではない  
========================================================================================================== */

.lead-box:not(.is-manga) .lead-btn {
  background: #f2f7ff;          /* 上品な淡い青 */
  border-color: #a9c4ff;        /* 知的ブルーの枠 */
  color: #2f5fd0;               /* 落ち着いた青文字 */
}

/* hover */
.lead-box:not(.is-manga) .lead-btn:hover {
  background: #e4efff;
  border-color: #6f97ff;
  color: #1f3f9e;
}



/* 外枠線（） */
.lead-box:not(.is-manga) .lead-inner {
  border: 3px solid transparent;
  border-radius: 14px;

  background:
	 linear-gradient(#ffffff, #ffffff) padding-box,
   
    linear-gradient(
      to right,
      #b6c8ff,   /* スカイブルー（始点・締め） */
      #f6b6c8,   /* ピンク（華やかさ） */
      #f6e6a6,   /* クリーム（上品さ） */
      #a8dbc8,   /* ミント（抜け感） */
      #b6c8ff    /* 戻し */
    ) border-box;
}



/* 見出しテキスト色 */
.lead-box:not(.is-manga) .lead-title {
  color: #2f5fd0;        /* 落ち着いた知的ブルー */
}


/* 見出し背景（赤セクションと同じ発想で色だけ変更） */
.lead-box:not(.is-manga) .lead-title {
  background: #fff8f4;  /* 背景は共通でOK */
}



/* ==========================================================================================================
※※同人誌ランキング※※：青系ボタン・見出し・囲い線・枠を青に（is-manga ではない lead-box）共通クラスではない  
========================================================================================================== */













/* ============================
   PICKUP セクション（余白最小・整列完全版）
   ============================ */
.wrr-pickup-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5px;            /* ← 左右の余白もさらに圧縮 */
  max-width: 1100px;
  margin: 10px auto;
  gap: 1px 0;                /* ← 横ギリギリ。縦も極限まで圧縮 */
}

/* 作品ボックス（横６列計算） */
.pickup-item {
  flex: 0 0 calc(16.66% - 10px); 
  /* ↑ 余白4pxに合わせた最適な幅 */
  margin: 0;
  padding: 0;
  text-align: center;
  transition: transform 0.2s ease;
}

.pickup-item:hover {
  transform: translateY(-3px);
}

/* 作品画像 */
.pickup-image img {
  width: 100%;                /* ← あなた指定の最適サイズを維持 */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}










/* =========================================================================================
   アダルト漫画 PICKUP セクション（完全独立版）
============================================================================================ */

.pickup-box {
  width: 100%;
  background: #fffaf6;
  padding: 20px 0;
}

.pickup-inner {
  position: relative; /* ← キャラ固定の基準 */
  max-width: 1150px;
  margin: 0 auto;
  padding: 70px 70px 70px;
  border: 2px solid #e8d8c7;
  border-radius: 10px;
  background: #fffaf6 ;
}

/* タイトル */
.pickup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* 説明文 */
.pickup-desc-wrap {
  text-align: center;
  margin-bottom: 8px;
}

.pickup-desc {
  line-height: 1.7;
  font-size: 15px;
  color: #555;
}

/* グラデーション */
.pickup-gradient {
  width: 80%;
  height: 5px;
  margin: 14px auto 22px;
  border-radius: 4px;
  background: linear-gradient(to right,#f5b6c5,#f6e6a2,#a4d9c6,#b8c7f8);
}

/* ===============================
   6作品グリッド
================================= */

.pickup-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5px;
  gap: 2px 0; /* 横最小・縦最小 */
  max-width: 800px;
  margin: 0 auto;
}

.pickup-wrapper .pickup-item {
  flex: 0 0 calc(16.66% - 2px);
  text-align: center;
}

.pickup-wrapper .pickup-item img {
  width: 100%;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* ===============================
   キャラ配置（ここだけ動かせばOK）
================================= */

.pickup-chara {
  position: absolute;
  left: -10px;   /* ← right を消して left にするだけ */
  top: 80px;    /* これはそのまま上下調整用 */
  z-index: 50;
  pointer-events: none;
}


.pickup-chara img {
  width: 210px;
  height: auto;
}

/* =============================================
 【スマホ表示】  アダルト漫画 PICKUP セクション
================================================ */

@media (max-width: 768px) {

  .pickup-wrapper .pickup-item {
    flex: 0 0 33.33%; /* 3列×2段 */
	  
  }

  .pickup-chara {    
	position: absolute; 
    display: block;
    margin: 0 auto 10px;
    text-align: center;
  }

.pickup-desc-flex .pickup-chara img {
    height: 210px;
    width: auto;
	
  }
	
  /* アダルト漫画：横幅制限を解除 */
  .pickup-inner {
    max-width: none;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
	 padding-top: 30px;     
    padding-bottom: 25px;   
  }

  .pickup-wrapper {
    max-width: none;
    width: 100%;	
  }
	
.pickup-title {	
	font-size: 17px;
　}
	
}


/* =========================================================================================
   アダルト漫画 PICKUP セクション（完全独立版）
============================================================================================ */


	






/* ====================================================================================
   同人誌 PICKUP セクション（アダルト漫画とは完全クラス独立）
====================================================================================== */



.pickup-doujin-box {
  width: 100%;
  background: #fffaf6;                 /* アダルト漫画と統一 */
  padding: 20px 0;
}

.pickup-doujin-inner {
  position: relative;                   /* キャラ配置の基準 */
  max-width: 1150px;
  margin: 0 auto;
  padding: 70px 70px 70px;
  border: 2px solid #e8d8c7;
  border-radius: 10px;
  background: #fffaf6;
}


/* ======================================================
   タイトル・説明文（完全独立）
====================================================== */

.pickup-doujin-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  white-space: nowrap;
}

.pickup-doujin-desc-wrap {
  text-align: center;
  margin-bottom: 8px;
}

.pickup-doujin-desc {
  line-height: 1.7;
  font-size: 15px;
  color: #555;
}

/* グラデーションバー */
.pickup-doujin-gradient {
  width: 78%;
  height: 5px;
  margin: 14px auto 22px;
  border-radius: 4px;
  background: linear-gradient(to right,#f5b6c5,#f6e6a2,#a4d9c6,#b8c7f8);
}


/* ======================================================
   6作品グリッド（3列×2段 / 完全独立）
====================================================== */

.pickup-doujin-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;                    /* 上下左右均等 */
  max-width: 800px;
  margin: 0 auto;
  padding-top: 5px;
}

/* ショートコードの出力＝.pickup-item をここで専用化 */
.pickup-doujin-grid .pickup-item {
  flex: 0 0 calc(33.33% - 6px);
  text-align: center;
}

.pickup-doujin-grid .pickup-item img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 7px rgba(0,0,0,0.15);
  display: block;
  margin: 0 auto;
}


/* ======================================================
   キャラ配置（同人専用）
====================================================== */

.pickup-doujin-chara {
  position: absolute;
  left: -5px;
  top: 70px;
  z-index: 50;
  pointer-events: none;
}

.pickup-doujin-chara img {
  width: 210px;
  height: auto;
}


/* ======================================================
 【スマホ対応】同人誌 PICKUP セクション
====================================================== */

@media (max-width: 768px) {
	.pickup-doujin-box {
  padding: 2px 0;
}

  /* 枠内の左右paddingを少し縮める */
  .pickup-doujin-inner { 
    padding: 2px 2px;
  }

  .pickup-doujin-grid .pickup-item {
    flex: 0 0 33.33%; /* 3列固定 */
  }

  .pickup-doujin-chara {
    position: static;
    display: block;
    margin: 0 auto 10px;
    text-align: center;
  }
	
 .pickup-doujin-desc {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
  }  
	

  .pickup-doujin-chara img {
    width: 120px;
	max-width: none;   /* ← これが超重要 */  
  }
	
.pickup-doujin-title {
  font-size: 17px;
}
}

/* ====================================================================================
   同人誌 PICKUP セクション（アダルト漫画とは完全クラス独立）　　　　ここまで
====================================================================================== */




@media (max-width: 768px) {

  .pickup-desc-flex {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
  }

  .pickup-desc-flex .pickup-chara {
    position: static;
    flex: 0 0 auto;
  }

  

  .pickup-desc {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
  }
}

	
	


	
	
	
/* ======================================================================================
【スマホ】  TOPページへセクション　Wild River Review は～　スマホでは【省略文】
========================================================================================= */		
		
/* 初期状態：PC */
.desc-sp {
  display: none;
}


/* スマホ */
@media (max-width: 768px) {
  .desc-pc {
    display: none;
  }
  .desc-sp {
    display: block;
  }
}
		

/*意図しない左右のずれ防止*/
.wrr-site-description {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ======================================================================================
【スマホ】  TOPページへセクション　Wild River Review は～　スマホでは【省略文】
========================================================================================= */
		







	
/* ======================================================================================
【スマホ】 SNSアイコンの上の余白を詰める
========================================================================================= */	
@media (max-width: 768px) {

  .footer-bottom {
    margin-top: 0 !important;
    padding-top: 0px !important;
  }
	
  .footer-bottom-content {
    padding-top: 0px !important;
  }

}
	
/* ======================================================================================
【スマホ】 SNSアイコンの上の余白を詰める                          ここまで
========================================================================================= */	
	
	

	





/* ===============================================================================
   TOPへ戻るボタン（WRR専用・PC/SP共通）ページ最下部
================================================================================== */

.back-top {
  text-align: center;
  margin: 13px 0 10px;
}

.back-top .top-link {
  display: inline-block;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7a4b2e;
  text-decoration: none;
  border: 2px solid #e8d8c7;
  border-radius: 30px;
  background: linear-gradient(
    to bottom,
    #fffdf9 0%,
    #fff3e8 100%
  );
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

/* hover（PC） */
.back-top .top-link:hover {
  background: linear-gradient(
    to bottom,
    #fff7ef 0%,
    #ffe7d6 100%
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.12);
}

/* =====================================================
   スマホ調整
===================================================== */
@media (max-width: 768px) {

  .back-top {
    margin: 18px 0 20px;
  }

  .back-top .top-link {
    font-size: 13px;
    padding: 9px 22px;
    border-radius: 26px;
  }
}

/* ===============================================================================
   TOPへ戻るボタン（WRR専用・PC/SP共通）ページ最下部　　　　　　　　ここまで
================================================================================== */

















/* ==========================================================================================================
 アダルト漫画、同人誌ランキングセクション　ボタン形状共通　【強制上書き】※同人ボタンのみここで定義していない
============================================================================================================= */

/* ボタン配置 */
.lead-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 18px;
}

/* ボタン本体（共通デザイン） */
.lead-box .lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;

  color: #7a4b2e;
  text-decoration: none;

  background: linear-gradient(
    to bottom,
    #fffdf9 0%,
    #fff3e8 100%
  );

  border: 2px solid #e8d8c7;
  border-radius: 3px; /* ほぼ直角 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);

  transition: all 0.25s ease;
}

/* アイコン */
.lead-box .lead-btn .ranking2-icon {
  width: 20px;
  height: auto;
  opacity: 0.9;
}

/* hover（PC） */
@media (hover: hover) {
  .lead-box .lead-btn:hover {
    background: linear-gradient(
      to bottom,
      #fff7ef 0%,
      #ffe7d6 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.12);
  }
}

/* =====================================================
   スマホ（768px以下）
===================================================== */
@media (max-width: 768px) {

  .lead-actions {
    gap: 7px;
  }

  .lead-box .lead-btn {
    padding: 10px 10px;
    font-size: 13px;
  }
}

/* =====================================================
   PC（769px以上）少しだけ大きく
===================================================== */
@media (min-width: 769px) {

  .lead-actions {
    gap: 32px;
  }

  .lead-box .lead-btn {
    padding: 14px 42px; /* 横方向を強調 */
    font-size: 15px;
  }

  .lead-box .lead-btn .ranking2-icon {
    width: 21px;
  }
}

/* ==========================================================================================================
 アダルト漫画、同人誌ランキングセクション　ボタン形状共通　【強制上書き】※同人ボタンのみここで定義していない
============================================================================================================= */

/* ==============================================================================================
   同人誌ランキング内のボタンを上書き　(強制)
================================================================================================= */
.lead-box .lead-actions .lead-btn {
  color: #7a4b2e !important;

  background: linear-gradient(
    to bottom,
    #fffdf9 0%,
    #fff3e8 100%
  ) !important;

  border: 2px solid #e8d8c7 !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08) !important;
}


/* ==============================================================================================
   同人誌ランキング内のボタンを上書き　(強制)　　　　　　ここまで
================================================================================================= */












/* ===============================================================================
 高評価作品はこちらセクションの題目の割込み囲みボーダー　　　
================================================================================ */

/* ベージュ背景 */
.ranking-box {
  position: relative;
  width: 100%;
  background: #fff8f4;
  padding: 10px 0;
  box-sizing: border-box;
  text-align: center;
}




/* 白い囲み枠 */

body .ranking-inner {
  position: relative !important;
  margin: 40px auto 0 !important;        /* 高評価作品はこちらの上部に余白追加*/
  padding: 45px 60px 40px !important;
  border: 2px solid #e8d8c7 !important;
  border-radius: 10px !important;
  background: #fffaf6 !important;
  width: 92% !important;
  max-width: 1200px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}


/* ================================
   高評価作品はこちら（HTML直書き版）
   ================================ */

/* 親（枠）に基準を作る */
.kouhyouka-section .ranking-inner {
  position: relative;
}

/* タイトルラベル本体 */
.kouhyouka-titlel {
  position: absolute;
  top: -17px;                 /* ← 枠線に被せる位置（調整可） */
  left: 50%;
  transform: translateX(-50%);
  background: #fff8f4;        /* 枠内と同じ色 */
  padding: 0 18px;
  z-index: 5;
}

/* 文字スタイル */
.kouhyouka-titlel span {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


/* グラデーションライン */
.wrr-short-gradient {
  width: 80%;
  height: 6px;
  margin: 0 auto 20px;
  border-radius: 4px;
  background: linear-gradient(to right, #f5b6c5, #f6e6a2, #a4d9c6, #b8c7f8);
}


/* ======================================================================
 高評価作品はこちらセクション（PC版）ここまで
====================================================================== */


/* ================================
   高評価作品はこちら（HTML直書き版）
   ================================ */

/* 親（枠）に基準を作る */
.kouhyouka-section .ranking-inner {
  position: relative;
}

/* タイトルラベル本体 */
.kouhyouka-titlel {
  position: absolute;
  top: -17px;                 /* ← 枠線に被せる位置（調整可） */
  left: 50%;
  transform: translateX(-50%);
  background: #fff8f4;        /* 枠内と同じ色 */
  padding: 0 18px;
  z-index: 5;
}

/* 文字スタイル */
.kouhyouka-titlel span {
  font-size: 18px;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


/* グラデーションライン */
.wrr-short-gradient {
  width: 80%;
  height: 6px;
  margin: 0 auto 20px;
  border-radius: 4px;
  background: linear-gradient(to right, #f5b6c5, #f6e6a2, #a4d9c6, #b8c7f8);
}


/* ======================================================================
 高評価作品はこちらセクション（PC版）ここまで
====================================================================== */


/* ================================
   高評価作品はこちら（スマホ最適化）
   ================================ */
@media screen and (max-width: 768px) {

  /* 親の余白を少し広げる（被り防止） */
  .kouhyouka-section .ranking-inner {
    padding-top: 32px;
  }

  /* タイトルラベル位置調整 */
  .kouhyouka-titlel {
    top: -14px;              /* PCより少し浅く */
    padding: 0 14px;
  }

  /* タイトル文字を少しだけ小さく */
  .kouhyouka-titlel span {
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  /* グラデーションラインを短く・細く */
  .wrr-short-gradient {
    width: 90%;
    height: 4px;
    margin: 10px auto 16px;
    border-radius: 3px;
  }

}


/* ======================================================================
 高評価作品はこちら　下線レインボー
====================================================================== */

/* 高評価作品はこちら：レインボー下線 */
.kouhyouka-titlel span {
  position: relative;
  display: inline-block;
  padding-bottom: 3px; /* 下線との距離 */
}

/* 下線 */
.kouhyouka-titlel span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  border-radius: 3px;

  background: linear-gradient(
    90deg,
    #f6a5b8,
    #f6d38f,
    #9ed8c7,
    #a6bdf6
  );
}


/* ======================================================================
 高評価作品はこちら　下線レインボー　　　ここまで
====================================================================== */



/* =========================================================
【スマホ】（768px以下）高評価作品はこちらセクション（中央寄せ＋gap狭め＋縮小最終版）
========================================================= */
@media screen and (max-width: 768px) {

  /* 全体囲み */
body div.ranking-box .ranking-inner {
  width: 96% !important;        /* ← ★ 横幅を92% → 96% に拡大（スマホ画面いっぱい寄りに） */
  max-width: 340px !important;  /* ← ★ スマホ実寸に合わせ上限を広めに */
  padding: 26px 20px 28px !important;
  border-width: 1.6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}


  /* タイトルラベル */
  body div.ranking-box .ranking-inner::before {
    font-size: 14px !important;
    top: -12px !important;
    padding: 0 10px !important;
    background: #fff8f4 !important;
    line-height: 1.4 !important;
  }

  /* グラデーションライン */
  body div.ranking-box .wrr-short-gradient {
    width: 80% !important;
    height: 4px !important;
    margin: 0 auto 16px !important;
  }


  /* 外枠の余白調整 */
  body div.ranking-box {
    margin: 10px auto 10px !important;
    padding: 24px 0 !important;
    background: #fff8f4;
  }

  body div.ranking-box .ranking-inner {
    margin: 0 auto !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}
/* =========================================================
【スマホ】（768px以下）高評価作品はこちらセクション（gap狭め最終版）
========================================================= */












/* ==================================================================================================
   【高評価セクション専用ボタン】（kouhyouka-btn）　　　クラス完全分離
===================================================================================================== */


/* -------------------------------------------------
   親（既存flex前提）：レイアウト調整のみ
------------------------------------------------- */
.kouhyouka-section .ranking-links {
  display: flex; 
  justify-content: center;
  align-items: center;
  gap: 28px;
}


/* -------------------------------------------------
   ボタン本体（PC / スマホ共通）
------------------------------------------------- */
.kouhyouka-section .kouhyouka-btn {
  width: 260px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;

  color: #7a4b2e;
  text-decoration: none;

  background: linear-gradient(
    to bottom,
    #fffdf9 0%,
    #fff3e8 100%
  );

  border: 2px solid #e8d8c7;
  border-radius: 3px; /* ほぼ直角 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);

  transition: all 0.25s ease;
}


/* -------------------------------------------------
   アイコン
------------------------------------------------- */
.kouhyouka-section .kouhyouka-btn .play-icon {
  width: 20px;
  height: auto;
  opacity: 0.9;
}


/* -------------------------------------------------
   hover（PCのみ）
------------------------------------------------- */
@media (hover: hover) {
  .kouhyouka-section .kouhyouka-btn:hover {
    background: linear-gradient(
      to bottom,
      #fff7ef 0%,
      #ffe7d6 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.12);
  }
}



/* ==================================================================================
【スマホ】 高評価セクション（スマホ用・完全確定版）
   ・横並び固定
   ・文字数非依存の固定サイズ
   ・ボタン間余白は margin で強制
   ・Cocoonの上書きを完全回避
===================================================================================== */

@media (max-width: 768px) {

  /* 親：横並びを強制 */
  .kouhyouka-section .ranking-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
	gap: 2px !important;   /* ← gapで余白 */  
  }

 

  /* ボタン本体：サイズ完全固定 */
  .kouhyouka-section .kouhyouka-btn {
    flex: 0 0 150px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1px;
    padding: 0 10px;

    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  /* アイコン調整 */
  .kouhyouka-section .kouhyouka-btn .play-icon {
    width: 17px;
    height: auto;
  }
}



/* =================================================
【PC】（769px以上）
================================================= */
@media (min-width: 769px) {

  .kouhyouka-section .ranking-links {
    flex-direction: row;
    gap: 32px;
  }

  .kouhyouka-section .kouhyouka-btn {
    padding: 14px 42px;
    font-size: 15px;
  }

  .kouhyouka-section .kouhyouka-btn .play-icon {
    width: 21px;
  }
}



/* =====================================================================================
   【高評価セクション専用ボタン】（kouhyouka-btn）　　　クラス完全分離
===================================================================================== */





/* ============================================================================================================
   TOPページ案内セクション（高評価ボタンと揃える） ・高評価セクションと見た目を一致・クラス完全分離  
   PC / スマホ対応
============================================================================================================== */

/* セクション全体 */
.topnav-section {
  margin: 40px auto;
  text-align: center;
}

/* ボタン親（横並び） */
.topnav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

/* ボタン本体（PC / スマホ共通） */
.topnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 260px;
  height: 48px;

  padding: 0 20px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;

  color: #7a4b2e;
  text-decoration: none;
  white-space: nowrap;

  background: linear-gradient(
    to bottom,
    #fffdf9 0%,
    #fff3e8 100%
  );

  border: 2px solid #e8d8c7;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);

  transition: all 0.25s ease;
}

/* hover（PCのみ） */
@media (hover: hover) {
  .topnav-link:hover {
    background: linear-gradient(
      to bottom,
      #fff7ef 0%,
      #ffe7d6 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.12);
  }
}

/* =================================================
   スマホ（768px以下）
================================================= */
@media (max-width: 768px) {

  /* 横並び維持 */
  .topnav-links {
    gap: 4px;
  }

  .topnav-link {
    flex: 0 0 150px;
    height: 48px;

    font-size: 13px;
    padding: 0 10px;
  }
}


/* ============================================================================================================
   TOPページ案内セクション（高評価ボタンと揃える） ・高評価セクションと見た目を一致・クラス完全分離  
   PC / スマホ対応
============================================================================================================== */






/* ==============================================================================================
   TOPページ案内：スマホでは「新着TOP」のみ非表示   ※クラス topnav セクション専用（誤爆なし）   
============================================================================================== */

@media (max-width: 768px) {

  .topnav-links .topnav-link:first-child {
    display: none;
  }
}

/* ==============================================================================================
   TOPページ案内：スマホでは「新着TOP」のみ非表示   ※クラス topnav セクション専用     ここまで   
================================================================================================== */















/* ====================================================================================================
 週間、月間ランキング詳細ページ 　　　全体　　　　　　　　　　　　折りたたみはJS　
======================================================================================================= */

/* 縦ランキング */
.ga4-vertical-ranking {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .ga4-vertical-ranking {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 31位以降は非表示 */
.ga4-vertical-item.is-hidden {
  display: none;
}

/* 折りたたみボタン */
.ranking-more-wrap {
  text-align: center;
  margin: 24px 0;
}

.ranking-more-btn {
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 14px;
}



/* スマホ：縦ランキングの余白を詰める */
@media (max-width: 767px) {
  .ga4-vertical-ranking {
 /* 横のサムネの間の余白を詰める */ 
    gap: 2px;   
  }
}


/* ====================================================================================================
 週間、月間ランキング詳細ページ 　　　全体　　　　　　　折りたたみはJS　　　　　ここまで
======================================================================================================= */






/* =========================================
   週間ランキング：PCのみサムネを小さく
========================================= */
@media (min-width: 1024px) {
  .ga4-vertical-item {
    max-width: 220px;   /* ← 今より一段階小さく */
  }

  .ga4-vertical-item .thumb img {
    width: 100%;
    height: auto;
  }
}




/* ====================================================================================================
 【ラベル】週間、月間ランキング詳細ページ  ランキング順位をラベル化 ※ 位置はHTML任せ（一切変更しない） 
======================================================================================================= */

.rank-badge {
  display: inline-block;
  margin-bottom: 6px;   /* サムネとの余白だけ微調整 */

  padding: 4px 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: #e60033;   /* サイトカラー */
  border-radius: 6px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* スマホ */
@media (max-width: 768px) {
  .rank-badge {
    font-size: 12px;
    padding: 3px 7px;
  }
}

/* ====================================================================================================
【ラベル】 週間、月間ランキング詳細ページ  ランキング順位をラベル化 ※ 位置はHTML任せ（一切変更しない） ここまで
======================================================================================================= */






/* ===========================================================================
週間、月間ランキング詳細ページのサムネイル下のタイトル定義
============================================================================== */

/* ランキング：作品タイトル */
.rank-title {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  text-align: center;
	
  /* 2行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .rank-title {
    font-size: 13px;
  }
}


/* ===========================================================================
週間、月間ランキング詳細ページのサムネイル下のタイトル定義　　　　ここまで
============================================================================== */




/* ===========================================================================
Cocoonのリンク下線を【週間、月間ランキング詳細ページ】で消す
============================================================================== */

.ga4-vertical-item a,
.ga4-vertical-item a:hover {
  text-decoration: none !important;
  background-image: none !important;
}

/* ===========================================================================
Cocoonのリンク下線を【週間、月間ランキング詳細ページ】で消す　　　　ここまで
============================================================================== */



/* =================================================
   週間ランキング：PCのみ左右余白を追加
==================================================== */

@media (min-width: 1024px) {
  .ga4-vertical-ranking {
    max-width: 1000px;      /* ← 全体を少し絞る */
    margin: 0 auto;         /* ← 中央寄せ */
    padding: 0 24px;        /* ← 両サイド余白 */
  }
}

/* ===================================================
   週間ランキング：PCのみ左右余白を追加
====================================================== */





/* ==============================================================================
  アダルト漫画、同人誌 週間 月間ランキングページ専用の見出し王冠アイコン
================================================================================= */

.latest-title .ranking-crown {
  color: #ffc83d; /* 王冠色 */
  position: relative;
  top: -0.15em; /* ← 数値を微調整 */	
}

/* ==============================================================================
  アダルト漫画、同人誌 週間 月間ランキングページ専用の見出し王冠アイコン
================================================================================= */




/* ==============================================================================
同人誌 週間 月間ランキングページ専用の見出しの色
================================================================================= */

h1.latest-title span.ranking-syousai-doujin {
  color: #2f6fe4 !important;   /* ロイヤルブルー（同人誌最適） */
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0;
  padding: 0;
  display: inline;
  white-space: nowrap;
}

/* ==============================================================================
同人誌 週間 月間ランキングページ専用の見出しの色　　　　　　　　　　ここまで
================================================================================= */





/* ==============================================================================
アダルト漫画 週間 月間ランキングページ専用の見出しの色
================================================================================= */

h1.latest-title span.ranking-syousai-manga {
  color: #d93845 !important;   /* WRR用・鮮やか赤 */
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0;
  padding: 0;
  display: inline;
  white-space: nowrap;         /* アダルト｜漫画 分断防止 */
}

/* ==============================================================================
アダルト漫画 週間 月間ランキングページ専用の見出しの色　　　　　　　ここまで
================================================================================= */








/* =======================================================================================================
アダルト漫画、同人誌　右の週間、月間ランキングページに飛ぶテキストリンクにcocoonの勝手に【下線を非表示】
========================================================================================================= */

.adult-badge.is-link {
  text-decoration: none !important;
}


.doujin-badge.is-link {
  text-decoration: none !important;
}


/* ============================================================================================================
アダルト漫画、同人誌　右の週間、月間ランキングページに飛ぶテキストリンクにcocoonの勝手に【下線を非表示】ここまで
============================================================================================================== */


/* ========================================================================
 ≫キャラクター紹介ページ≪ にcocoonが勝手につける下線【下線を非表示】
=========================================================================== */
.wrr-character-top-link {
  text-decoration: none !important;
}



/* ===================================================================================================
作品詳細ページのテキストリンク＜最大90％OFFセール作品はこちら ＞cocoonの勝手に【下線を非表示】
====================================================================================================== */

.wrr-sale-link-under a {
  text-decoration: none !important;
}

/* =======================================================================================================
作品詳細ページのテキストリンク＜最大90％OFFセール作品はこちら ＞cocoonの勝手に【下線を非表示】 ここまで
========================================================================================================== */








/* ================================================================
ナビ追従説明エリアの説明文の折り返し禁止の定義
=================================================================== */

@media (max-width: 768px) {
  #menu-description {
    white-space: nowrap;       /* 折り返さない */
    overflow: hidden;          /* はみ出し隠す */
    text-overflow: ellipsis;   /* …で省略 */
  }
}

/* ================================================================
ナビ追従説明エリアの説明文の折り返し禁止の定義　　　　　ここまで
=================================================================== */








/* ==========================================================================================
アダルト漫画 週間 月間ランキングページに飛ぶ丸形ボタン型リンク　　(中央揃えの定義)
============================================================================================= */

.adult-badge.is-link,
.doujin-badge.is-link {
  display: block;          /* インライン → ブロック化 */
  width: fit-content;      /* ボタン幅＝中身 */
  margin: 16px auto;       /* 左右 auto で中央配置 */
  text-align: center;

}

/* ==============================================================================================
アダルト漫画 週間 月間ランキングページに飛ぶ丸形ボタン型リンク　　(中央揃えの定義)　　ここまで
================================================================================================= */









/* =========================================================================================
【PC / スマホ共通】        ＼ リアルタイム集計 ／ + 毎日自動更新 のサイズ調整
============================================================================================ */

.ranking-realtime-note {
  margin-top: 6px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 0.95em;
  color: #9a9a9a;
  letter-spacing: 0.08em;
  line-height: 1.4;
  user-select: none;
}

/* サブ注記：※毎日自動更新 */
.ranking-realtime-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.95em;
  color: #c2c2c2;
  letter-spacing: 0.05em;
}

/* =========================
PC表示
========================= */

@media screen and (min-width: 768px) {
  .ranking-realtime-note {
    font-size: 0.8em;
    margin-top: 6px;
    margin-bottom: 18px;
  }

  .ranking-realtime-sub {
    font-size: 0.85em;
  }
}

/* =========================
スマホ表示
========================= */

@media screen and (max-width: 767px) {
  .ranking-realtime-note {
    font-size: 0.75em;
    margin-top: 4px;
    margin-bottom: 14px;
  }

  .ranking-realtime-sub {
    font-size: 0.8em; /* スマホは可読性をほんの少し優先 */
  }
}

/* =========================================================================================
【PC / スマホ共通】        ＼ リアルタイム集計 ／ + 毎日自動更新 のサイズ調整     　ここまで
============================================================================================ */








/* ==========================================================
   履歴セクション 共通
========================================================== */
.recent-viewed-block .thumb-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.recent-viewed-block .thumb-item {
  flex: 0 0 auto;
  border-radius: 6px;
  overflow: hidden;
}

.recent-viewed-block .thumb-item img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}


/* ==========================================================
   🟦 アダルト漫画履歴（現状維持サイズ）
========================================================== */
#recent-adult .thumb-item {
  width: 120px;          /* 今のまま */
}

#recent-adult .thumb-item img {
  aspect-ratio: 3 / 4.5; /* 漫画比率 */
  object-position: center top;
}


/* ==========================================================
   🟪 同人履歴（ここだけ大きくする）
========================================================== */
#recent-doujin .thumb-item {
  width: 160px;          /* ← 大きくしたサイズ */
}

#recent-doujin .thumb-item img {
  aspect-ratio: 4 / 3;   /* 同人比率 */
  object-position: center center;
}










/* =====================================================================================
   【PC表示のみ】同人誌 履歴のみ：最大14件まで表示　アダルト漫画は最大18件
======================================================================================== */

/* PCのみ（769px以上） */
@media (min-width: 769px) {

  /* 15件目以降を非表示 */
  #recent-doujin .thumb-item:nth-child(n + 15) {
    display: none !important;
  }

}

/* ===========================================================================================
   【PC表示のみ】同人誌 履歴のみ：最大14件まで表示　アダルト漫画は最大18件　    ここまで
============================================================================================== */








/* =======================================================================================================
【スマホ表示件数】   最近チェックした作品　　【アダルト漫画3カラム9作品】 【同人誌2カラム6作品】
========================================================================================================== */

@media (max-width: 768px) {

  /* --- アダルト漫画：3カラム × 3行 = 9件 --- */
  #recent-adult .thumb-item {
    width: calc(100% / 3 - 8px);
  }

  #recent-adult .thumb-item:nth-child(n + 10) {
    display: none;
  }

  /* --- 同人作品：2カラム × 3行 = 6件 --- */
  #recent-doujin .thumb-item {
    width: calc(100% / 2 - 8px);
  }

  #recent-doujin .thumb-item:nth-child(n + 7) {
    display: none;
  }
}


/* =======================================================================================================
【スマホ表示件数】  【最近チェックした作品】　　【アダルト漫画3カラム9作品】 【同人誌2カラム6作品】　ここまで
========================================================================================================== */










/* ===============================================================================
【最近チェックした作品】【アダルト漫画履歴】のサムネイル群の配置　　まとまり
================================================================================== */


/* スマホ：サムネ群を中央寄せ＋最小余白（完全置き換え版） */
@media (max-width: 768px) {

  /* サムネ群コンテナを中央寄せ */
  #recent-adult.thumb-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* ← 中央寄せの核心 */
    align-items: flex-start !important;

    gap: 4px !important;       /* 左右の余白 */
    row-gap: 6px !important;   /* 上下の余白 */

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 各サムネ */
  #recent-adult .thumb-item {
    margin: 0 !important;
    padding: 2px !important;
    height: auto !important;
  }

  /* aタグ・画像の密着 */
  #recent-adult .thumb-item > a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  #recent-adult .thumb-item img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
  }

  /* 擬似要素対策（保険） */
  #recent-adult .thumb-item::before,
  #recent-adult .thumb-item::after {
    content: none !important;
    display: none !important;
  }

}

/* =======================================================================================
【最近チェックした作品】【アダルト漫画履歴】のサムネイル群の配置　まとまり　　　ここまで
========================================================================================== */














/* ======================================================================================
【スマホ】【同人】【最近チェックした作品】（120px制限を破壊）画面幅いっぱい2カラム
========================================================================================= */

@media (max-width: 768px) {

  /* ▼ 同人コンテナ */
  .recent-viewed-block #recent-doujin.thumb-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;

    gap: 6px !important;      /* 最小余白 */
    padding: 0 !important;
  }

  /* ▼ 同人サムネ枠 */
  .recent-viewed-block #recent-doujin .thumb-item {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* ▼ aタグ */
  .recent-viewed-block #recent-doujin .thumb-item > a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  /* ▼ 画像：120px制限を完全解除 */
  .recent-viewed-block #recent-doujin .thumb-item img {
    width: 100% !important;
    max-width: none !important;   /* ← これが最重要 */
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

}

/* ============================================================================================
【スマホ】【同人】【最近チェックした作品】（120px制限を破壊）画面幅いっぱい2カラム　　ここまで
=============================================================================================== */





/* ===============================================================================
【スマホ】【同人】【最近チェックした作品】同人サムネ下の巨大余白を完全に消す
================================================================================== */

@media (max-width: 768px) {

  /* ▼ 同人：サムネ枠の「高さ固定・余白」を完全解除 */
  .recent-viewed-block #recent-doujin .thumb-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0 !important;   /* ← テキスト行高由来の余白殺し */
  }

  /* ▼ aタグも高さを持たせない */
  .recent-viewed-block #recent-doujin .thumb-item > a {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  /* ▼ 画像は枠いっぱいに */
  .recent-viewed-block #recent-doujin .thumb-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

}


/* ==========================================================================================
【スマホ】【同人】【最近チェックした作品】同人サムネ下の巨大余白を完全に消す　　　ここまで
============================================================================================= */





/* ===========================================================================
「アダルト漫画履歴」「同人誌作品履歴」の見出し(h3)のフォントサイズ、色
============================================================================= */

.recent-group-title {
  color: #333333;        /* 真っ黒を避ける */
  font-size: 18px;       /* PC */
  font-weight: 600;      /* 太さ統一 */
  line-height: 1.4;
  margin: 0 0 12px 0;
}

/* スマホ */
@media (max-width: 768px) {
  .recent-group-title {
    font-size: 16px;
    font-weight: 600;
  }
}


/* ==================================================================================
「アダルト漫画履歴」「同人誌作品履歴」の見出し(h3)のフォントサイズ、色　　　ここまで
==================================================================================== */






/* =====================================================
【スマホ】関連作品サムネの塊を「左余白で調整」
・1～2作品でも不自然にならない
===================================================== */
@media (max-width: 768px) {

  .related-by-author .related-thumbs,
  .related-by-series .related-thumbs,
  .related-by-genre .related-thumbs,
  .related-by-publisher .related-thumbs {

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;

    /* ★ここが核心 */
    padding-left: 50px !important;   /* 左に余白を足すだけ */
    padding-right: 0 !important;

    gap: 8px !important;
  }

}





/* =====================================================
【スマホ】同じ作家の作品（related-by-author）
・既存flexは維持
・左余白で中央寄せ“風”
・アダルト漫画3カラム
・同人誌2カラム
===================================================== */
@media (max-width: 768px) {

  /* --- サムネ群：構造は触らない --- */
  .related-by-author .related-thumbs {
    width: 100% !important;          /* 80%を殺す */
    margin: 0 !important;            /* 余計なmargin除去 */

    padding-left: 12px !important;   /* ← 見た目調整の核心 */
    padding-right: 0 !important;

    gap: 8px !important;
  }

  /* --- アダルト漫画：3カラム --- */
  .related-by-author.manga .related-item {
    width: calc((100% - 16px) / 3) !important;
  }

  /* --- 同人誌：2カラム --- */
  .related-by-author.doujin .related-item {
    width: calc((100% - 8px) / 2) !important;
  }

  /* --- imgはフル幅 --- */
  .related-by-author .related-item img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

}






/* =====================================================
【スマホ】この作品の類似作品（related-by-genre）
・既存flexは維持
・左余白で中央寄せ“風”
・アダルト漫画：3カラム
・同人誌：2カラム
===================================================== */
@media (max-width: 768px) {

  /* --- サムネ群：構造は触らない --- */
  .related-by-genre .related-thumbs {
    width: 100% !important;        /* 80%を殺す */
    margin: 0 !important;

    padding-left: 12px !important; /* 見た目調整の核心 */
    padding-right: 0 !important;

    gap: 8px !important;
  }

  /* --- アダルト漫画：3カラム --- */
  .related-by-genre.manga .related-item {
    width: calc((100% - 16px) / 3) !important;
  }

  /* --- 同人誌：2カラム --- */
  .related-by-genre.doujin .related-item {
    width: calc((100% - 8px) / 2) !important;
  }

  /* --- imgはフル幅 --- */
  .related-by-genre .related-item img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

}







/* =====================================================
【スマホ】同じ出版社の作品（related-by-publisher）
・既存flex維持
・左余白で中央寄せ“風”
・アダルト漫画：3カラム
・同人誌：2カラム
===================================================== */
@media (max-width: 768px) {

  /* --- サムネ群：構造は触らない --- */
  .related-by-publisher .related-thumbs {
    width: 100% !important;        /* 80%を殺す */
    margin: 0 !important;

    padding-left: 12px !important; /* 視覚調整の核心 */
    padding-right: 0 !important;

    gap: 8px !important;
  }

  /* --- アダルト漫画：3カラム --- */
  .related-by-publisher.manga .related-item {
    width: calc((100% - 16px) / 3) !important;
  }

  /* --- 同人誌：2カラム --- */
  .related-by-publisher.doujin .related-item {
    width: calc((100% - 8px) / 2) !important;
  }

  /* --- imgはフル幅 --- */
  .related-by-publisher .related-item img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

}






/* =====================================================
【スマホ】このシリーズの他の作品（related-by-series）
・既存flex維持
・左余白で中央寄せ“風”
・アダルト漫画：3カラム
・同人誌：2カラム
===================================================== */
@media (max-width: 768px) {

  /* --- サムネ群：構造は触らない --- */
  .related-by-series .related-thumbs {
    width: 100% !important;        /* 80%を殺す */
    margin: 0 !important;

    padding-left: 12px !important; /* 視覚調整の核心 */
    padding-right: 0 !important;

    gap: 8px !important;
  }

  /* --- アダルト漫画：3カラム --- */
  .related-by-series.manga .related-item {
    width: calc((100% - 16px) / 3) !important;
  }

  /* --- 同人誌：2カラム --- */
  .related-by-series.doujin .related-item {
    width: calc((100% - 8px) / 2) !important;
  }

  /* --- imgはフル幅 --- */
  .related-by-series .related-item img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

}







/* =====================================================
【スマホのみ】
このシリーズの他の作品
フォントサイズを「同じ作家の作品」と統一
===================================================== */
@media (max-width: 768px) {

  /* 見出しタイトル */
  .related-by-series h2.related-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
}






/* ================================================================================================
【WRRの世界へようこそです：Marina 専用の吹き出し＋キャラ位置】完全独立・位置フル調整版
================================================================================================ */

/* ===================================
▼ レイアウト基礎（PC）
====================================== */
.wrr-welcome-marina {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 70px;
  position: relative;
  margin: 10px auto;
}

/* =================================================
▼ 吹き出し（PC）
================================================= */
.wrr-balloon-marina {
  max-width: 420px;
  background: #fff7f5;
  border: 2px solid #f1d7cf;
  padding: 20px 22px;
  border-radius: 14px;
  font-size: 17px;

  line-height: 1.65;
  color: #a66e4a;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);

  position: relative;

  /* ★★★★★ PC：吹き出し位置調整 ★★★★★ */
  top: 25px;     /* 上下：マイナスで上 / プラスで下 */
  left: 80px;      /* 左右：プラスで右 / マイナスで左 */
}

/* ▼ 吹き出し三角（PC） */
.wrr-balloon-marina::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 36px;
  border-width: 12px 0 12px 14px;
  border-style: solid;
  border-color: transparent transparent transparent #f1d7cf;
}

.wrr-balloon-marina::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 38px;
  border-width: 10px 0 10px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #fff7f5;
}

/* =================================================
▼ キャラクター（PC）
================================================= */
.wrr-character-marina {
  width: 230px;
  height: auto;
  position: relative;

  /* ★★★★★ PC：キャラ位置調整 ★★★★★ */
  top: 0px;       /* 上下 */
  left: 0px;      /* 左右 */

  pointer-events: none;
  user-select: none;
}


/* =================================================
▼ スマホ（PCと同じ横並びレイアウト）
================================================= */
@media (max-width: 768px) {

  .wrr-welcome-marina {
    display: flex;
    flex-direction: row;       /* ★ 縦並びにしない */
    justify-content: center;
    align-items: flex-start;
    gap: 16px;                 /* PCより少し詰める */
  }

  /* =============================
  吹き出し（スマホ）
  ============================= */
  .wrr-balloon-marina {
    font-size: 14px;
    line-height: 1.55;
    text-align: left;          /* ← PCと同じ自然な読み */
 /* ★ ここが核心 ★ */
    width: 200px !important;        /* ← 約6〜8文字分の横幅 */
    min-width: 180px !important;    /* ← 文字幅基準を完全破壊 */
	max-width: 90% !important;      /* 画面はみ出し防止 */ 
    text-align: left !important;    /* 縦詰め防止 */
    white-space: normal !important; /* 念のため */
    position: relative;
    padding: 4px 4px;
	font-weight: 600;
	color: #a66e4a;  
  
    /* ★★★★★ スマホ：吹き出し位置調整 ★★★★★ */
    top: 10px;                  /* 上下 */
    left: 30px;                 /* 左右 */
  }

  /* =============================
  キャラ（スマホ）
  ============================= */
  .wrr-character-marina {
    width: 150px;              /* スマホは少し小さく */
    position: relative;

    /* ★★★★★ スマホ：キャラ位置調整 ★★★★★ */
    top: 15px;                  /* 上下 */
    left: 0px;                 /* 左右 */
  }
}

/* ================================================================================================
【WRRの世界へようこそです：Marina 専用の吹き出し＋キャラ位置】完全独立・位置フル調整版
=================================================================================================== */


















/* =====================================================
WRR TOP：控えめランキング導線（1行リンクのみ）
===================================================== */

.wrr-top-lead {
  text-align: center;
  margin: 5px auto 5px; /* 作品群を圧迫しない */
}

/* メインリンク */
.wrr-top-lead-link {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: #f36287;                 /* 主張しすぎないピンク */
  text-decoration: none;
  letter-spacing: 0.04em;         /* PCでは少し余裕 */
  line-height: 1.4;
  transition: color 0.2s ease;
}

/* ホバー（控えめ） */
.wrr-top-lead-link:hover {
  color: #3b82f6;
  text-decoration: underline;
}


/* 閲覧回数 週間人気TOP100 リンク：下線を完全に無効化 */
.wrr-top-lead-link,
.wrr-top-lead-link:hover,
.wrr-top-lead-link:focus,
.wrr-top-lead-link:active,
.wrr-top-lead-link:visited {
  text-decoration: none !important;
}


/* =========================
スマホ最適化：上下余白を詰める
========================= */
@media (max-width: 768px) {

  .wrr-top-lead {
    margin: 10px auto 14px;   /* ← セクション自体を少し詰める */
  }

  .wrr-top-lead-link {
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.25;        /* ← 行の上下を詰める（重要） */

    padding: 0 !important;    /* ← 余計な上下余白を完全排除 */
    margin: 0 !important;     /* ← aタグ由来の余白対策 */
    display: inline-block;    /* ← 行高制御を安定させる */
  }
}











.wrr-top-lead-link .top100 {
  font-size: 0.82em;
  color: #e65a6b;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .wrr-top-lead-link .top100 {
    font-size: 0.78em;
  }
}
















/* ===========================================================================================
  ＼ 高評価更新中 ／ ※即日反映　　高評価セクションの各ボタン下の補足テキスト
============================================================================================== */

/* ボタン直下に2カラムで配置 */
.ranking-updates-under {
  width: fit-content;   /* ← 追加 */
  margin: 6px auto 0;   /* ← auto で完全中央寄せ */
  display: grid;
  grid-template-columns: repeat(2, max-content); /* ← ここ変更 */
  justify-items: center;
  margin-top: 6px;   /* ボタンとの距離 */
  margin-bottom: 0; /* 下の余白を作らない */
	
  column-gap: 150px;
}

/* 各更新ブロック */
.ranking-updates-under .update {
  text-align: center;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

/* メイン文言（＼ 高評価更新中 ／） */
.update-main {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* サブ文言（※即日反映） */
.update-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #666;
}

/* 色分け */
.manga-update .update-main {
  color: #e45b5b; /* 赤系 */
}

.doujin-update .update-main {
  color: #4a78d3; /* 青系 */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .ranking-updates-under {
    grid-template-columns: repeat(2, max-content);
    column-gap: 50px;   /* スマホ用に少し狭める */
  }
}




/* ===========================================================================================
  ＼ 高評価更新中 ／ ※即日反映　　高評価セクションの各ボタン下の補足テキスト　　ここまで
============================================================================================== */






/* =========================================================================================
 作品詳細ページ 大CVボタンの下 　　　最大90％OFF 補助テキストCV（静音設計）
=========================================================================================== */

.wrr-sale-under-wrap {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
}

/* 最大90％OFF テキストリンク */
.wrr-sale-link-under {
  margin: 0;
}

.wrr-sale-link-under a {
  font-size: 13px;
  color: #666;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.wrr-sale-link-under a:hover {
  text-decoration: underline;
}

/* 週替わり更新 補足テキスト */
.wrr-sale-note {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.08em;
}




/* ===================================================================================================
【スマホ】   作品詳細ページ 大CVボタンの下 　　　最大90％OFF 補助テキストCV（静音設計）　　ボタン
====================================================================================================== */

@media (max-width: 600px) {

  .wrr-sale-under-wrap {
    margin-top: 8px;
    margin-bottom: 16px;
  }

  /* 最大90％OFF テキストリンク */
  .wrr-sale-link-under a {
    font-size: 12px;
    letter-spacing: 0.01em;
  }

  /* 週替わり更新テキスト */
  .wrr-sale-note {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}


/* =========================================================================================
 作品詳細ページ 大CVボタンの下 　　　最大90％OFF 補助テキストCV（静音設計）　　ここまで
=========================================================================================== */




/* ====================================================================================================
   CV領域付近の：作家・評価 中央表示　　　※作品詳細ページ上部の物とはロジックは同じだが完全独立
 ====================================================================================================== */

.cv-meta-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  text-align: center;
}

/* 作家行 */
.cv-meta-author {
  font-size: 14px;
  color: #555;
}

.cv-meta-author i {
  margin-right: 6px;
}

.cv-meta-author a {
  color: #2b6cff;
  text-decoration: none;
}

/* 評価行 */
.cv-meta-rating {
  font-size: 14px;
  color: #555;
}

.cv-meta-rating i {
  color: #f4b400;
  margin-right: 4px;
}

.cv-stars {
  color: #f4b400;
  letter-spacing: 2px;
  margin: 0 4px;
}

.cv-rating-num {
  font-size: 13px;
  color: #666;
}



/* ================================================
  【スマホ】作家 星評価（2段中央）
   ================================================ */

@media screen and (max-width: 768px) {

  /* 全体：縦並び・中央 */
  .cv-meta-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-top: 12px;
  }

  /* 作家・評価 共通 */
  .cv-meta-author,
  .cv-meta-rating {
    justify-content: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    white-space: normal; /* ← 長い作家名の折り返し許可 */
  }

  /* 星 */
  .cv-stars {
    font-size: 13px;
    letter-spacing: 1px;
  }

  /* 数値 */
  .cv-rating-num {
    font-size: 12px;
  }
}


/* ====================================================================================================
   CV領域付近の：作家・評価 中央表示　　　※作品詳細ページ上部の物とはロジックは同じだが完全独立
 ====================================================================================================== */














/* ===============================
   評価基準 注釈テキスト
   =============================== */
.wrr-evaluation-note {
  margin: 14px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  max-width: 520px;   /* 横に広がりすぎない */
}

/* ※注釈部分を一段階弱く */
.wrr-evaluation-note span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #999;
}










@media screen and (max-width: 768px) {

  .wrr-evaluation-note {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
    padding: 0 16px;   /* 画面端ベタ防止 */
  }

  .wrr-evaluation-note span {
    font-size: 11px;
  }
}














/* ===============================================================================================
   【PC、スマホ】（SVG方式）人気エンタメ漫画ガイドのフォントアウトラインアレンジ
================================================================================================= */





/* =================================================
   WRR キャッチコピー SVG 完全最終版
   ================================================= */

/* ラッパー */
.wrr-welcome-svg {
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}

/* SVG本体 */
.wrr-welcome-svg svg {
  display: block;        /* inline由来の余白を完全排除 */
  margin: 0 auto;
}

/* テキスト共通 */
.wrr-svg-text {
  fill: #ffffff;         /* 中：白 */
  stroke: #ff5c9a;       /* 縁：ピンク */
  stroke-width: 4.8;     /* PC基準 */
  paint-order: stroke fill;
  stroke-linejoin: round;

  font-size: 22px;       /* PC文字サイズ */
  font-weight: 700;

}

/* スマホ調整 */
@media (max-width: 768px) {
  .wrr-svg-text {
    font-size: 28px;     /* スマホは大きく */
    stroke-width: 5;     /* 高DPI対策 */
    stroke: #f29ab8;   /* ダスティピンク */
	  
  }
	
   /* ★ここが肝：下段だけ少し下へ */
  .wrr-svg-text-sub {
    transform: translateY(6px);
  }	
}



/* ===============================================================================================
   【PC】（SVG方式）人気エンタメ漫画ガイドのフォントアウトラインアレンジ　　　　　ここまで
================================================================================================= */




/* ====================================================================================
  【PC,スマホ表示出し分け】 TOPページ“満足できる”名作探しを“最速最短”でご案内
======================================================================================= */

/* 初期：PC */
.wrr-text-pc {
  display: block;
}

.wrr-text-sp {
  display: none;
}

/* スマホ最適化 */
@media (max-width: 768px) {

  .wrr-text-pc {
    display: none;
  }

.wrr-text-sp {
  display: block;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}
  

}


/* ================================================================================================
  【PC,スマホ表示出し分け】 TOPページ“満足できる”名作探しを“最速最短”でご案内　　　ここまで
================================================================================================== */








/* ==========================================================================
  TOPページの品質内容の箇所　PC,スマホで文内容を出し分け
============================================================================= */

.quality-note-sp {
  display: none;
}

/* スマホ表示 */
@media (max-width: 768px) {

  .quality-note-pc {
    display: none;
  }

  .quality-note-sp {
    display: block;
	 font-size: 13px !important;     
    line-height: 1.7;
  }

}

/* ==========================================================================
  TOPページの品質内容の箇所　PC,スマホで文内容を出し分け　　　　ここまで
============================================================================= */



/* ========================================================================================
  TOPページの Wild River Reviewは、ストーリーの力を通じて   　　テキスト整形
============================================================================================ */

@media (max-width: 768px) {

  .wrr-desc-text {
    text-align: left;          /* ← 行頭を揃える */
    line-height: 1.9;          /* ← 読みやすさUP */
    letter-spacing: 0.02em;
    margin: 0 auto;
    max-width: 93%;
  }

  .wrr-desc-text br {
    display: none;             /* ← brを無効化 */
  }

}

/* =============================================================================================
  TOPページの Wild River Reviewは、ストーリーの力を通じて   　　テキスト整形　　　　ここまで
================================================================================================= */


/* ==================================================================================
【スマホ】【トップページ】お得なクーポンのお知らせです ♪　　pテキスト全体を右寄せ
===================================================================================== */

@media (max-width: 768px) {

  .elena-coupon-text {
    text-align: left;
    line-height: 1.9;
    letter-spacing: 0.02em;

    max-width: 90%;
    margin: 0 auto;
    transform: translateX(1.4em);  /* ← 視覚的に右へ */
  }

  .elena-coupon-text br {
    display: none;
  }
}


/* ==========================================================================================
【スマホ】【トップページ】お得なクーポンのお知らせです ♪　　pテキスト全体を右寄せ　ここまで
============================================================================================= */



/* ===================================================================================================
【PCのみ】作品詳細ページ 【最大90％OFFセール作品が大量に追加されているので】文章の読みやすさ改善
====================================================================================================== */

@media (min-width: 769px) {

  .sakuhin-rank-desc {
    white-space: normal;          /* 念のため明示 */
    text-wrap: balance;           /* ← 行のバランスだけ整える */
  }

}	
/* ===================================================================================================
【PCのみ】作品詳細ページ 【最大90％OFFセール作品が大量に追加されているので】文章の読みやすさ改善
====================================================================================================== */	
	
	




/* ===================================================================================================
【スマホのみ】作品詳細ページ クーポン説明テキスト スマホで読みやすく
====================================================================================================== */

@media (max-width: 768px) {

  .wrr-coupon-box p {
    max-width: 88%;          /* ← 横幅を制限（②に近づく） */
    margin: 0 auto 0.8em;    /* ← 中央寄せ＋段落間隔 */
    
    text-align: left;        /* ← 行頭は左揃え */
    line-height: 1.9;
    letter-spacing: 0.02em;

    padding-left: 0.3em;     /* ← 行頭を少しだけ内側へ */
    box-sizing: border-box;  /* ← 念のため */
  }

}


/* ===================================================================================================
【スマホのみ】作品詳細ページ クーポン説明テキスト スマホで読みやすく      　　ここまで
====================================================================================================== */







/* =========================================================================
【スマホ】同人横スクロール　スマホ幅で2作品サムネイル表示に変更
  ========================================================================= */

@media (max-width: 768px) {

  section.ranking-doujin .ga4-horizontal-ranking {
    gap: 2px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }


	
  section.ranking-doujin .ga4-horizontal-ranking > * {
    flex: 0 0 calc(52vw - 15px) !important;
    max-width: calc(52vw - 15px) !important;
  }
}

/* =========================================================================
【スマホ】同人横スクロール　スマホ幅で2作品サムネイル表示に変更
  ========================================================================= */









/* スマホ長押し時の青枠・選択・メニューを完全に無効化 */
.scroll-btn {
  -webkit-tap-highlight-color: transparent; /* タップ時 */
  -webkit-touch-callout: none;              /* iOS 長押しメニュー */
  -webkit-user-select: none;                /* iOS */
  user-select: none;                         /* Android / 他 */

  outline: none;
}





@media (max-width: 768px) {

  /* 〈〉サイズ */
  .scroll-btn {
    font-size: 38px;
    height: 5px;
  }

  /* 〈〉位置 */
  .left-btn { left: 15px; }
  .right-btn { right: 15px; }

  /* 横スクロール余白もスマホ最適化 */
  .ga4-horizontal-ranking {
    padding: 8px 44px; /* 〈〉が被らない最小限 */
  }
}



/* ========================================================================================================
【PC】横スクロールのエリアにマウスカーソルを置いてマウスホイールを回すと、本来なら「ページ全体が縦にスクロール」するはずなのに、それすら起きない症状改善
  ===================================================================================================== */

.ga4-horizontal-ranking {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ========================================================================================================
【PC】横スクロールのエリアにマウスカーソルを置いてマウスホイールを回すと、本来なら「ページ全体が縦にスクロール」するはずなのに、それすら起きない症状改善
  ===================================================================================================== */



/* ====================================================================
     || だけ黒にする
====================================================================== */

.wrr-top-lead-link .sep {
  color: #000;	
}

/* ====================================================================
     || だけ黒にする
====================================================================== */






/* ====================================================================
     | TOPページ | の枠が左寄りにるのでPC画面に対して中央寄せ
====================================================================== */

.ranking-box .top-page-link {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


@media (max-width: 768px) {
.ranking-box .top-page-link {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }
}

/* ====================================================================
     | TOPページ | の枠が左寄りにるのでPC画面に対して中央寄せ
====================================================================== */



/* 横スクロール左右ボタン 強制上書き */
button.scroll-btn-left-btn,
button.scroll-btn-right-btn,
.scroll-btn,
.scroll-btn-left-btn,
.scroll-btn-right-btn {
  font-size: 40px !important;
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
}





















/* ==============================================================================
 アダルト漫画、同人セクションの週間、月間ランキングのテキストを赤、青に
  ============================================================================== */

/* 同人誌：青 */
.lead-text--blue {
  color: #2f5fd0;
}

/* アダルト漫画：赤 */
.lead-text--red {
  color: #e24b4b;
}


/* =====================================================================================
 アダルト漫画、同人セクションの週間、月間ランキングのテキストを赤、青に　　ここまで
  ===================================================================================== */





/* =====================================================================================
アダルト漫画、同人pickupセクションの【人気のTOP上位6作品を厳選】を 赤、青に　　
  ===================================================================================== */

/* 同人誌：青 */
.pickup-text--blue {
  color: #2f5fd0;
	font-weight: 600;
}


/* アダルト漫画：赤 */
.pickup-text--red {
  color: #e24b4b;
	font-weight: 600;
}


/* =====================================================================================
アダルト漫画、同人pickupセクションの【人気のTOP上位6作品を厳選】を 赤、青に　　ここまで
  ===================================================================================== */





.footer {
  margin-top: 0 !important;
}

























/* ====================================================================
【PC】 タグボタン群の背景に色を付ける  
  ===================================================================== */

 .tag-list {
	background: rgba(255, 214, 214, 0.35);    
  }



@media screen and (max-width: 768px) {
  .tag-list {
	background: rgba(255, 214, 214, 0.35);    
  }
	
}
/* ====================================================================
【PC】 タグボタン群の背景に色を付ける  ここまで
  ===================================================================== */
























/* ==============================================================================
  作品詳細ページ　最も支持されているタグの同人誌見出し　青色
================================================================================= */

/* 同人誌見出しだけ青くする */
.wrr-popular-genre-head .doujin-collar {
  color: #2b6cff;       /* 落ち着いた公式感のある青 */
  font-weight: 600;
}

/* ==============================================================================
  作品詳細ページ　最も支持されているタグの同人誌見出し　青色　　　　ここまで
================================================================================= */




/* ==============================================================================
  作品詳細ページ　最も支持されているタグのアダルト漫画見出し　赤色　　　　
================================================================================= */

/* アダルト漫画見出しだけ赤くする */ 
.wrr-popular-genre-head .manga-collar {
  color: #e64545;       /* きつすぎないCV寄りの赤 */
  font-weight: 600;
}

/* ==============================================================================
  作品詳細ページ　最も支持されているタグのアダルト漫画見出し　赤色　　　　　　ここまで
================================================================================= */














/* ====================================================================================
  作品詳細ページ：本日時点で最も支持率の高いジャンルはこちら　　　　　
====================================================================================== */

/* =========================================
  作品詳細ページ：人気ジャンル（回遊導線）
========================================= */

/* ボックス全体 */
.wrr-popular-genre-box {
  margin: 32px 0;
  padding: 18px 16px;
  background: #fff8f0;
  border-radius: 12px;
  border: 1px solid #f1e0d0;
}

/* 見出し（PC・スマホ共通で中央寄せ） */
.wrr-popular-genre-head {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #c26a00;
  line-height: 1.6;
  text-align: center;
}


/* 同人誌の見出し大きさ */
.doujin-collar {
  font-size: 1.1em;      /* ← 少しだけ大きく */
  font-weight: bold;
}

/* アダルト漫画の見出し大きさ */
.manga-collar {
  font-size: 1.1em;      /* ← 同じ倍率でOK */
  font-weight: bold;
}


/* タグ一覧（PC・スマホ共通で中央寄せ） */
.wrr-popular-genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center; /* ← PCでも中央寄せ */
}

/* タグボタン */
.wrr-popular-genre-tags a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9e6ff;
  border-radius: 999px;
  color: #2b6cb0;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ホバー */
.wrr-popular-genre-tags a:hover {
  background: #f0f6ff;
  border-color: #9ec3ff;
}

/* =========================
   スマホのみ微調整
========================= */
@media screen and (max-width: 768px) {

  .wrr-popular-genre-box {
    padding: 16px 12px;
  }

  .wrr-popular-genre-head {
    font-size: 14px;
  }

  .wrr-popular-genre-tags a {
    font-size: 12px;
    padding: 6px 10px;
  }
	
/* 同人誌の見出し アダルト漫画の見出し大きさ */	
  .doujin-collar,
  .manga-collar {
    font-size: 1.12em;
  }
	
}


/* ====================================================================================
  作品詳細ページ：本日時点で最も支持率の高いジャンルはこちら　　　　　
====================================================================================== */















/* ====================================================================================
  作品詳細ページ：最も支持率の高いジャンルはこちら　　　　　【日付/形式】
====================================================================================== */

/* 日付バッジ */
.wrr-date-badge {
  display: inline-block;
  background: #e94b4b;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

/* スマホ微調整 */
@media screen and (max-width: 768px) {
  .wrr-date-badge {
    font-size: 11px;
    padding: 2px 5px;
  }
}


/* ====================================================================================
  作品詳細ページ：最も支持率の高いジャンルはこちら　　　　　ここまで　　【日付/形式】
====================================================================================== */






/* ====================================================================================
アダルト漫画ランキング 同人ランキング セクション内の背景色
====================================================================================== */
/* ランキングセクション 背景色変更 */
.lead-inner {
  background:
    linear-gradient(#fff8f4, #fff8f4) padding-box,
    linear-gradient(
      to right,
      #f7b7c9,
      #f7e4a8,
      #bfe3cf,
      #b7c8ff
    ) border-box;
}

/* ====================================================================================
アダルト漫画ランキング 同人ランキング セクション内の背景色　　　　　　　　　　　　　ここまで
====================================================================================== */







/* ====================================================================================
同人誌ランキングセクション内の背景色
==================================================================================== */

.lead-box:not(.is-manga) .lead-inner {
  background:
    linear-gradient(#fbf7f2, #fbf7f2) padding-box,
    linear-gradient(
      to right,
      #f7b7c9,
      #f7e4a8,
      #bfe3cf,
      #b7c8ff
    ) border-box;
}

/* ==================================================================================
同人誌ランキングセクション内の背景色　　　　　　　　　　　　ここまで
==================================================================================== */





/* ==================================================================================
　迷ったらコレ！アダルト漫画 同人PICKUP　の上のHOTアイコン
==================================================================================== */

/* HOTアイコン共通 */
.pickup-hot {
  text-align: center;
  margin-bottom: -6px; /* タイトルに軽くかぶせる */
}

.pickup-hot img {
  width: 60px;   /* PC基準 */
  height: auto;
}

/* スマホ最適化 */
@media screen and (max-width: 768px) {
  .pickup-hot img {
    width: 45px; /* スマホBEST */
  }
}

/* ==================================================================================
　迷ったらコレ！アダルト漫画 同人PICKUP　の上のHOTアイコン　　　ここまで
==================================================================================== */




/* ==================================================================================
アダルト漫画ランキング 同人誌ランキングセクション内の人気アイコンサイズ
==================================================================================== */

/* HOTアイコン共通 */
.ninki-icon {
  text-align: center;
  margin-bottom: -6px; /* タイトルに軽くかぶせる */
}

.ninki-icon img {
  width: 65px;   /* PC基準 */
  height: auto;
}

/* スマホ最適化 */
@media screen and (max-width: 768px) {
  .ninki-icon img {
    width: 50px; /* スマホBEST */
  }
}


/* ==================================================================================
アダルト漫画ランキング 同人誌ランキングセクション内の人気アイコンサイズ　　ここまで
==================================================================================== */







/* ==================================================================================
作品詳細ページ限定でタグボタンの背景ピンク帯を非表示にする
==================================================================================== */

/* 作品詳細ページではタグ背景を消す */
.single .tag-list {
  background: transparent !important;
  padding: 0 !important;
}

/* ==================================================================================
作品詳細ページ限定でタグボタンの背景ピンク帯を非表示にする
==================================================================================== */



/* ==================================================================================
作品詳細ページ：タグボタン位置調整
==================================================================================== */

/* 作品詳細ページ：タグ位置調整 */
.single .tag-list {
  margin-left: 130px;
  margin-top: 12px;
  margin-bottom: 8px;
}



@media screen and (max-width: 768px) {
  .single .tag-list {
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}


/* ==================================================================================
作品詳細ページ：タグボタン位置調整　ここまで
==================================================================================== */









/* ==================================================================================
作品詳細ページの左上の作家が複数名の時の処理
==================================================================================== */

/* 作家 */
.wrr-meta-author {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

/* 一覧全体に ellipsis を効かせる */
.wrr-meta-author .author-list {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 個別リンクは省略させない */
.wrr-meta-author a {
  white-space: nowrap;
}

/* ==================================================================================
作品詳細ページの左上の作家が複数名の時の処理　　　　　　　　　　　　ここまで
==================================================================================== */




/* ==================================================================================
アダルト漫画ランキング、同人誌ランキングセクション内の 週間　月間の文字色を赤色に
==================================================================================== */

.lead-text .hot {
  color: #e24b4b;
  font-weight: 700;
}

/* =====================================================================================================
アダルト漫画ランキング、同人誌ランキングセクション内の 週間　月間の文字色を赤色に　　　　　ここまで
======================================================================================================= */










/* ===========================================================================
  TOPページの マリナ吹き出し　の色レイアウト
   =========================================================================== */

.wrr-balloon-marina {
  background: #fff6fa;
  border: 2px solid #ffd6e6;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(255, 182, 213, 0.35);
  position: relative;
}

/* 三角：外側（縁） */
.wrr-balloon-marina::before {
  content: "";
  position: absolute;
  right: -14px;
  top: 18px;
  border-width: 9px 0 9px 14px;
  border-style: solid;
  border-color: transparent transparent transparent #ffd6e6;
}

/* 三角：内側（中身） */
.wrr-balloon-marina::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 20px;
  border-width: 7px 0 7px 11px;
  border-style: solid;
  border-color: transparent transparent transparent #fff6fa;
}


/* ===========================================================================
  TOPページの マリナ吹き出し　の色レイアウト　　　　　　　　　　ここまで
   =========================================================================== */























/* =================================================================================
エントリーカード内の 新刊ラベル、順位ラベルの位置
==================================================================================== */

/* ===============================
   entry-card を基準にする
=============================== */
.entry-card {
  position: relative;
}

/* ===============================
   新刊ラベル：高さに影響させない
=============================== */
.wrr-label-new {
  position: absolute;
  bottom: 18px;              /* ← 星評価のすぐ上 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  background: #ffffff;
  color: #e53935;
  border: 1px solid #e53935;
  border-radius: 4px;

  font-size: 13px;
  font-weight: bold;
  padding: 1px 6px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ===============================
   週間順位：右下固定（既存）
=============================== */
.wrr-rank-7d-bottom {
  position: absolute;
  right: 0;
  bottom: 0px;   /* ← 星評価の高さ分だけ上げる */
  z-index: 30;

  background: #ffffff;
  color: #007bff;
  border: 1px solid #007bff;
  padding: 3px 6px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.1;
}

.wrr-rank-7d-bottom .rank-number {
  color: #e60000;
  font-weight: 900;
}

/* ===============================
   スマホ微調整
=============================== */
@media (max-width: 768px) {
  .wrr-label-new {
    bottom: 23px;
    font-size: 11px;
    padding: 1px 5px;
  }

  .wrr-rank-7d-bottom {
    font-size: 11px;
    padding: 2px 5px;
  }
}


/* =================================================================================
エントリーカード内の 新刊ラベル、順位ラベルの位置              ここまで
==================================================================================== */








/* =================================================================================
 PC：アダルト、同人のエントリーカードを下に伸ばす。
==================================================================================== */

/* ★ entry-card 下だけ拡張（強制） */
.manga .entry-card,
.video-list-manga .entry-card,
.entry-card {
    padding-bottom: 35px !important;
    position: relative !important;
}


/* =================================================================================
 PC：アダルト、同人のエントリーカードを下に伸ばす。
==================================================================================== */





/* ========================================================================
   スマホ：漫画・同人どちらも エントリーカード下だけ伸ばす  
======================================================================== */

@media (max-width: 768px) {
  .manga .entry-card,
  .video-list-manga .entry-card,
  .video-list-doujin .entry-card {
    padding-bottom: 40px !important;
  }
}

/* ========================================================================
   スマホ：漫画・同人どちらも エントリーカード下だけ伸ばす  
======================================================================== */




/* ========================================================================
  同人誌エリアの見出し両脇の ー同人誌－　のレイアウト
======================================================================== */

.wrr-area-headline-doujin {
  position: relative;
}

.wrr-area-headline-doujin::before,
.wrr-area-headline-doujin::after {
  content: "";
  position: absolute;
  top: 60%;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.wrr-area-headline-doujin::before {
  left: 280px;
}

.wrr-area-headline-doujin::after {
  right: 280px;
}




/* スマホ用：両脇ラインを詰める */
@media (max-width: 768px) {

  .wrr-area-headline-doujin::before {
    left: 35px;
  }

  .wrr-area-headline-doujin::after {
    right: 35px;
  }

}


/* ========================================================================
  同人誌エリアの見出し両脇の ー同人誌－　のレイアウト　　　　　ここまで
=========================================================================== */





/* ===================================================================
   アダルト漫画エリアの見出し両脇の ー同人誌－　のレイアウト
===================================================================== */

.wrr-area-headline {
  position: relative;
}

.wrr-area-headline::before,
.wrr-area-headline::after {
  content: "";
  position: absolute;
  top: 60%;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.wrr-area-headline::before {
  left: 250px;
}

.wrr-area-headline::after {
  right: 250px;
}

/* スマホ用：両脇ラインを詰める */
@media (max-width: 768px) {

  .wrr-area-headline::before {
    left: 20px;
  }

  .wrr-area-headline::after {
    right: 20px;
  }

}


/* =========================================================================
   アダルト漫画エリアの見出し両脇の ー同人誌－　のレイアウト　　ここまで
=========================================================================== */








/* ========================================================================================================
 【PCスマホ共通】ナビ項目追従説明文ないの【色】ホバーで説明文追従 (ＰＣ限定の挙動)　説明文エリア(追従)
=========================================================================================================== */

/* 「新作」だけ赤系に */
.desc-text .text-new {
  color: #e6004c;
  font-weight: 600;
}



/* アダルト漫画だけ赤系（強制） */
.desc-text span.text-adult {
  color: #e6004c !important;
  font-weight: 600;
}


/* data-desc 内の 同人誌 */
.new-desc-with-icons span.text-doujin {
  color: #2b6cb0;
  font-weight: 600;
}

/* data-desc 内の ランキング */
.new-desc-with-icons span.text-adult {
  color: #e6004c;
  font-weight: 600;
}


.new-desc-with-icons .desc-text span.text-doujin {
  color: #2b6cb0 !important;
}


/* ============================================================================================================
 【PCスマホ共通】ナビ項目追従説明文ないの【色】ホバーで説明文追従 (ＰＣ限定の挙動)　説明文エリア(追従)　ここまで
============================================================================================================== */






/* ==================================================================================
  作品詳細ページのレビューボックスの背景色　パステルカラー淡いピンクブルー
====================================================================================== */

.wrr-box {
  background: linear-gradient(
    165deg,
    #f7fbff 0%,     /* 上端：ブルー（白寄り） */
    #fdf6fb 22%,    /* 中央に向かってピンク */
    #fdf6fb 78%,    /* 中央ピンク */
    #f7fbff 100%    /* 下端：ブルー（白寄り） */
  );
}

/* ======================================================================================
  作品詳細ページのレビューボックスの背景色　パステルカラー淡いピンクブルー　　ここまで
========================================================================================== */



/* ====================================================================
 アダルト漫画ジャンル、【赤】 同人誌ジャンル　【青】　のテキストカラー
======================================================================== */

.tag-title-text {
  color: #c7003a !important;
  font-weight: 700;
}


.is-doujin .tag-title-text {
  color: #2b6fd6 !important;
  font-weight: 700;
}




/* ==============================================================================
 アダルト漫画ジャンル、【赤】 同人誌ジャンル　【青】　のテキストカラー　ここまで
================================================================================== */




/* ==============================================================================
 アダルト漫画ジャンル、同人誌ジャンル見出しの【ミニ】グラデーションライン
================================================================================== */

.wrr-mini-gradient {
  width: 200px;
  max-width: 60%;
  height: 6px;

  margin-top: 6px;      /* ← ここが超重要 */
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;

  border-radius: 4px;
  background: linear-gradient(
    to right,
    #f5b6c5,
    #f6e6a2,
    #a4d9c6,
    #b8c7f8
  );
}

/* ==============================================================================
 アダルト漫画ジャンル、同人誌ジャンル見出しの【ミニ】グラデーションライン
================================================================================== */




/* =======================================================================================
【スマホ】 アダルト漫画ジャンル、 同人誌ジャンル　　h2 を名指し＋クラス2つ指定　cocoonに勝つ
=========================================================================================== */

@media (max-width: 768px) {

  h2.tag-title.tag-heading-banner {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
  }

  h2.tag-title.tag-heading-banner + .wrr-mini-gradient {
    margin-top: 4px !important;
  }

}


/* =======================================================================================
【スマホ】 アダルト漫画ジャンル、 同人誌ジャンル　　h2 を名指し＋クラス2つ指定　cocoonに勝つ
=========================================================================================== */


@media (max-width: 768px) {
  .wrr-area-headline::before,
  .wrr-area-headline::after {
    background: red !important;
  }
}










/* =======================================================================================
【スマホ】 アダルト漫画ジャンル、 同人誌ジャンル　　h2 を名指し＋クラス2つ指定　cocoonに勝つ
=========================================================================================== */







/* ===================================================================================================
 * アダルト漫画ジャンル、同人誌ジャンルの   タグボタン2行分にして  それ以降を高さ数値で隠す　ここまで
======================================================================================================== */

@media (max-width: 768px) {
  .tag-list {
    max-height: 65px !important;
    overflow: hidden;
  }
}

/* 初期状態：2行だけ表示 */
.tag-list {
  max-height: 84px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* ===================================================================================================
  アダルト漫画ジャンル、同人誌ジャンルの   タグボタン2行分にして    それ以降を高さ数値で隠す　ここまで
======================================================================================================== */





/* 展開時 */
.tag-list.is-open {
  max-height: 1000px;
}

/* ボタン */
.tag-toggle-btn {
  margin-top: 10px;
  background: none;
  border: none;
  color: #3b7ddd;
  cursor: pointer;
  font-size: 14px;
}





/* ===================================================================================================
 タグ開閉ボタン（PCスマホ共通）　アダルト漫画ジャンル、
======================================================================================================*/
.tag-toggle-btn {
  display: block;                 /* 中央配置のため block */
  margin: 7px auto 0;             /* 中央寄せ */
  padding: 8px 22px;
  border-radius: 999px;            /* 丸み強め */
  border: 1px solid #b7d4ff;
  background: linear-gradient(
    to bottom,
    #ffffff,
    #f3f8ff
  );
  color: #c66a8a;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ホバー（PC） */
.tag-toggle-btn:hover {
  background: linear-gradient(
    to bottom,
    #f7fbff,
    #eaf2ff
  );
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 押下時 */
.tag-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ===============================
 タグリスト開閉
=============================== */
.tag-list {
  max-height: 88px;                /* 2行分 */
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.tag-list.is-open {
  max-height: 1200px;
}

/* ===================================================================================================
 タグ開閉ボタン（PCスマホ共通）　アダルト漫画ジャンル　　(タグボタン)　　　ここまで
======================================================================================================*/




/* ===================================================================================================
 タグ開閉ボタン（PCスマホ共通）　同人誌ジャンル　　(タグボタン)
======================================================================================================*/

/* ===============================
 同人タグ：初期は折りたたみ
=============================== */
.is-doujin-collapsed {
  max-height: 3.8em;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* ===============================
 同人：トグルボタン（アダルト漫画と完全同一UI）
=============================== */
.doujin-toggle-btn {
  display: block;                 /* 中央配置 */
  margin: 7px auto 0;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid #b7d4ff;
  background: linear-gradient(
    to bottom,
    #ffffff,
    #f3f8ff
  );
  color: #c66a8a;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ホバー（PC） */
.doujin-toggle-btn:hover {
  background: linear-gradient(
    to bottom,
    #f7fbff,
    #eaf2ff
  );
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 押下時 */
.doujin-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}



/* ===================================================================================================
 タグ開閉ボタン（PCスマホ共通）　同人誌ジャンル　　(タグボタン)　　　　　　　　ここまで
======================================================================================================*/







/* ===========================================================================
 タグ開閉ボタン【アダルト漫画ジャンルのみ】cocoonに負けていたので改めて指定
===============================================================================*/

/* スマホでも「すべて表示」を確実に開く */
.tag-list.is-open {
  max-height: 2000px !important;
  overflow: visible !important;
}

/* ===========================================================================
 タグ開閉ボタン【アダルト漫画ジャンルのみ】cocoonに負けていたので改めて指定
===============================================================================*/






/* ===================================================================================
 タグ開閉ボタン【同人ジャンルのみ】全て展開する前の上下幅、展開後の上下幅の定義
=======================================================================================*/


/* 同人：初期は必ず閉じる */
.tag-list.doujin-type-tags.is-doujin-collapsed {
  max-height: 3.8em !important;
  overflow: hidden !important;
}


/* 同人：すべて表示時（完全展開） */
.tag-list.doujin-type-tags:not(.is-doujin-collapsed) {
  max-height: 2000px !important;
  overflow: visible !important;
}


/* ===================================================================================
 タグ開閉ボタン【同人ジャンルのみ】全て展開する前の上下幅、展開後の上下幅の定義
=======================================================================================*/







/* ===================================================================================================
CSSコードの上の方でこのクラス名ですまほでは高さ制限を設けてタグを高さから外れるボタンを非表示にしていたので後日消す事　上の方にある
======================================================================================================*/

.is-doujin-collapsed {
  max-height: none !important;
}

/* ===================================================================================================
CSSコードの上の方でこのクラス名ですまほでは高さ制限を設けてタグを高さから外れるボタンを非表示にしていたので後日消す事　上の方にある
======================================================================================================*/








/* ============================================================
【PCスマホ】タグボタンのサイズ
================================================================*/

.tag-list {
  display: flex;
  flex-wrap: wrap;          /* ★ これが超重要 */
  gap: 4px 4px;             /* 横 縦 */
  align-items: flex-start;
}



.tag-list a {
  display: inline-flex;     /* inline-block より安定 */
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  border-radius: 999px;

  white-space: nowrap;      /* 改行させない */
  line-height: 1.2;
  font-size: 13px;

  box-sizing: border-box;
}


@media (max-width: 768px) {
  .tag-list {
    gap: 4px 4px;
  }

  .tag-list a {
    font-size: 12.5px;
    padding: 6px 10px;
  }
}


/* ============================================================
【PCスマホ】タグボタンのサイズ     ここまで
================================================================*/










/* ================================================================================================
【作品詳細ページのサンプル画像】がスクロールでふわっとスクロールするごとに浮かび上がる
====================================================================================================*/


/* 初期状態（まだ表示しない） */
.wrr-sample-images img {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 表示状態 */
.wrr-sample-images img[data-loaded="true"] {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================================================
【作品詳細ページのサンプル画像】がスクロールでふわっとスクロールするごとに浮かび上がる
====================================================================================================*/






/* サンプル画像内では疑似要素で表示している「作品レビュー」ラベルを出さない */
.wrr-sample-images .wrr-box::before {
  content: none !important;
  display: none !important;
}




/* ================================================================================================
作品詳細ページのサンプル画像にレビューの枠が勝手についてくるので非表示にする
====================================================================================================*/

/* サンプル画像内の wrr-box を完全に無装飾にする */
.wrr-sample-images .wrr-box {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 念のため中身も */
.wrr-sample-images .wrr-box * {
  background: none !important;
  box-shadow: none !important;
}

/* ================================================================================================
作品詳細ページのサンプル画像にレビューの枠が勝手についてくるので非表示にする  ここまで
====================================================================================================*/








/* ============================================================
 ※ サンプル画像を中央揃えにする
================================================================*/

.wrr-sample-images .wrr-box {
  text-align: center;
  padding: 0 !important;
  margin: 0 auto !important;
}

.wrr-sample-images img {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
  height: auto;
  margin: 8px auto !important;
}

/* ============================================================
 ※ サンプル画像を中央揃えにする      ここまで
================================================================*/







/* ===================================================================================================
 サンプル画像とサンプル画像の間に作品名タイトル＋画像番号表示 フォントサイズ等　定義はfunctionphp   
=======================================================================================================*/

.wrr-sample-caption {
  text-align: center;
  font-size: 13px;
  color: #777;
  margin: 1px 0 1px;
}

/* ===================================================================================================
 サンプル画像とサンプル画像の間に作品名タイトル＋画像番号表示 フォントサイズ等　定義はfunctionphp   
=======================================================================================================*/






/* ===============================================================================
 作品詳細ページ：週間TOP10ラベル　10位以内作品のみ表示
==================================================================================*/

.wrr-ranking-top10-single {
  margin: 16px auto;                 /* 要素自体を中央へ */
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff9ed;
  color: #6b5a2b;
  font-weight: 600;

  display: flex;                     /* ← 中央寄せの要 */
  align-items: center;
  justify-content: center;

  gap: 6px;
  font-size: 0.95em;
  text-align: center;
  white-space: nowrap;               /* PCでは1行維持 */
}

/* 王冠（指定色） */
.wrr-ranking-top10-single i.fa-crown {
  color: #e8c55f;
}

/* 順位数字だけ赤 */
.wrr-ranking-top10-single .rank-number {
  color: #e53935;
  font-weight: 700;
}

/* ================================
 スマホ最適化（ここが重要）
================================ */
@media screen and (max-width: 768px) {
  .wrr-ranking-top10-single {
    width: 92%;                      /* 画面に対して安定 */
    max-width: 420px;
    margin: 14px auto 16px;
    padding: 12px 14px;

    font-size: 0.95em;
    line-height: 1.6;

    white-space: normal;             /* スマホは改行OK */
  }
}




/* ===============================================================================
 作品詳細ページ：週間TOP10ラベル　10位以内作品のみ表示　　ここまで
==================================================================================*/






/* ===============================================================================
 ※※※※※※※※※ここからWRRの旧CSS※※※※※※※※※
==================================================================================*/
.logo-text {
    padding: 10px 0 10px;
    font-size: 1em;
}


/* 復元固定ページの左揃え、「・」削除左余白詰める、行間詰める*/


/*  サイドバーのリストマーカーを完全非表示 */
.wrr-sidebar-section ul,
.wrr-sidebar-section ul li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/*  各行の余白を最適化（任意）*/
.wrr-sidebar-section li {
  margin-bottom: 8px !important;
  line-height: 1.6;
}


/* ===============================================================================
 ※※※※※※※※※ここからWRRの旧CSS※※※※※※※※※
==================================================================================*/


/* ===============================================================================
復元記事のページを当時の2カラムに、また復元ページ内の画像の伸びを抑える
==================================================================================*/

.page-template-page-english-archive .entry-content > *,
.wrr-archive .entry-content > * {
  grid-column: 1;
}

/* WRR 英語復元ページ：本文内画像を当時サイズに近づける */
.page-template-page-english-archive .entry-content img,
.wrr-archive .entry-content img {
  max-width: 420px;   /* ← 当時感の核心 */
  width: auto;
  height: auto;
  display: block;
  margin: 1.5em 0;
}

/* ===============================================================================
復元記事のページを当時の2カラムに、また復元ページ内の画像の伸びを抑える　ここまで
==================================================================================*/






/* =============================================================================================
 作品詳細ページ：作家、サークルの横並びテキスト修正　サークルが人形アイコン被る不具合修正
================================================================================================*/

.wrr-meta-author {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrr-meta-author i {
  flex-shrink: 0;
}

.wrr-meta-label {
  width: auto;        /* ←固定幅削除 */
  min-width: auto;    /* ←削除 */
  display: inline-block;
  font-weight: 500;
  margin-right: 6px;
}

.author-list {
  word-break: break-word;
}

/* =============================================================================================
 作品詳細ページ：作家、サークルの横並びテキスト修正　サークルが人形アイコン被る不具合修正
================================================================================================*/



/* ==============================================================================
サンプル画像 横幅サイズを定義する 　【強制上書き】
=================================================================================*/

.wrr-sample-images img {
  display: block !important;
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  margin: 5px auto !important;
}


/* ==============================================================================
サンプル画像 横幅サイズを定義する 　【強制上書き】
=================================================================================*/



/* =============================================================================================
作品あらすじ・感想 タイトル（疑似で表示していた時と同じ数値をそのまま移植）
================================================================================================*/

.wrr-review-title {
  display: block;
  font-size: 13px;
  color: #b59b6c;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.05em;

  /* h2のデフォルト余白リセット */
  margin-top: 0;
}



@media screen and (max-width: 768px) {
  .wrr-review-title {
    font-size: 12px;
    margin-bottom: 8px;
  }
}


/* =============================================================================================
作品あらすじ・感想 タイトル（疑似で表示していた時と同じ数値をそのまま移植）　　ここまで
================================================================================================*/






/* ===================================================================
当サイト掲載作品は【正規配信版】です　　　※スマホ非表示
=====================================================================*/

@media screen and (max-width: 768px) {
  .hikakubun-note {
    display: none !important;
  }
}

/* ===================================================================
当サイト掲載作品は【正規配信版】です　　　※スマホ非表示
=====================================================================*/












/* ===========================================================================================================
   【全体構造】同じ原作の作品（.related-by-origin）
   アダルト漫画（縦長）／同人作品（横広）の両方を自動レイアウト対応
=========================================================================================================== */


/* ------------------------------------------------------------
   ① 親コンテナ設定：flex横並び配置
------------------------------------------------------------ */
.related-by-origin .related-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 10px 0 !important;
  box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   ② 各アイテム共通設定
------------------------------------------------------------ */
.related-by-origin .related-item {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex: 1 1 160px;
  max-width: calc(20% - 10px);
}


/* ------------------------------------------------------------
   ③ サムネイル画像共通設定
------------------------------------------------------------ */
.related-by-origin .related-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}


/* ================================================================================================
   【PC表示】アダルト漫画／同人作品で列数・比率を出し分け
================================================================================================ */


/* ------------------------------------------------------------
   ④ アダルト漫画（.manga）10列
------------------------------------------------------------ */
.related-by-origin.manga .related-thumbs .related-item {
  flex: 1 1 110px !important;
  max-width: calc(10% - 10px) !important;
}

.related-by-origin.manga .related-item img {
  aspect-ratio: 3 / 4.5 !important;
  object-position: center top !important;
}


/* ------------------------------------------------------------
   ⑤ 同人作品（.doujin）5列・横広（4:3）
------------------------------------------------------------ */
.related-by-origin.doujin .related-thumbs .related-item {
  flex: 1 1 calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
}

.related-by-origin.doujin .related-item img {
  aspect-ratio: 4 / 3 !important;
  object-position: center center !important;
}


/* ================================================================================================
   【スマホ表示（〜768px）】
================================================================================================ */
@media screen and (max-width: 768px) {

  /* アダルト漫画 3列 */
  .related-by-origin.manga .related-thumbs .related-item {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }

  .related-by-origin.manga .related-item img {
    aspect-ratio: 3 / 4.5 !important;
  }


  /* 同人 2列 */
  .related-by-origin.doujin .related-thumbs .related-item {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }

  .related-by-origin.doujin .related-item img {
    aspect-ratio: 4 / 3 !important;
  }


  /* スマホ隙間調整 */
  .related-by-origin .related-thumbs {
    gap: 6px !important;
  }
}


/* ================================================================================================
   【見出しデザイン】
================================================================================================ */

.related-by-origin .related-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-align: left !important;
  margin: 5px 0 10px 0 !important;
  line-height: 1.4 !important;
}

@media screen and (max-width: 768px) {
  .related-by-origin .related-title {
    font-size: 15px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}




/* ===========================================================================================================
   【全体構造】同じ原作の作品（.related-by-origin）
   アダルト漫画（縦長）／同人作品（横広）の両方を自動レイアウト対応　　　ここまで
=========================================================================================================== */









/* =========================================================
  公式配信案内テキスト
========================================================= */

.wrr-official-notice {
  max-width: 720px;
  margin: 30px auto 10px auto;
  padding: 18px 22px;
  background: #fdfaf7;
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #5a5a5a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* スマホ */
@media screen and (max-width: 768px) {
  .wrr-official-notice {
    font-size: 14px;
    padding: 16px;
    margin: 25px 15px;
  }
}


/* =========================================================
  公式配信案内テキスト
========================================================= */








/* ====================================================================================================
原作名を自動でWPタグとして表示するCVボタンエリア下のボタン類 (contentphp)　上部　パッケージ下
======================================================================================================= */

.origin-tag-wrap{
  text-align:center;
  margin: 5px 0 15px;
}

.origin-tag-button{
  display:inline-block;
  padding:10px 22px;
  border-radius:30px;
  font-size:15px;
  font-weight:600;
  text-decoration:none !important; /* 下線完全除去 */
  letter-spacing:0.5px;

  /* WRRに合う淡いブルーグラデ */
  background: linear-gradient(135deg,#e6f3ff,#d2e9ff);
  color:#2b4f7c;

  border:1px solid #bcdcff;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);

  transition:all 0.25s ease;
}

/* ホバー */
.origin-tag-button:hover{
  background: linear-gradient(135deg,#d4ebff,#b8dbff);
  color:#1e3e66;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}

/* スマホ最適化 */
@media (max-width:768px){
  .origin-tag-wrap{
    margin: 1px 0 1px;
  }
  .origin-tag-button{
    font-size:14px;
    padding:9px 16px;
  }
}




/* ====================================================================================================
原作名を自動でWPタグとして表示するCVボタンエリア下のボタン類 (contentphp)　上部　パッケージ下
======================================================================================================= */







/* ================================================================================
原作名を自動でWPタグとして表示するCVボタンエリア下のボタン類 (contentphp)　下部
================================================================================= */

.origin-related-box{
  text-align:center;
  margin:15px 0 10px;
  padding:18px 15px;
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.origin-related-text{
  font-size:15px;
  margin-bottom:12px;
  color:#444;
}

.origin-related-text strong{
  color:#2b4f7c;
  font-weight:600;
}

.origin-related-button{
  display:inline-block;
  padding:8px 20px;
  border-radius:25px;
  background:linear-gradient(135deg,#e0f0ff,#c9e6ff);
  color:#2b4f7c;
  text-decoration:none !important;
  font-size:14px;
  transition:all 0.25s ease;
}


.origin-related-button:hover{
  background:linear-gradient(135deg,#cfe8ff,#b8dbff);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
  color:#2b4f7c;
}


/* スマホ最適化 */
@media (max-width:768px){

  .origin-related-box{
    margin:1px 0 5px;
    padding:15px 10px;
  }

  .origin-related-text{
    font-size:14px;
  }

  .origin-related-button{
    font-size:13px;
    padding:7px 16px;
  }
}

/* ===================================================================================
原作名を自動でWPタグとして表示するCVボタンエリア下のボタン類　　(contentphp)　下部
====================================================================================== */




/* ===================================================================================
作品詳細ページ本作『○○』は現在、公式配信のみで提供されています。PCスマホ出し分け
====================================================================================== */
.sp-text{ display:none; }

@media (max-width:768px){
  .pc-text{ display:none; }
  .sp-text{ display:inline; }
}

/* ===================================================================================
作品詳細ページ本作『○○』は現在、公式配信のみで提供されています。PCスマホ出し分け
====================================================================================== */






/* =====================================================================
同人誌二次創作ページの各原作ボタンの形状　
======================================================================== */

.fanart-origin-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.origin-btn {
  padding: 6px 14px;
  border-radius: 20px;
  background: #f3f7ff;
  border: 1px solid #c9d8ff;
  font-size: 14px;
  text-decoration: none;
  color: #3a4a7a;
  transition: 0.2s;
}

.origin-btn:hover {
  background: #e3edff;
}

/* =====================================================================
同人誌二次創作ページの各原作ボタンの形状　
======================================================================== */







/* =========================================================================================================
同人誌二次創作ページの各原作ボタンを押すとでその選択中のボタンの色変化、選択しているボタン側が分かる　
============================================================================================================ */

.origin-btn {
  padding: 6px 14px;
  border-radius: 20px;
  background: #f3f7ff;
  border: 1px solid #c9d8ff;
  font-size: 14px;
  text-decoration: none;
  color: #3a4a7a;
  transition: 0.2s;
}

.origin-btn:hover {
  background: #e3edff;
}

.origin-btn.active {
  background: #4a6cff;
  color: #fff;
  border-color: #4a6cff;
}

/* ==========================================================================================================
同人誌二次創作ページの各原作ボタンを押すとでその選択中のボタンの色変化、選択しているボタン側が分かる　ここまで
============================================================================================================ */













/* ==============================
   原作別ブロック 全体
============================== */
.fanart-origin-block {
  background: #fdf8f3; /* ← 白ではなく柔らかいベージュ */
  padding: 28px 24px;
  border-radius: 18px;
  margin-bottom: 40px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
  border: 1px solid #f3e8dc; /* ほんのり縁取り */
  position: relative;
}

/* 上部の淡いグラデーションライン */
.fanart-origin-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(
    90deg,
    #f7a8d7,
    #a8d8ff,
    #b8f3c9,
    #ffe4a8
  );
}

/* タイトル */
.fanart-origin-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 1px;
}

/* ボタンラッパー */
.fanart-origin-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 原作ボタン */
.origin-btn {
  padding: 8px 18px;
  border-radius: 999px;
  background: #f5f8ff;
  border: 1px solid #c9d8ff;
  font-size: 14px;
  text-decoration: none;
  color: #3a4a7a;
  transition: all 0.2s ease;
  font-weight: 500;
}

/* ホバー */
.origin-btn:hover {
  background: #e6efff;
  transform: translateY(-2px);
}

/* アクティブ状態 */
.origin-btn.active {
  background: linear-gradient(90deg,#6d8dff,#4a6cff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(74,108,255,0.3);
}







@media (max-width: 768px) {

  .fanart-origin-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .origin-btn {
    width: 100%;
    text-align: center;
    padding: 6px 4px; /* 左右最小 */
    font-size: 12px; 
    border-radius: 8px;

    /* 文字処理 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



@media (max-width: 768px) {

  .fanart-origin-block {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
  }

}






.fanart-origin-more {
  display: none;
  margin-top: 10px;
  gap: 6px;
  flex-wrap: wrap;
}

.fanart-origin-more.is-open {
  display: flex;
}

.origin-more-toggle {
  background: transparent;
  border: none;
  color: #6d8dff;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.fanart-origin-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.origin-more-toggle {
  background: transparent;
  border: none;
  color: #6d8dff;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}









/* =========================================
   スマホ：3列均等＋完全ellipsis安定版
========================================= */
@media (max-width: 768px) {

  .fanart-origin-buttons,
  .fanart-origin-more {
    gap: 4px;
  }

  .origin-btn {
    display: block; /* ← flexやめる */    
    width: calc(33.333% - 4px);
    box-sizing: border-box;

    min-height: 42px;
    line-height: 42px; /* ← 縦中央をこれで実現 */

    padding: 0 4px;
    border-radius: 8px;
    font-size: 12px;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}





/* ===============================
   もっと見る：中央楕円ボタン完成版
================================ */

.origin-more-wrapper {
  text-align: center;
  margin-top: 12px; /* ← ボタン群との距離（詰め気味） */
}

.origin-more-toggle {
  display: inline-block;
  padding: 10px 26px;

  border-radius: 999px;
  border: 1.5px solid #6d8dff;

  background: #fff;
  color: #6d8dff;

  font-weight: 600;
  font-size: 14px;

  cursor: pointer;
  transition: all 0.25s ease;
}

/* ホバー */
.origin-more-toggle:hover {
  background: #6d8dff;
  color: #fff;
}

/* アクティブ時 */
.origin-more-toggle:active {
  transform: scale(0.97);
}



@media (max-width: 768px) {

  .origin-more-wrapper {
    margin-top: 8px; /* スマホは少し詰める */
  }

  .origin-more-toggle {
    padding: 8px 20px;
    font-size: 13px;
  }

}




@media (min-width: 769px) {
  .origin-more-wrapper {
    display: none !important;
  }
}



/* スマホ：隠しボタン制御 */
@media (max-width: 768px) {

  .origin-hidden {
    display: none;
  }

  .origin-hidden.show-origin {
    display: inline-block; /* ← blockではなくinline-block */
  }

}






/* ==============================================================================================
同人誌オリジナルページの上部、作品詳細ページに同じコード有りだがこのラッパーを使って余白のみCSSで消す
================================================================================================ */

/* 同人オリジナルページ上部専用 */
.doujin-top-genre-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.doujin-top-genre-box > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



/* ======================================================================================================
同人誌オリジナルページの上部、作品詳細ページに同じコード有りだがこのラッパーを使って余白のみCSSで消す　ここまで
======================================================================================================== */







/* ===================================================================================
  同人誌オリジナルページ上部だけのコード ＼ 人気順で表示中 ／ 専用CSS
===================================================================================== */

/* 共通（PC・スマホ） */
.genre-realtime-note {
  margin-top: 6px;
  margin-bottom: 8px; /* ←広すぎない絶妙値 */
  text-align: center;
  font-size: 0.85em;
  color: #9a9a9a;
  letter-spacing: 0.08em;
  line-height: 1.4;
  user-select: none;
  opacity: 0.9;
}

.genre-realtime-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.85em;
  color: #c2c2c2;
  letter-spacing: 0.05em;
}

/* =========================
   PC表示
========================= */
@media screen and (min-width: 768px) {

  .genre-realtime-note {
    font-size: 0.8em;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .genre-realtime-sub {
    font-size: 0.8em;
  }
}

/* =========================
   スマホ表示
========================= */
@media screen and (max-width: 767px) {

  .genre-realtime-note {
    font-size: 0.75em;
    margin-top: 4px;
    margin-bottom: 8px;
  }

  .genre-realtime-sub {
    font-size: 0.78em; /* スマホはわずかに可読性優先 */
  }
}


/* ===================================================================================
  同人誌オリジナルページ上部だけのコード ＼ 人気順で表示中 ／ 専用CSS　　ここまで
===================================================================================== */














/* ===================================
 ナビ項目のテキスト文字を見やすく
===================================== */

/* 通常 */
.simple-menu-list li a{
color:#222;
font-weight:700;
text-shadow:
0 1px 0 #fff,
0 0 5px rgba(255,255,255,0.8);
}

/* hover */
.simple-menu-list li a:hover{
color:#fff;
text-shadow:none;
}

/* 現在ページ（重要） */
.simple-menu-list li.current-menu-item a,
.simple-menu-list li.current_page_item a{
color:#fff;
text-shadow:none !important;
}


/* ===========================================
 ナビ項目のテキスト文字を見やすく　　ここまで
============================================= */












/* =======================================================
   CVボタン　　【作品詳細ページパッケージ下部】
========================================================== */

/* ラップ */
.cv-top-wrap {
  width: 100%;
  max-width: 420px;     /* ACFと幅を揃える */
  margin: 16px 0 0;
  margin-left: 40px;    /* PCで少し右へ */
  text-align: left;
}

/* ボタン */
.cv-top-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #ff9a9e; 
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ホバー */
.cv-top-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ================================
   スマホ最適化
================================ */
@media (max-width: 768px) {
  .cv-top-wrap {
    max-width: 100%;
    margin-left: 0;     /* ← スマホでは中央寄りに戻す */
  }

  .cv-top-btn {
    font-size: 15px;
    padding: 14px 16px;
  }
}


/* =======================================================
   CVボタン　　【作品詳細ページパッケージ下部】
========================================================== */