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

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














/* サンプル画像を縦に綺麗に揃える（手動・CSV両対応） */
.entry-content img {
  display: block;
  width: 100%;
  max-width: 720px;   /* 好きな最大幅に調整可 */
  height: auto;
  margin: 5px auto;
}

/* WordPressのfigureブロック対策 */
.entry-content figure {
  margin: 0 auto 24px;
  text-align: center;
}

/* ギャラリー・連続画像でも崩れないように */
.entry-content p > img {
  margin-bottom: 24px;
}















/* ACF 作品情報テーブル 全体 */
.entry-content table {
  border-collapse: collapse;
  border: 1px solid #e6e6e6; /* 外枠：細いボーダー */
  width: 70%;
  margin: 10px 0;
  margin-left: auto;
  margin-right: auto;
  
}

/* 行 */
.entry-content table tr {
  border-bottom: 1px solid #e6e6e6; /* 中の線も細く */
}

/* 左列（タイトル側） */
.entry-content table th {
  background: #fdecef; /* 薄いピンク */
  color: #555;
  font-weight: 600;
  width: 15%;
  padding: 10px 12px;
  border-right: 1px solid #e6e6e6;
  text-align: center;
  white-space: nowrap;
 
}

/* 右列（値側） */
.entry-content table td {
  background: #ffffff;
  padding: 10px 14px;
  border-left: none;
}












.sample-cv-button-text {
  margin: 28px 0 40px;
  text-align: center;
}

.sample-cv-button-text a {
  display: inline-block;
  min-width: 280px;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #ff4a4a 0%, #d60000 100%);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.08em;
  
}





.sample-cv-button-text a:hover {
  transform: translateY(-2px);
  
}
















.play-time {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #666;
}













/* カテゴリラベルのみ非表示 */
.entry-card .cat-label {
  display: none !important;
}












/* サムネイル枠の固定比率を解除 */
.entry-card-thumb,
.blogcard-thumbnail,
.card-thumb {
  aspect-ratio: auto !important;
  height: auto !important;
}





.entry-card-thumb img,
.blogcard-thumbnail img,
.card-thumb img {
   
  object-fit: contain !important;
  width: 100%;
  height: auto;
  background: none !important;
}

























/* ===== スマホ：コンテンツを画面横幅いっぱいにする（決定版） ===== */
@media screen and (max-width: 768px) {

  /* 一番外側の横幅制限を解除 */
  .wrap {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 中の余白を最小化 */
  .content-in,
  .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


}














/* ===== エントリーカード：サムネをトリミングなしで最大表示 ===== */
@media screen and (max-width: 768px) {

  /* サムネ枠の比率固定を解除 */
  .entry-card-thumb,
  .card-thumb {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  /* 画像をトリミングせず最大表示 */
  .entry-card-thumb img,
  .card-thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #000; /* 余白が出る場合の保険（黒帯） */
  }

}



































/* スマホ：ACF表をほぼ全幅表示 */
@media screen and (max-width: 768px) {
  .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .entry-content table {
    width: 100%;
  }
}










/* スマホ：ACF表の内容を3行まで表示して省略 */
@media screen and (max-width: 768px) {
  .entry-content table td {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}















/* エントリーカード内だけ黒背景にする */
.entry-card {
  background: #111;
  border: 1px solid #333;
}



















/* ===== エントリーカード：黒背景用 白文字化 ===== */
.entry-card {
  background: #000;
}

.entry-card,
.entry-card a,
.entry-card h2,
.entry-card h3,
.entry-card .entry-card-title,
.entry-card .entry-card-snippet,
.entry-card .entry-card-info,
.entry-card .post-date,
.entry-card .entry-date,
.entry-card .entry-category,
.entry-card .post-update,
.entry-card .post-author {
  color: #fff !important;
}






























/* ===== ヘッダー：明るめピンク紫（スクショ寄せ） ===== */
#header,
.header-container,
.site-header {
  background: linear-gradient(
    90deg,
    #c81d77 0%,   /* 左：やや濃いピンク */
    #e83e8c 50%,  /* 中央：明るいピンク */
    #ff5fa2 100%  /* 右：やや淡いピンク */
  );
}

/* ヘッダー内文字は白 */
#header,
#header a,
#header .logo-text,
#header .site-name,
#header .site-description {
  color: #ffffff !important;
}
























/* ===== サイト名：ピンク背景用・白ロゴ（上品＋やや立体強化） ===== */
.site-name-text,
.logo-text,
.name-text {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.06em;

  text-shadow:
    0 -1px 0 rgba(255,255,255,0.55),  /* 上の白ハイライト */
    0 1px 1px rgba(255,255,255,0.65), /* 面の明るさ */
    0 3px 6px rgba(0,0,0,0.22),       /* 立体の芯 */
    0 6px 12px rgba(0,0,0,0.18);      /* 奥行き（薄く） */
}

/* スマホは視認性重視で少しだけ強化 */
@media screen and (max-width: 768px) {
  .site-name-text,
  .logo-text,
  .name-text {
    text-shadow:
      0 -1px 0 rgba(255,255,255,0.6),
      0 2px 2px rgba(255,255,255,0.7),
      0 4px 10px rgba(0,0,0,0.25);
  }
}
















/* スマホ：エントリーカードのタイトル */
@media screen and (max-width: 768px) {
  .entry-card-title,
  .entry-title {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
  }
}















/* PC：エントリーカードのタイトル文字を少し小さく */
@media screen and (min-width: 769px) {
  .entry-card-title,
  .card-title,
  .entry-card .entry-title {
    font-size: 16px;
    line-height: 1.45;
  }
}











/* ===== スマホ：エントリーカードを画面いっぱいにする（最終版） ===== */
@media screen and (max-width: 768px) {

  /* サイト全体の横余白を完全解除 */
  .wrap,
  .content-in,
  .main,
  .content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

}












/* スマホ：エントリーカードを画面いっぱいに */
@media screen and (max-width: 768px) {

  /* カラム解除 */
  .ect-3-columns .entry-card-wrap {
    width: 100% !important;
    padding: 2px 0;
  }

  /* 余計な横余白を消す */
  .list-wrap,
  .content-in,
  .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* サムネを最大化（トリミングなし） */
  .entry-card-thumb,
  .blogcard-thumbnail {
    width: 100%;
  }

  .entry-card-thumb img,
  .blogcard-thumbnail img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    background: #000; /* 黒背景で映えさせる */
  }
}













/* ===================================================================
   スマホ：エントリーカード内タイトル・メタの上下余白を最小化
====================================================================== */

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

  /* タイトル・メタの上下余白を最小化 */
  .entry-card-content {
    padding: 4px 6px !important;
  }

  /* 本日・週・月・全体などのメタ行を詰める or 非表示 */
  .entry-card-meta,
  .entry-card-info {
    margin-top: 2px !important;
    font-size: 11px;
  }

}



/* ===========================================================================
   スマホ：エントリーカード内タイトル・メタの上下余白を最小化　ここまで
============================================================================== */













/* ===================================================================
   PC：メイン領域だけ 3カラム  サムネ上・タイトル下（縦並び）
====================================================================== */

@media screen and (min-width: 1024px) {

  /* メイン領域の一覧だけをグリッド化 */
  main#main .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* 各カードの幅・floatを無効化 */
  main#main .list .entry-card-wrap {
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }


  /* サムネを上に */
  .entry-card-thumb {
    width: 100%;
    margin-bottom: 6px;
  }

  /* タイトル・本文を下に */
  .entry-card-content {
    position: static !important;
    padding: 6px 8px;
  }

  /* タイトル */
  .entry-card-title {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 4px;
  }
}

/* ==============================
   サムネ画像：共通（PC/スマホ）
============================== */
.entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
   スマホ：1カラム（Cocoon標準）
============================== */
@media screen and (max-width: 1023px) {
  main#main .list {
    display: block;
  }
}




/* ===================================================================
   PC：メイン領域だけ 3カラム  サムネ上・タイトル下（縦並び）ここまで
====================================================================== */


























/* ==============================================================
   スマホ：縦型カードを2カラム・フル幅・余白極小
================================================================= */


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

  /* サイト全体の横余白を殺す */
  .wrap,
  .content-in,
  .main,
  .content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 一覧を2カラムに */
  #list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important; /* ← カード間余白 */
    padding: 2px !important;
  }

  /* 各カードの横幅・floatを無効化 */
  .entry-card-wrap {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
  }

  /* カード内余白を最小化 */
  .entry-card {
    padding: 4px !important;
  }

  /* サムネをフル幅 */
  .entry-card-thumb {
    width: 100%;
    margin-bottom: 4px;
  }

  /* タイトル周りの余白を詰める */
  .entry-card-content {
    padding: 2px 4px !important;
  }

  .entry-card-title {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
  }

}


/* ==============================================================
   スマホ：縦型カードを2カラム・フル幅・余白極小　ここまで
================================================================= */













/* =======================================================
   スマホ：サムネをカード全面に
========================================================= */

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

  /* カードの内側余白を完全に消す */
  .entry-card {
    padding: 0 !important;
  }

  /* サムネ枠をカード全面に */
  .entry-card-thumb {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  /* 画像を枠いっぱいに */
  .entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important; /* ← 迫力重視 */
    object-position: center;
  }

  /* タイトルだけ下に少し余白 */
  .entry-card-content {
    padding: 4px 6px !important;
  }

}



/* =======================================================
   スマホ：サムネをカード全面に　ここまで
========================================================= */















/* ===============================================================
   サムネイル左上の出演者ラベル（サムネ左上ピッタリ）
================================================================== */

/* 親を必ず基準にする */
.entry-card-thumb {
  position: relative;
}

/* ラベル本体 */
.performer-label {
  position: absolute;
  top: 0 !important;
  left: 0 !important;

  margin: 0 !important;
  border-radius: 0 !important;

  z-index: 10;

  background-color: #8c0000; /* 上品で深い赤 */
  color: #ffffff;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  padding: 4px 8px;

  letter-spacing: 0.02em;
  white-space: nowrap;

  pointer-events: none;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .performer-label {
    font-size: 11px;
    padding: 3px 7px;
  }
}



/* ===============================================================
   サムネイル左上の出演者ラベル（サムネ左上ピッタリ）　ここまで
================================================================== */














/*================================================================================================
の他の作品 表示レイアウト     現状HTMLはPC・スマホともに最大12件表示
==================================================================================================*/

.rel-performer {
  margin-top: 40px;
}

.rel-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ===== Grid ===== */
.rel-grid {
  display: grid;

  /* PC */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  /* ★ 行の高さを固定（これが最重要） */
  grid-auto-rows: 160px;

  /* ★ gapを明示的に分離 */
  column-gap: 10px;
  row-gap: 10px;
}

/* ===== アイテム ===== */
.rel-item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  overflow: hidden;
  background: none;

  /* ★ 余計な文字由来の余白を殺す */
  font-size: 0;
  line-height: 0;
}

/* ===== 画像 ===== */
.rel-item img {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}



/* ===== スマホ：3列固定 ===== */
@media (max-width: 768px) {
  .rel-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 80px; /* 行高も固定 */
    column-gap: 5px;
    row-gap: 8px;
  }
}


/*================================================================================================
 の他の作品 表示レイアウト　　　現状HTMLはPC・スマホともに最大12件表示
==================================================================================================*/









/*===============================================================
 の他の作品のh2背景帯の下の余白を狭める　
=================================================================*/


/* 「◯◯の他の作品」見出しの余白を詰める */
.rel-performer .rel-title {
  margin-bottom: 8px !important; /* 下の余白を最小限に */
  padding: 10px 12px !important; /* 背景帯の上下を圧縮 */
}



/*===============================================================
 の他の作品のh2背景帯の下の余白を狭める　
=================================================================*/






/* =======================================================
   の他の作品のサムネ演出（PC / スマホ共通）
========================================================== */

/* アニメーションをなめらかに */
.rel-item img {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ===== PC：hover ===== */
@media (hover: hover) {
  .rel-item:hover img {
    transform: scale(1.05); /* 少しだけ拡大 */
    opacity: 0.9;           /* 少しだけ暗く */
  }
}

/* ===== スマホ：タップ時 ===== */
.rel-item:active img {
  transform: scale(0.97);  /* 押した感 */
  opacity: 0.85;
}




/* =======================================================
   の他の作品のサムネ演出（PC / スマホ共通）　　ここまで
========================================================== */












/*======================================================
 の他の作品のh2背景帯　少しだけ際立たせる
========================================================*/


.rel-performer .rel-title {
  background-color: #f6f7f8 !important;
  border-bottom: 1px solid #e5e7ea;
}



/*======================================================
 の他の作品のh2背景帯　少しだけ際立たせる
========================================================*/








/*======================================================
収録時間左側のプレイアイコン
========================================================*/

.play-time img {
  display: inline;
  margin: 0;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}


@media (max-width: 768px) {
  .play-time img {
    width: 22px;
    height: 22px;
  }
}


/*======================================================
収録時間左側のプレイアイコン     ここまで
========================================================*/
























/* 画質アイコン：横並び中央（最終確定） */
.quality-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

/* ← これが決定打 */
.quality-icons img {
  margin: 0 !important;   /* Cocoonの margin:auto を殺す */
  width: 34px;
  height: auto;
  display: block;
}

/* スマホ */
@media (max-width: 768px) {
  .quality-icons img {
    width: 28px;
  }
}














.quality-text {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin: 6px 0 8px;
  letter-spacing: 0.05em;
}











/*======================================================
新着動画、AV動画、VR動画のフォントサイズ等
========================================================*/

.main-content .page-title{
  text-align:center;
  font-weight:700;
  letter-spacing:.04em;
  margin:8px 0 12px;
}

/* PC */
@media (min-width:769px){
  .main-content .page-title{
    font-size:26px;
    line-height:1.25;
  }
}

/* スマホ */
@media (max-width:768px){
  .main-content .page-title{
    font-size:22px;
    line-height:1.3;
    margin:2px 0 10px;
  }
}


/*======================================================
新着動画、AV動画、VR動画のフォントサイズ等　　ここまで
========================================================*/













/*======================================================
 h1 新着 / AV / VRのみ赤
========================================================*/


/* ページタイトル内の強調文字（新着 / AV / VR） */
.page-title .title-collar {
  color: #d4002a;
}


/*======================================================
 h1 新着 / AV / VRのみ赤          ここまで
========================================================*/
















/*======================================================
メイン領域の上下余白を詰める
========================================================*/
.main {
  padding-top: 12px;
  padding-bottom: 12px;
}



@media (max-width: 768px){
  .main {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/*======================================================
メイン領域の上下余白を詰める    ここまで
========================================================*/






















/*======================================================
ナビ全体（横並び・中央寄せ）
========================================================*/

.header-menu {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 !important;
  padding: 0 !important;
}

.menu-list {
  display: flex;
  
  
  height: 35px;
 


  justify-content: space-evenly;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}


/*======================================================
ナビ全体（横並び・中央寄せ）　　ここまで
========================================================*/






/*======================================================
ナビ項目
========================================================*/

.menu-list li {
  position: relative;
  flex: 1;
  text-align: center;
  cursor: pointer;
  background: #f9f9f9;

  /* ★ここを修正 */
  padding: 0;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  height: 48px;   /* ← ★これを追加するだけ */
}

.menu-list li:last-child {
  border-right: 1px solid #ccc;
}

.menu-list li a {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 48px;          /* ← ナビ高さを固定 */
  line-height: 1;
  text-decoration: none;
  color: #555;
  font-weight: bold;
  font-size: 16px;
}


/*======================================================
ナビ項目　   ここまで
========================================================*/






/*======================================================
アクティブ状態（現在ページ）
========================================================*/

.menu-list li.active {
  background: #ff2d7a;
}

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


/*======================================================
アクティブ状態（現在ページ）
========================================================*/







/*======================================================
ナビ項目 青の下ライン（アクティブのみ）
========================================================*/

.menu-list li {
  position: relative;
}

.menu-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #0044cc;
  opacity: 0;
}

/* 選択中のナビだけ表示 */
.menu-list li.active::after {
  opacity: 1;
}

/*======================================================
ナビ項目 青の下ライン（アクティブのみ）ここまで
========================================================*/




/*======================================================
スマホ用 ナビ調整
========================================================*/

@media (max-width: 768px) {

  .menu-list li {
    height: 44px; /* 少し低く */
  }

  .menu-list li a {
    font-size: 14px;       /* 文字を少し小さく */
    white-space: nowrap;  /* ★ 折り返し禁止（最重要） */
  }

}









/*========================================
ナビ項目のAV動画は赤 VR動画は青
========================================*/

/* AV動画タブ */
.menu-list li a[href="/av/"] {
  color: #c4002f;
}

/* VR動画タブ */
.menu-list li a[href="/vr/"] {
  color: #005bbb;
}

/*================================================
ナビ項目のAV動画は赤 VR動画は青　  ここまで
==================================================*/













/*======================================================
 ナビ項目を立体化
========================================================*/

.menu-list li {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,      /* 純白 */
    #fff9fb 55%,     /* ほんのりピンク反射 */
    #f6f6f6 100%     /* 下にごく薄い影 */
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 2px 0 #e6e6e6,
    0 6px 10px rgba(0,0,0,0.12);

  border-bottom: none;
}





.menu-list li a {
  position: relative;
  top: 0;
  transition: all .12s ease;
}

/* ===== アクティブ（押し込まれた状態） ===== */
.menu-list li.active {
  background: linear-gradient(#ff5a9c, #ff2d7a);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.15),
    0 1px 0 #b61f5f;
}

.menu-list li.active a {
  top: 2px; /* 押し込み */
}


/* ===== 非アクティブの境目を立体化 ===== */
.menu-list li:not(.active) {
  border-right: 1px solid #ddd;
}


/*======================================================
 ナビ項目を立体化　          ここまで
========================================================*/










/*======================================================
 スマホ用 ナビ立体表現の最適化
========================================================*/


@media (max-width: 768px) {

  .menu-list {
    height: 44px;
    display: flex;
  }

  .menu-list li {
    position: relative;
    height: 44px;
    flex: 1;
    background: linear-gradient(#ffffff, #f2f2f2);
   

    /* 立体の核 */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95), /* 上面の光 */
      inset 0 -1px 0 rgba(0,0,0,.06),     /* 下側の陰 */
      0 2px 0 #d0d0d0,                    /* 側面 */
      0 4px 6px rgba(0,0,0,.12);          /* 浮遊感 */

    transition: all .15s ease;
  }

  .menu-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-size: 14px;
    position: relative;
    top: 0;
    transition: all .15s ease;
  }

  /* ===== アクティブ（押し込み） ===== */
  .menu-list li.active {
    background: linear-gradient(#ff6aa7, #ff2d7a);

    box-shadow:
      inset 0 2px 4px rgba(0,0,0,.25), /* 押し込まれた影 */
      0 1px 0 #b61f5f,
      0 2px 3px rgba(0,0,0,.2);
  }

  .menu-list li.active a {
    top: 2px; /* 明確に沈ませる */
  }

}



/*======================================================
 スマホ用 ナビ立体表現の最適化
========================================================*/










/*===========================================================================
  作品詳細ページ下部に/av//vr/に戻るボタン：内部リンクナビ（最重要）
===============================================================================*/

.internal-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 18px;
  flex-wrap: wrap;
}

.internal-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
  border: 2px solid transparent;
}

/* AVボタン */
.internal-btn.av {
  background: #fff;
  color: #d4002a;
  border-color: #d4002a;
}

.internal-btn.av:hover {
  background: #d4002a;
  color: #fff;
}

/* VRボタン */
.internal-btn.vr {
  background: #fff;
  color: #0066cc;
  border-color: #0066cc;
}

.internal-btn.vr:hover {
  background: #0066cc;
  color: #fff;
}

/* スマホ微調整 */
@media (max-width: 768px) {
  .internal-btn {
    font-size: 13px;
    padding: 9px 14px;
  }
}





/*==================================================================================
  作品詳細ページ下部に/av//vr/に戻るボタン：内部リンクナビ（最重要）　ここまで
======================================================================================*/









/*=======================================================================
 他の作品 見出し（立体・下部は赤）
=========================================================================*/

.rel-performer .rel-title {
  position: relative;
  text-align: center;

  /* サイズ・余白（既存思想を尊重） */
  font-size: 20px;
  font-weight: 700;
  padding: 14px 18px;
  margin: 0 0 18px;

/* 背景：ほんのり赤グラデ */
background: linear-gradient(
  to bottom,
  #fff6f8 0%,   /* ほぼ白寄りピンク */
  #ffe9ee 60%,  /* 中間を少し淡く */
  #ffe1e8 100%  /* ★下の赤をワン段階弱め */
);

  color: #333;

  /* 立体感の核 */
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9), /* 上のハイライト */
    0 3px 0 #c72b54,                   /* 下の影（立体の芯） */
    0 8px 14px rgba(0,0,0,.12);        /* 浮き */

  /* 下ライン（赤系） */
  border-bottom: 1px solid #ff2d55;
}

/*========================================
 微調整：スマホ
========================================*/
@media (max-width: 768px) {
  .rel-performer .rel-title {
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
  }
}



/*=======================================================================
 他の作品 見出し（立体・下部は赤）
=========================================================================*/











/*========================================
VRページのH1見出し横のVRアイコン
========================================*/

.page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 360°アイコン */
.vr-360-icon {
  width: 42px;
  height: auto;
  margin-left: 4px;
  opacity: 0.85;
   position: relative;
  top: 3px;   /* ←ここが肝 */
}

/* スマホでは少し小さく */
@media (max-width: 768px) {
  .vr-360-icon {
    width: 34px;
  }
}


/*============================================
VRページのH1見出し横のVRアイコン　ここまで
=============================================*/












/*========================================
AVページのH1見出し横のVRアイコン
========================================*/

.page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Movieアイコン */
.av-Movie-icon {
  width: 34px;
  height: auto;
  margin-left: 4px;
  opacity: 0.85;
  position: relative;
  top: 0px;   /* ←ここが肝 */
}

/* スマホでは少し小さく */
@media (max-width: 768px) {
  .av-Movie-icon {
    width: 30px;
    position: relative;
  top: 1px;   /* ←ここが肝 */
  }
}


/*===============================================
AVページのH1見出し横のVRアイコン  ここまで
=================================================*/










.midashi-icons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 14px;
}

.midashi-icons img {
  height: 16px;
  width: auto;
}

/* スマホ */
@media (max-width: 768px) {
  .midashi-icons img {
    height: 14px;
  }

  .midashi-icons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 4px;
  }
}




















.entry-card-thumb,
.entry-card-thumb a {
  position: relative;
}


















/* =========================================================
   エントリーカード：画質ラベルHD,4Kなどの
   ========================================================= */

/* サムネ基準を安定させる（ズレ防止） */
.entry-card-thumb {
  position: relative;
}

.entry-card-thumb img {
  display: block; /* Cocoon由来のズレ防止 */
}

/* ラベルコンテナ */
.entry-quality-labels {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: flex;
  gap: 3px;
  z-index: 5;
  pointer-events: none; /* クリック阻害防止 */
}

/* ラベル画像 */
.entry-quality-labels img {
  height: 22px;
  width: auto;
  display: block;
  margin: 0 !important;
  opacity: 0.9;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

/* スマホ */
@media (max-width: 768px) {
  .entry-quality-labels {
    left: 3px;
    bottom: 3px;
    gap: 2px;
  }

  .entry-quality-labels img {
    height: 15px;
  }
}



/* =========================================================
   エントリーカード：画質ラベルHD,4Kなどの　　   ここまで
   ========================================================= */















/* =========================================================
   作品詳細ページのＡＣＦ出演者項目を内部リンク化
   ========================================================= */

.acf-performer-link {
  color: #1a73e8;        /* 青リンク */
  text-decoration: none;
  font-weight: 500;
}

.acf-performer-link:hover {
  text-decoration: underline;
}



/* =========================================================
   作品詳細ページのＡＣＦ出演者項目を内部リンク化
   ========================================================= */









/* =========================================================
   作品詳細ページ 他の出演作品>>に飛ぶテキストリンク
   ========================================================= */

.performer-related-link {
  margin: 24px 0;
  text-align: center;
}

.performer-related-link a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
}

.performer-related-link a:hover {
  text-decoration: underline;
}


/* ================================================================
   作品詳細ページ 他の出演作品>>に飛ぶテキストリンク　ここまで
   ================================================================ */









/* ================================================================
  ナビ項目の新着の左上角にnewアイコン表示
   ================================================================ */

/* 新着タブにNEW三角アイコンを表示 */
.header-menu .menu-list li:first-child {
  position: relative;
}

/* NEWアイコン */
.header-menu .menu-list li:first-child::before {
  content: "";
  position: absolute;
  top: -1px;      /* 枠線にピッタリ */
  left: -1px;     /* 枠線にピッタリ */
  width: 38px;    /* アイコンサイズ */
  height: 38px;
  background-image: url("https://grenoblecycling.com/wp-content/uploads/2026/01/new.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
  pointer-events: none; /* クリック邪魔しない */
}




/* ================================================================
  ナビ項目の新着の左上角にnewアイコン表示    ここまで
   ================================================================ */








/* ================================================================
   新着動画ページのH1の左に日付表示
   ================================================================ */
   
   
.page-title {
  text-align: center;
  margin: 0;
}

/* 中央の基準点 */
.page-title-inner {
  position: relative;
  display: inline-block;
}

/* 日付を「新着」の左に配置 */
.page-title .new-date {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 10px;

  font-size: 14px;
  color: #777;
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .page-title .new-date {
    font-size: 12px;
  }
}


/* ================================================================
   新着動画ページのH1の左に日付表示　   ここまで
   ================================================================ */










/* 週間人気ランキング：帯デザイン（評価目安と同系統） */
.sidebar .widget h3,
.sidebar .widget-title {
  position: relative;
  background: #fff8f4;
  padding: 8px 33px !important;
  border-radius: 8px;
  text-align: center;
  font-size: 1em !important;
  font-weight: 600;
  color: #555;
  margin-bottom: 20px;
  border-bottom: 3px solid #d4002a;
  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.9) 0%,
    rgba(255,255,255,0.7) 70%,
    rgba(0,0,0,0.03) 100%
  );
}


















/* =======================================================
  サイドバーの週間人気ランキングの帯の上下余白
   ======================================================= */

.sidebar .widget-title {
  margin-top: 0px !important;
  margin-bottom: 8px !important;
}


/* =======================================================
  サイドバーの週間人気ランキングの帯の上下余白　ここまで
   ======================================================= */



















/*========================================================
 週間人気ランキング：完全版（中央・1行・崩れ防止）
==========================================================*/

/* タイトル本体 */
.sidebar .widget-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ★ アイコンと文字の距離 */
  gap: 6px;

  padding: 10px 28px !important;
  margin: 0 auto 16px;

  text-align: center;
  white-space: nowrap;     /* 改行させない */
  line-height: 1.2;

  font-size: 1.1em !important;
  font-weight: 600;
  color: #555;

  /* 帯デザイン（評価目安と同系統） */
  background: #fff8f4;
  border-bottom: 3px solid #d4002a;

  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.95) 0%,
    rgba(255,255,255,0.75) 70%,
    rgba(0,0,0,0.03) 100%
  );
}

/* 左アイコン（王冠） */
.sidebar .widget-title::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  background-image: url("https://grenoblecycling.com/wp-content/uploads/2026/01/161227124.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* ★ アイコンだけ少し左へ */
  margin-left: -6px;
}

/*========================================
 スマホ最適化（立体感・視認性強化）
========================================*/
@media (max-width: 768px) {

  .sidebar .widget-title {
    padding: 8px 22px !important;
    font-size: 1em !important;
  }

  .sidebar .widget-title::before {
    width: 22px;
    height: 22px;
    margin-left: -5px;
  }

}






















/*=====================================================================================
 fanza 初回購入限定クーポン（テキストリンク）　ギフトアイコンと横並びwrap　 
=======================================================================================*/



/* fanza 初回購入限定クーポンテキストリンク*/
.fanza-coupon-text {
  display: inline-flex;        /* ★ block → inline-flex に統合 */
  align-items: center;         /* 縦中央 */
  justify-content: center;     /* 横中央 */

  width: fit-content;          /* PCでは中身幅 */
  margin: 16px auto;           /* 完全中央 */
  padding: 12px 20px;

  font-weight: 700;
  font-size: 15px;
  color: #c40000;
  text-decoration: none;
  border: 1px solid #333;
  border-radius: 6px;
  background: #ffffff;         /* 中を完全に白 */
  text-align: center;
  line-height: 1.5;
}

/* hoverは一切なし（色変化させない） */
.fanza-coupon-text:hover {
  color: #c40000;
  background: #ffffff;
}











/* スマホ表示 */
@media screen and (max-width: 768px) {
  .fanza-coupon-text {
    width: 70%;               /* 横幅いっぱい */
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px 8px;
    flex-wrap: wrap;          /* ★ 2行化を許可 */
  }
}

/* 初回購入限定！500円OFFクーポン スマホ2行 PC1行 */
.fanza-coupon-text span {
  display: inline;
}

@media screen and (max-width: 768px) {
  .fanza-coupon-text span {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* クーポン右側 ギフトアイコン */
.coupon-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;

  background-image: url("https://grenoblecycling.com/wp-content/uploads/2026/01/gift-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .coupon-icon {
    margin-top: 6px;
  }
}




/* ※※※クーポンテキスト文とギフトアイコン横並び クーポン中央配置ラッパー */

.fanza-coupon-wrap {
  display: flex;
  justify-content: center;   /* ★ 横中央 */
  width: 100%;
  
}






/*=====================================================================================
 fanza 初回購入限定クーポン（テキストリンク）　ギフトアイコンと横並びwrap　 ここまで
=======================================================================================*/

















/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}