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

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

/* ======================================================= */
/* 記事内のCSS*/
/* ======================================================= */


/*記事内トップ画像の表示制御
/* 他のCSSからの影響を最小限にするため、詳細度を高めに設定 */
  .custom-media-theater {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    background-color: #000000; /* 左右の余白を暗転 */
    width: 100%;
    margin: 20px 0;           /* 上下の記事との間隔 */
    padding: 0;
    overflow: hidden;         /* はみ出し防止 */
  }

  .custom-media-theater img {
    display: block;
    max-width: 100%;          /* 画面幅に合わせる */
    height: auto;             /* 比率を維持 */
    object-fit: contain;      /* 枠内に収める */
  }




/*メインページのヘッダーとキャッチフレーズ*/
.site-name-text {
    font-size: 50px;
	font-weight:bold;
}

.logo-text {
    padding:10px 0px 0px 0px;

}


.tagline {
    position: relative;
    display: inline-block;
    margin: 10px auto;
    padding: .5em 1em;
    min-width: 120px;
    max-width: 100%;
    color: black;
    background: none;
    border-radius: 30px;
	font-size:20px;
		font-weight:bold;

}
.tagline:before {
    content: "";
    position: absolute;
    top: 80%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top:none;
}



/* 検索フォームの場合の全体のレイアウト */

.item-label {
	font-size:19px;
	font-weight:normal;
}


/* 検索フォームの場合の全体のレイアウト */


input[type='submit'],
#bbp_reply_submit,
.bp-login-widget-register-link a {
  margin: 5px 0px 0px 0px;

}

input[type="submit" i]{
  margin-bottom:10px;

}


/*記事インデックスのタイトル部分*/
h2.entry-card-title.card-title.e-card-title {
	font-size:19px;
font-weight:700;
	padding: 1px 0px 1px 0px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}



/*記事インデックス内の関連記事タイトル部分*/
.entry-card-title, .related-entry-card-title {
		font-size:19px;
font-weight:700;
	padding: 1px 0px 1px 0px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}



/*人気ランキング記事のタイトル部分*/
.popular-entry-card-title {
	font-weight: bold;
		font-size:14px;
	padding: 1px 0px 1px 0px;
	margin: 0px 0px 20px 0px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* ページ送りの「次のページ」を非表示にする */
.pagination-next {
  display: none;
}

/* ページ送りのボタンの表示色 */
/* ページ送りのボタンの文字色と枠線 */
.page-numbers {
  color: #ff7198;
  border: 1px solid #ff7198;
  border-radius: 50%;
}

/* 選択中のボタンの背景色 */

.pagination .current {
  background-color: #ff7198;
  color: #fff;
}

/* わからない */
.page-numbers.dots {
  opacity: 1;
  background: none;
}

/* ページ送りのボタンのホバー設定 */

.pagination a:hover {
  background-color: #ff7198;
  color: #fff;
}


/* お問い合わせフォーム内の文字色とサイズ */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="your-subject"],
div.wpcf7 textarea[name="your-message"] {
	color: #000000;
	font-size: 12px;
}



/* 検索窓設定 */
/* わからん */
.searchandfilter > div > ul{
    width:100%;
    margin: 0;
    padding: 0;
}




/* 全体のレイアウト */
.searchandfilter > div > ul >li{
    display:flex;
    margin-top:-1px;
    align-items:center;
    width:100%;
}

/* 検索input box */
input[type="text" i] {
	margin: 1px 0px 5px 0px;
    font-weight: bold;
    border: solid 1px #000000;
		color: #000000;
	font-size: 12px;
}

/* カテゴリとタグ選択のプルダウン部分 */
.postform{
    margin: 5px 5px 5px 0px;
	font-size:12px;
	}


/* 検索実行Button */
.searchandfilter > div > ul >li:last-child{
    display:flex;
    border:none;
}

/* 検索実行Buttonの文字回り */
input[type="submit" i]{
border-radius:5px;
}


/* わからん */
.searchandfilter > div > ul >li h4{
    background:#eee;
    border-right:solid 1px #ccc;
    height:100%;
    padding:20px;
    margin:0;
	}

.sidebar h2, .sidebar h3 {
    border-radius: 5px;
	font-weight: 800;
	    margin-top: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#sidebar #search-2 h3 {
    border-radius: 5px;
	font-weight: 800;
	    margin-top: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
}


/**おすすめジャンル一覧内**/
/*各タグをまとめる枠線 */
.blank-box.bb-blue {
border-color:#ff7198;
padding-top:0px;
}

/*枠内のタイトルの位置 */
.blank-box p {
  margin-top:1px!important;
	position: relative;
	top:20px;

}


/*まーじん */
.column-2-4-1-3 {
 margin-bottom:1px !important;
}

/*各タグのボタンの色 */
.btn-pink, .btn-wrap.btn-wrap-pink > a {
    background-color:#ff7198;
	padding-top:2px;
	padding-bottom:2px;
}

/*各タグのボタンのサイズ */
.btn-m,
.btn-wrap.btn-wrap-m > a {
  padding: 0px 5px;
	font-size: 16px;
}


.pspe {
  margin-bottom:1px;
}




/*ランダム記事のタイトル文字を太字化 */
.is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title {
    font-weight: bold;
}






/* ヘッダーのグローバルメニュー */
.navi-in > ul {
	background-color: #ff7198;
	font-weight: 1000;
}

/* フッターのコピーライト色 */

div.source-org.copyright {
    color: #f3fafe;
}


/* 記事リストのタグ(左上)部分 */
/* 意図して非表示に設定中 */

.cat-label {
	display:none;
    font-weight: 800;
}



/* 記事リストのタグ(左上)部分 ※一部のカテゴリだけ適用されないので別途作成*/
/* 意図して非表示に設定中 */
.cat-label.cat-label-5, .cat-link.cat-link-5 {
	display:none;
	background-color: #ff7198;
}



/* 各カテゴリページのタイトル+フォルダ表示を削除。ファーストインプレッションで画像を見せたいため邪魔。タグページでは表示 */
.category #archive-title {
display: none;

}

.archive-title {
	margin-top:0px;
	margin-bottom:1px;
font-size:20px;
color:#ff7198;
}


/* 各カテゴリページの説明と記事関連の行間を狭める */
.entry-content {
    margin: 0;
}




/* すべてのページのアイキャッチを非表示*/
.eye-catch {
display: none;
}

/*すべてのページの記事のタイトル部分を非表示。記事検索にも影響出るか要検証*/
.entry-title {
display: none;
}



/* お問い合わせ画面の時間などを非表示*/
.post-update {
display: none;
}



/*キーワード検索結果後の記事一覧部分に出てくるSearchの非表示*/
/*特定の場所のClassだけを指定したい場合は「Class > Class」で指定してあげる*/
/*これは古いほう　2022/02/25以前*/

.main > .searchbox{
display: none;
}

.article-header > .searchbox{
display: none;
}

/*キーワード検索結果後の記事一覧部分に出てくるSearchの非表示*/
/*これは新しいほう　2022/02/26以降*/

/*ワード検索結果後*/
.main > form{
display: none;
}

/*カテゴリ検索結果後*/
.category-header {
display: none;
}

/*キーワード検索結果後*/
.article-header {
display: none;
}



/*カテゴリ/タグ検索後の説明と記事一覧の間の余白を狭める*/
.main > .article{
margin-bottom:0;
	
}


/*サイドバーのパーツ毎の余白を狭める*/

#sidebar > .widget{
padding-top:0;
}

#sidebar > .widget-sidebar{
margin-bottom:0;
}



/*サイドバーのプロフィール内の余白を狭める*/
.widget_author_box{
padding-bottom:0;
}





/*プロフィール内の見出しと「この記事を書いた人」の余白を狭める*/
#author_box-2 > .author-box{
padding-top:0;
padding-bottom:0;
}

/*プロフィール内の「この記事を書いた人」とアイコンの余白を狭める*/
.author-widget-name{
margin-bottom:0;
}

/*プロフィール内の見出しと「この記事を書いた人」の余白を狭める*/
.author-name{
margin-bottom:0;
}

/*プロフィール内のアイコンと名前の余白を狭める*/
.nwa .author-box .author-content{
padding-top:5px;
	padding-bottom:5px;
}

/*プロフィール内の名前と紹介文の余白を狭める*/
.author-box .author-name {
margin-bottom:10px;
margin-top:0;
}

/*プロフィール内の名前と紹介文の余白を狭める*/
#author_box-2 > .author-box {
margin-bottom:0;
}

/*プロフィール内ののホームアイコン/RSS遷移アイコンを消す*/

.nwa .author-box .sns-follow-buttons {
display: none;
}

#author_box-2 > .widget-title{
margin-top:0;
}
 

/*サイドバーのパーツ毎の余白を狭める(見出しタグの上の部分のmarginを削除する)*/





/*ジャンル一覧ページのカラムとヘッダーの幅を狭める*/

.post-156 > .entry-content {
padding-top:0;
}

.main > .post-156 {
padding-top:0;
}


/*サイドバー検索のカテゴリボタンの文字サイズ*/
.postform{
font-size:14px;
}

/*サイドバー検索のジャンルボタンの文字サイズ*/
#tag{
font-size:14px;
}






/*記事ページ下部の各Shareボタンの表示設定*/
.sns-buttons a.share-button {
border-radius:10px;
margin: 40px 0px 10px 0px;
}




/*記事ページ下部のMore関連ページの上下の余白設定*/
.related-entries{
padding-top:1px;
margin-bottom:0px;
}






/*記事ページ上部のカテゴリタグと記事本文間の行間 */
.entry-categories-tags{
margin-bottom:0px;
}

/* 親要素の干渉をリセット */
.breadcrumb {
    display: block !important; /* 強制的にブロック要素にする */
    line-height: 1.5;
    max-height: none !important; /* 以前の指定を打ち消し */
    overflow: visible !important;
}

.breadcrumb{

margin:0px 0px 0px 10px;

}



.breadcrumb:after {

    content: " #PR";

    color: #00afff;

    font-weight: bold;

    font-size: 14px;

}




.breadcrumb {

  display: -webkit-box;

  -webkit-line-clamp: 2;          /* 表示する行数を指定 */

  -webkit-box-orient: vertical;   /* ボックスの方向を垂直に設定 */

  overflow: hidden;               /* はみ出た部分を隠す */

  

  /* 念のため、1行の高さ（line-height）を明示すると表示が安定します */

  line-height: 1.5;

  max-height: 3em;                /* line-height × 行数 */

}


}

/*Not foundページの各種設定 */
/*文字を修正 */
.posts-not-found > p {
	font-size:0px;
		}

.posts-not-found > p:before{
content:'投稿が見つかりませんでした。キーワードとカテゴリ/タグを調整して再度お試しください。';
font-size:18px;
}

/*行崩れを解除 */
.ect-3-columns > *,
.fpt-3-columns > * {
 width:100%;
}





/*記事ページ内のカテゴリタグの背景色 */
a.cat-link {
background: #ff7198;
}

/*記事ページ内のタグタグの文字色やボーダー色 */

a.tag-link {
    color: #ff7198;
    border-color: #ff7198;
}


/*ページ上部に戻るボタンの背景色 */
.go-to-top-button {
background-color: #ff7198;
}

/*ページ上部に戻るボタンの文字色 */
.go-to-top .go-to-top-button {
	color: #fff;
}



/*画面サイズが小さい時のメニューから開くサイドバーのタグ背景色 */
#slide-in-sidebar .widget-title {
    background: #ff7198;
}


/*サイドバー「タグ」設定時のタグ表示 */
.tagcloud a {
    font-weight: bold;
    font-size: 14px;
	background-color:#ffe5e5;
		cursor: pointer;
	transition: all 0.3s ease 0s;
	border-radius:10px;
}

/*サイドバー「タグ」設定時のホバー表示 */
.tagcloud a:hover {
    background-color: #ff7198;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
	transform: translateY(-0.1875em);
}




/*画面が小さい時の株メニューから開くメニュー項目 */
ul.menu-drawer:before, ul.menu-drawer:after {
    background-color: #ff7198;
	    font-weight: bold;
    font-size: 14px;
	border-radius:5px;
}

.menu-drawer a {
	font-size:16px;
	color:block;
}

ul.menu-drawer:after {
display:none;
}





/*記事本文部分の枠色　このままだとジャンル一覧などにも反映状態 */




.main > .article {
padding-top:5px;
padding-bottom:5px;
margin-bottom:5px;
padding-right: 80px;
padding-left: 80px;
}


/* 固定ページではメインコンテンツの左右パディングを解除 */
body.page .main > .article,
body.page .main-container,
body.page #main-content {
    /* 左右のパディングを0に設定して上書き */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* 上下のパディングは維持したい場合は top/bottom の値を設定 */
    /* padding-top: 40px; */ 
    /* padding-bottom: 40px; */
}

/* 補足: もし子要素にも80pxが設定されている場合は、それも解除する */
body.page .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



.main > .post-156 {
background-color :transparent;
}




.related-entries {
background-color : #faf3f6;
}


/*サイドバーの枠色 */

.sidebar {
background-color : #faf3f6;
	padding:10px 0px 0px 0px;
}

.widget-sidebar {
background-color : #faf3f6;

}

/*サイドバーのマージン */
.no-scrollable-sidebar .sidebar {
    padding-left: 10px;
    padding-right: 10px;
}




/*囲みボタン　横幅 */
.btn, .ranking-item-link-buttons a,
.btn-wrap > a,
.wp-block-freeform .btn-wrap > a {
width: auto;
margin:0 auto;
}


/*囲みボタン　ライトブルーの装飾 */
.btn-wrap.btn-wrap-light-blue > a {
  background-color: #4fc9ff;
}


/*囲みボタン　ライトブルーのマウスオーバー時の装飾 */

.btn-wrap.btn-wrap-light-blue > a:hover {
    background-color:#35eb42 ;
    }








/*************超重要な部分！ ************/
/*記事内の動画の中央寄せ */
/*この値にmax-width: 640px;をかけることで動画サイズも調整可能 */

.video-container, .instagram-container, .facebook-container {
	max-width: 960px;
}


.wp-video {
    width: 960px;
}
/*************超重要な部分！ ************/






/*グローバルメニューと記事の間の幅*/
.main {
 padding-top: 0px;
}




/*タグと本文の間の幅*/
.entry-content{
 padding-top: 1px;

}


/*タグページのタグ画像と説明表示枠*/
.column-2-3-1-2 {
 margin-bottom:1px !important;
}

.tag-page-content {
 background-color:#faf3f6;
		border: 1px solid rgba(255,113,152,.5);
}



/*記事本文内の「作品紹介」と「その他タグ」の見出し装飾*/
pre, .pager-links span, table th, .pagination .current {
    font-size: 18px;
    background-color:#ff7198 ;
	font-weight:800;
    border-color:#ff55a1 ;
	color:#ffffff;
	font-family: 'メイリオ', sans-serif;
}




/*記事本文内の「PR」表記*/

.badge-pink {
    background-color:#ff7198;
}


/*左右幅*/
/*左右幅記事ページ全体*/





/*記事本文内*/

/*シェアする*/




/*ウィジェットのタグ切り替えの装飾*/
.tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: 16px;
	font-weight:bold;
    text-align: center;
    cursor: pointer;
}

.tab-001 > label:hover {
    opacity: .8;
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-001 label:has(:checked) {
    background-color: #fff;
    border-color: #5079f6 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-001 label:has(:checked) + div {
    display: block;
}

/*ウィジェットのタグ切り替えの装飾*/
.tab-002 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}

.tab-002 > label {
    flex: 1 1;
    order: -1;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: 16px;
	font-weight:bold;    
	text-align: center;
    cursor: pointer;
}

.tab-002 > label:hover {
    opacity: .8;
}

.tab-002 input {
    display: none;
}

.tab-002 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-002 label:has(:checked) {
    background-color: #fff;
    border-color: #5079f6 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-002 label:has(:checked) + div {
    display: block;
}





/*エントリーカードのカテゴリ部分*/
a.cat-link {
    background: #ff7198;
    font-weight: bold;
    letter-spacing: 0.5px;
		margin:1px;
}

a.cat-link:hover {
    background-color: #ff7198;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
	transform: translateY(-0.1875em);
}



/*エントリーカードのタグ部分*/

a.tag-link {
    color: #ff7198;
    border-color: #ff7198;
    font-weight: bold;
    letter-spacing: 0.5px;
	margin:1px;
}

a.tag-link:hover {
    background-color: #ff7198;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
	transform: translateY(-0.1875em);
}



/************************************
** 子テーマ用のスタイルを書　end
************************************/




/************************************
** レスポンシブデザイン用のメディアクエリ start
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	aside#search-2 {
    padding: 2px 9px 2px 9px;
}
	
	
	
/*tagの上の幅*/
.entry-categories-tags.ctdt-one-row {
padding: 2px 10px 0 10px;
}


.tab-001 > label {
    font-size: 12px;

}

.tab-002 > label {
    font-size: 12px;

}
	
	
}

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

.main > .article {
padding-right: 10px;
padding-left: 10px;
}
	
	
  .container .column-wrap {
    flex-direction: row;
  }

		/*推しジャンルページの記事サムネ大きさ*/
.swiper-slide {
    width: 150px;
}

a.swiper-slide {
    width: 150px;
}
	
	
	
}

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

	
.tagline {
font-size:15px;
font-weight:bold;

}
	


	
	/*記事インデックスのタイトル部分*/
h2.entry-card-title.card-title.e-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
	
	
}



/************************************
**新着/予約 一覧画面の表示制御
************************************/

/* 親要素（新着/予約一覧全体） */
.fanza-list-wrapper {
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -10px; 
    
    /* ★修正点: 子要素の高さを自動で揃える */
    align-items: stretch; 
}

/* カード一つ分（記事一つ） */
.fanza-card-item {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px; 
    text-align: center;
}

/* カード内のリンク全体 - ピンク色の枠線 */
.fanza-card-item a {
    display: flex; /* ★修正点: aタグ内もFlexbox化 */
    flex-direction: column; /* 縦方向に要素を並べる */
    height: 100%; /* 親要素(fanza-card-item)と同じ高さを適用 */
    
    text-decoration: none;
    border: 1px solid #ff7198; 
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}

.fanza-card-item a:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
}

/* サムネイルコンテナ */
.card-thumb {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 5px;
}

/* サムネイル画像 */
.card-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* タイトルと日付の間のスペースを強制的に調整 */
/* カード内の全ての p タグのマージンを初期化 */
.fanza-card-item p {
    margin: 0 !important; 
    padding: 0;
}

/* タイトル */
.card-title {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    
    /* タイトルが長くなっても下部の要素（日付）を押し下げない */
    margin-bottom: 5px !important; 
    

}

/* 日付 */
.card-date {
    font-size: 0.85em;
    color: #999;
    /* 上下のマージンを完全にゼロに */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* ★追加: 日付が底に固定されるようにする */
    margin-top: auto !important; 
}

/* スマートフォン（画面幅768px未満）での表示調整 */
@media (max-width: 768px) {
    .fanza-list-wrapper {
        margin: 0; 
    }
    .fanza-card-item {
        width: 100%; 
        padding: 0;
        margin-bottom: 15px;
    }
    .fanza-card-item a {
        padding: 10px;
    }
}

/* ----------------------------------------------- */
/* ★新規追加: 特定のクラスの干渉を強制リセット */
/* ----------------------------------------------- */

/* .fanza-list-wrapper の中にある p タグの top/margin を強制ゼロにする */
.fanza-list-wrapper p {
    /* 開発者モードで見つかった top: 20px の干渉を無効化 */
    position: static !important;
    top: auto !important;
    
    /* 念のため、その他のマージン干渉も防ぐ */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* タイトルと日付の間のマージンは維持 */
.card-title {
    margin-bottom: 5px !important; 
}



/* ==================================== */
/* 1. custom-gallery サムネイル表示スタイル (Flexbox柔軟拡大・aspect-ratio最終版) */
/* ==================================== */

.custom-gallery {
    /* Flexboxを強制適用し、横並びと折り返しを最優先 */
    display: flex !important; 
    flex-wrap: wrap !important; 
    align-items: flex-start !important; 
    
    /* サムネイル間の余白をマイナスマージンで調整 */
    margin: 10px -5px -5px -5px !important; 
    padding: 0;
    overflow: hidden; 
}

/* 各サムネイル要素（<a>タグ）のスタイル */
body .custom-gallery a {
    display: block !important;
    cursor: pointer;
    overflow: hidden; 
    box-sizing: border-box !important;
    
    /* 最小幅160pxを保証しつつ、横幅いっぱいに広がる */
    width: calc(160px + 10px); 
    flex-grow: 1 !important;      
    flex-shrink: 1 !important;

    /* サムネイル間の余白をマージンで調整 */
    margin: 0 5px 5px 5px !important; 
    
    /* ★修正1: ネイティブな aspect-ratio で縦横比 16:9 を強制固定 */
    aspect-ratio: 16 / 9 !important; 
    
    /* ★修正2: aspect-ratio 非対応ブラウザ向けの代替（padding-bottomハックを安全な形で残す） */
    /* aspect-ratio が効けば、この height: auto と padding-bottom: 0 は無視される */
    height: auto !important; 
    padding-bottom: 0 !important; 
    position: relative !important; 
    

    /* 余白の背景色を透過90%の黒に固定 */
    background-color: rgba(0, 0, 0, 0.9) !important; 
}

/* 画像自体のスタイル */
body .custom-gallery img {
    /* position: absolute は aspect-ratio でも必要 */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    width: 100% !important;
    height: 100% !important; 
    display: block !important;
    transition: transform 0.3s ease;
    
    /* 画像を枠内に完全に収め、余白を出す（Contain） */
    object-fit: contain !important; 
}

/* ==================================== */
/* 2. ライトボックス/モーダル スタイル (最終修正版) */
/* ==================================== */

/* 拡大表示コンテナ (透過黒マスク) */
.lightbox-modal {
    display: none;       
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 9999;       
    align-items: center;
    justify-content: center;
    cursor: pointer;     
    overflow: hidden;
}

/* 拡大画像を含むコンテナ */
.lightbox-content {
    /* ★修正1: パディングを削除。ボタンは画面基準で配置するため、不要 */
    position: relative;
    max-width: 90%;
    max-height: 90%;
    
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    
    /* padding-bottom を削除 */
}

/* 拡大画像自体 */
.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    object-fit: contain; 
    cursor: default;
}

/* ==================================== */
/* 3. 縦長画像対応のサイズ調整クラス (優先度強化) */
/* ==================================== */

/* 縦長画像が画面高さを超える場合に、高さを縮小する */
.lightbox-content img.is-tall {
    max-height: 60vh !important; 
    max-width: 100%;
}


/* ==================================== */
/* 4. 左右の切り替えボタン (画面固定配置に修正) */
/* ==================================== */

.lightbox-prev, .lightbox-next {
    /* ★修正2: position: fixed; で画面基準に固定 */
    position: fixed; 
    
    /* 画面の最下部から20px上に配置 (任意で調整してください) */
    bottom: 20px; 
    
    /* 共通のスタイル */
    color: white;
    font-size: 40px;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    line-height: 1;
    z-index: 10000; /* モーダルよりも高いz-indexを設定 */
    transition: background-color 0.2s;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-prev {
    /* 画面中央から左に寄せる */
    left: 50%;
    transform: translateX(calc(-100% - 20px)); /* ボタン幅と余白分左へ */
}

.lightbox-next {
    /* 画面中央から右に寄せる */
    right: 50%; 
    transform: translateX(calc(100% + 20px)); /* ボタン幅と余白分右へ */
}





/* ===================================================================
   [修正版] カスタムアイコンボタン CSS
   =================================================================== */

/* 1. アイコン群全体 の設定 */
/* ★修正：.entry-card-content を削除し、どこでも動作するようにしました★ */
.ec-action-group {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    margin: 10px 0 8px; /* 余白を少し調整 */
    padding-left: 2px;
}

/* 2. 個別アイコンボタンのサイズとデザイン */
.ec-action-group .ec-icon-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 32px; 
    height: 32px; 
    padding: 0;
    margin-right: 8px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #ffe0e6; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

/* ホバーエフェクト */
.ec-action-group .ec-icon-btn:hover {
    background-color: #ffc1cc; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 
}

/* 3. アイコン（SVG）自体のサイズと色 */
.ec-action-group .ec-icon {
    width: 18px; 
    height: 18px; 
    stroke-width: 2.5px; 
}

/* 4. 各アイコンの色 */
.ec-btn-camera .ec-icon { stroke: #007bff; }
.ec-btn-play .ec-icon { stroke: #dc3545; }
.ec-btn-link .ec-icon { stroke: #28a745; }

/* スマートフォン表示時の調整 */
@media screen and (max-width: 768px) {
    .ec-action-group {
        justify-content: flex-start;
    }
}


/* ======================================================= */
/* アイコン配色強制反映CSS + UX強化 (背景: #ff99b8, 線: 白→黒) */
/* ======================================================= */

/* アイコンボタンの背景色とUX設定 (変更なし) */
.entry-card .ec-icon-btn {
    /* UX設定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    
    /* 背景色 */
    background-color: #ff99b8 !important; /* 薄いピンク */
    border: none !important;
}
.entry-card .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の色（少し濃い薄ピンク）*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}
.entry-card .ec-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    transform: translateY(1px);
}

/* ======================================================= */
/* アイコン配色強制反映CSS + UX強化 (背景: #ff99b8, 線: 濃いピンク→黒) */
/* ======================================================= */

/* アイコンボタンの背景色とUX設定 */
.entry-card .ec-icon-btn {
    /* UX設定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    
    /* 背景色 */
    background-color: #f9c2d2 !important; /* 薄いピンク */
    border: none !important;
}
.entry-card .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の色（少し濃い薄ピンク）*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}
.entry-card .ec-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    transform: translateY(1px);
}



/* ----------------------------------------------------------------- */
/* ★★★ 通常時: SVGの線/塗りつぶしを濃いピンクに設定 ★★★ */
/* ----------------------------------------------------------------- */
.entry-card .ec-icon-btn svg {
    stroke: #e06085 !important; /* ★修正: 通常時の線を濃いピンクに */
    fill: none !important;
    transition: stroke 0.2s, fill 0.2s; /* ホバー時の変化を滑らかにする */
}

/* リンクアイコンの塗りつぶしや Webフォントの色を濃いピンクに設定 */
.entry-card .ec-icon-btn[data-type="link"] svg,
.entry-card .ec-icon-btn i {
    fill: #e06085 !important; /* SVG塗りつぶしを濃いピンクに強制 */
    color: #e06085 !important; /* Webフォントの色を濃いピンクに強制 */
    transition: color 0.2s, fill 0.2s;
}

/* ----------------------------------------------------------------- */
/* ★★★ ホバー時: SVGの線/塗りつぶしを黒に設定 ★★★ */
/* ----------------------------------------------------------------- */
.entry-card .ec-icon-btn:hover svg {
    stroke: #000000 !important; /* ホバー時の線を黒に */
    fill: none !important;
}

.entry-card .ec-icon-btn:hover[data-type="link"] svg,
.entry-card .ec-icon-btn:hover i {
    fill: #000000 !important; /* ホバー時のSVG塗りつぶしを黒に強制 */
    color: #000000 !important; /* ホバー時のWebフォントの色を黒に強制 */
}



/* -------------------------------------- */
/* 投稿カード内のタクソノミー（女優・メーカー）共通スタイル */
/* -------------------------------------- */
.entry-card-taxonomies {
    /* Flexboxでラッパーを横並びに配置 */
    display: flex;
    flex-wrap: wrap; /* 要素が多くなったら自動的に改行する */
    gap: 10px;      /* ラッパー間の間隔 */
    margin-top: 5px;
    font-size: 0.8em;
    padding-top: 5px; 
}

/* 各タクソノミーのラッパー（女優用、メーカー用） */
.taxonomy-wrapper {
    /* 横並びの親要素の中で個別にスタイルを適用できるようにする */
    display: flex;
    align-items: center;
}

/* タクソノミーボタン共通 */
.taxonomy-btn {
    /* ボタンをリンクのように見せるためのリセットとスタイル */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    display: inline;
}

/* -------------------------------------- */
/* 投稿カード内のタクソノミー（女優・メーカー）共通スタイル */
/* -------------------------------------- */
.entry-card-taxonomies {
    /* Flexboxでラッパーを横並びに配置 */
    display: flex;
    flex-wrap: wrap; /* 要素が多くなったら自動的に改行する */
    gap: 5px;       /* 🚨 ラッパー間の間隔を狭める */
    margin-top: 5px;
    font-size: 0.85em; /* 🚨 文字を少し大きく */
    padding-top: 5px; 
}

/* 各タクソノミーのラッパー（女優用、メーカー用） */
.taxonomy-wrapper {
    display: flex;
    /* 🚨 女優名やメーカー名が複数ある場合に横並びにするため、gapを適用 */
    gap: 3px; 
    align-items: center;
}

/* タクソノミーボタン共通（ベースのタグデザイン） */
.taxonomy-btn {
    /* リセットと基本スタイル */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    display: inline-flex; /* 🚨 アイコンと文字を中央寄せで横並びにする */
    align-items: center;
    text-decoration: none; /* 下線を消す（任意） */

    /* 🚨 タグデザインの共通設定 */
    padding: 3px 6px;
    border-radius: 4px; /* わずかな角丸 */
    font-weight: bold;
    transition: background-color 0.2s, opacity 0.2s; /* ホバー時のアニメーション */
    white-space: nowrap; /* タグが途中で改行されないようにする */
}

/* -------------------------------------- */
/* 投稿カード内のタクソノミー（女優・メーカー・カテゴリ）共通スタイル */
/* -------------------------------------- */
.entry-card-taxonomies {
    /* Flexboxでラッパーを縦に配置 */
    display: flex; 
    flex-direction: column; /* 🚨 ラッパー全体を縦に並べる（カテゴリを次の行にする） */
    gap: 5px;      /* 行間の間隔（女優・メーカーの行とカテゴリの行の間） */
    margin-top: 5px;
    font-size: 0.85em; 
    padding-top: 5px; 
}

/* 🚨 女優・メーカー・カテゴリの各ラッパー */
.taxonomy-wrapper {
    /* ラッパー内部はタグを横並びにして折り返す */
    display: flex;
    flex-wrap: wrap; /* タグが複数ある場合に折り返す設定 */
    gap: 3px; /* タグ間の間隔 */
    align-items: center;
}

/* タクソノミーボタン共通（タグデザイン・改行処理） */
.taxonomy-btn {
    /* リセットと基本スタイル */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    text-decoration: none; 

    /* タグデザインの共通設定 */
    padding: 3px 6px;
    border-radius: 4px; 
    font-weight: bold;
    transition: background-color 0.2s, opacity 0.2s; 
    
    /* タグ内での文字の改行を禁止 */
    white-space: nowrap; 
    word-break: normal;
}

/* -------------------------------------- */
/* 女優・メーカー・カテゴリごとの個別デザインとアイコン */
/* -------------------------------------- */

/* 💄 女優のデザイン */
.actress-btn {
    background-color: #ff7198; /* 背景ピンク */
    color: #fff;               /* 文字色白 */
}
.actress-btn::before {
    content: "♥"; 
    font-size: 1em; 
    margin-right: 4px;
}

/* 🏭 メーカーのデザイン */
.maker-btn {
    background-color: #4dc4ff; /* 背景水色 */
    color: #fff;               /* 文字色白 */
}
.maker-btn::before {
    content: "★"; 
    font-size: 1em; 
    margin-right: 4px;
}
/* -------------------------------------- */
/* 📂 カテゴリのデザイン (マークなし最終版) */
/* -------------------------------------- */
.category-btn {
    background-color: #fff;       /* 背景: 白 */
    color: #6c757d;               /* 文字色: グレー */
    border: 2px solid #6c757d;    /* 枠線: グレー */
    font-weight: bold;            /* 文字を太字に設定 */
}

/* -------------------------------------- */
/* 🚨 ホバー効果 (反転) */
/* -------------------------------------- */
.category-btn:hover {
    background-color: #6c757d; /* 🚨 背景: グレーに反転 */
    color: #fff;               /* 🚨 文字色: 白に反転 */
    border: 2px solid #6c757d;    /* 枠線は引き続きグレー（任意ですが、反転した色に合わせるとより統一感が出ます） */
    opacity: 1; /* 透過なし */
}

/* -------------------------------------- */
/* ホバー効果 */
/* -------------------------------------- */
.taxonomy-btn:hover {
    opacity: 0.8; 
}

.actress-btn:hover {
    background-color: #e65c82;
}
.maker-btn:hover {
    background-color: #389cd6;
}

/* 🚨 カテゴリのホバー効果 */
.category-btn:hover {
    background-color: #5a6268; /* 濃いグレー */
}



/* ====================================
   最終 Flexbox 改良版: 3列固定、間隔を安定化
   ==================================== */
.fanza-new-arrivals-wrapper {
    display: flex;       
    flex-wrap: wrap;     
    align-items: stretch; 
    
    /* 左右の隙間（3px）を相殺するためのネガティブマージン */
    margin-left: -1.5px;
    margin-right: -1.5px;
    padding: 0;
}

.fanza-card-item {
    /* 1. 幅は純粋なパーセンテージで、計算誤差を防ぐ */
    width: 33.333333%; 
    
    /* 2. ★ 修正箇所：行間隔を4pxに設定 (3番目の値) */
    margin: 0 0 4px 0; /* 上 0, 左右 0, 下 4px */
    box-sizing: border-box; 
    flex-grow: 0;
    flex-shrink: 0;

    /* 3. 左右の隙間（3px）をシミュレートするためのパディング */
    padding-left: 1.5px;
    padding-right: 1.5px;
}

/* ★ カード本体（リンクタグやコンテンツ）にさらにスタイルが必要な場合 */
.fanza-card-item > * {
    height: 100%;
}


/* ====================================
   レスポンシブ設定: 2列表示
   ==================================== */
@media screen and (max-width: 550px) {
    .fanza-card-item {
        /* 100% / 2 */
        width: 50%; 
    }
}

/* スマートフォン表示（1列表示） */
@media screen and (max-width: 400px) {
    .fanza-new-arrivals-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
    .fanza-card-item {
        width: 100%; 
        padding-left: 0;
        padding-right: 0;
    }
}






/* =============================================
   UI レイアウト修正 CSS (競合回避・左寄せ・サムネイル下配置版)
   ============================================= */

/* 1. カード全体は基準点にしない (アイコン配置のため) */
/* .fanza-new-arrivals-wrapper .fanza-card-item {
     position: relative; <- この設定は削除またはコメントアウト
} */


/* 2. アイコン群をサムネイルの下、記事カード内の要素として扱う */
.fanza-new-arrivals-wrapper .ec-action-group {
    display: flex;       
    flex-direction: row; 
    gap: 3px;            
    
    /* 修正箇所: 絶対配置に関するプロパティをすべて削除またはコメントアウト */
    /* position: absolute; */
    /* top: 5px; */
    /* left: 5px; */
    /* right: auto; */
    /* z-index: 10; */
    
    /* 左寄せのため、フレックスコンテナの先頭に寄せる */
    justify-content: flex-start; 
    
    /* 左右の余白を適切に設定 */
    padding: 5px; 
}

/* 3. アイコンボタンのサイズを保護 */
.fanza-new-arrivals-wrapper .ec-icon-btn {
    flex-shrink: 0;      
    flex-grow: 0;        
}

/* 4. タクソノミー/発売日などのメタ情報 (余白を調整) */
/* ec-action-group で padding を設定したため、他の要素の padding を調整 */
.fanza-new-arrivals-wrapper .fanza-card-item .entry-card-taxonomies {
    padding: 0 5px; 
}
.fanza-new-arrivals-wrapper .fanza-card-item .card-date {
    padding: 0 5px 5px; 
    margin-top: 3px;
    font-size: 11px;
}

/* ======================================================= */
/* 新着一覧用アイコン配色・UX強化 (親セレクタ: .fanza-new-arrivals-wrapper) */
/* ======================================================= */

/* アイコンボタンの背景色とUX設定 */
.fanza-new-arrivals-wrapper .ec-icon-btn {
    /* UX設定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    
    /* 背景色 */
    background-color: #f9c2d2 !important; /* 薄いピンク (#f9c2d2を使用) */
    border: none !important;
}
.fanza-new-arrivals-wrapper .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の色（少し濃い薄ピンク）*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}
.fanza-new-arrivals-wrapper .ec-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    transform: translateY(1px);
}

/* ----------------------------------------------------------------- */
/* ★★★ 通常時: SVGの線/塗りつぶしを濃いピンクに設定 ★★★ */
/* ----------------------------------------------------------------- */
.fanza-new-arrivals-wrapper .ec-icon-btn svg {
    stroke: #e06085 !important; /* ★通常時の線を濃いピンクに */
    fill: none !important;
    transition: stroke 0.2s, fill 0.2s; 
}

/* リンクアイコンの塗りつぶしや Webフォントの色を濃いピンクに設定 */
.fanza-new-arrivals-wrapper .ec-icon-btn[data-type="link"] svg,
.fanza-new-arrivals-wrapper .ec-icon-btn i {
    fill: #e06085 !important; /* SVG塗りつぶしを濃いピンクに強制 */
    color: #e06085 !important; /* Webフォントの色を濃いピンクに強制 */
    transition: color 0.2s, fill 0.2s;
}

/* ----------------------------------------------------------------- */
/* ★★★ ホバー時: SVGの線/塗りつぶしを黒に設定 ★★★ */
/* ----------------------------------------------------------------- */
.fanza-new-arrivals-wrapper .ec-icon-btn:hover svg {
    stroke: #000000 !important; /* ホバー時の線を黒に */
    fill: none !important;
}

.fanza-new-arrivals-wrapper .ec-icon-btn:hover[data-type="link"] svg,
.fanza-new-arrivals-wrapper .ec-icon-btn:hover i {
    fill: #000000 !important; /* ホバー時のSVG塗りつぶしを黒に強制 */
    color: #000000 !important; /* ホバー時のWebフォントの色を黒に強制 */
}








/* =============================================
   1. 予約一覧 (fanza-pre-order-wrapper) レイアウト調整
   ============================================= */

/* アイコン群をサムネイルの下、記事カード内の要素として扱う */
.fanza-pre-order-wrapper .ec-action-group {
    display: flex;       
    flex-direction: row; 
    gap: 3px;            
    
    /* 左寄せのため、フレックスコンテナの先頭に寄せる */
    justify-content: flex-start; 
    
    /* 左右の余白を適切に設定 */
    padding: 5px; 
}

/* アイコンボタンのサイズを保護 */
.fanza-pre-order-wrapper .ec-icon-btn {
    flex-shrink: 0;      
    flex-grow: 0;        
}

/* タクソノミー/発売日などのメタ情報 (余白の調整) */
/* アイコン群と重ならないよう、padding を調整 */
.fanza-pre-order-wrapper .fanza-card-item .entry-card-taxonomies {
    /* アイコン群の下からの表示を開始するため、上部に少しパディングを追加 */
    padding: 5px 5px 0; 
}

.fanza-pre-order-wrapper .fanza-card-item .card-date {
    padding: 0 5px 5px; 
    margin-top: 3px;
    font-size: 11px;
}

/* ======================================================= */
/* 2. 予約一覧用アイコン配色・UX強化 (親セレクタ: .fanza-pre-order-wrapper) */
/* ======================================================= */

/* アイコンボタンの背景色とUX設定 */
.fanza-pre-order-wrapper .ec-icon-btn {
    /* UX設定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    
    /* 背景色 */
    background-color: #f9c2d2 !important; /* 薄いピンク */
    border: none !important;
}
.fanza-pre-order-wrapper .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の色（少し濃い薄ピンク）*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}
.fanza-pre-order-wrapper .ec-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    transform: translateY(1px);
}

/* --- SVG線の色設定 --- */
.fanza-pre-order-wrapper .ec-icon-btn svg {
    stroke: #e06085 !important; /* 通常時の線を濃いピンクに */
    fill: none !important;
    transition: stroke 0.2s, fill 0.2s; 
}
.fanza-pre-order-wrapper .ec-icon-btn[data-type="link"] svg,
.fanza-pre-order-wrapper .ec-icon-btn i {
    fill: #e06085 !important; 
    color: #e06085 !important; 
    transition: color 0.2s, fill 0.2s;
}

/* --- ホバー時: SVG線の色設定 (黒) --- */
.fanza-pre-order-wrapper .ec-icon-btn:hover svg {
    stroke: #000000 !important; /* ホバー時の線を黒に */
    fill: none !important;
}
.fanza-pre-order-wrapper .ec-icon-btn:hover[data-type="link"] svg,
.fanza-pre-order-wrapper .ec-icon-btn:hover i {
    fill: #000000 !important; 
    color: #000000 !important; 
}




/* ======================================================= */
/* おすすめ一覧用アイコン配色・UX強化 (親セレクタ: .fanza-recommended-wrapper */
/* ======================================================= */

/* アイコンボタンの背景色とUX設定 */
.fanza-recommended-wrapper .ec-icon-btn {
    /* UX設定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    
    /* 背景色 */
    background-color: #f9c2d2 !important; /* 薄いピンク (#f9c2d2を使用) */
    border: none !important;
}
.fanza-recommended-wrapperr .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の色（少し濃い薄ピンク）*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}
.fanza-recommended-wrapper .ec-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    transform: translateY(1px);
}

/* ----------------------------------------------------------------- */
/* ★★★ 通常時: SVGの線/塗りつぶしを濃いピンクに設定 ★★★ */
/* ----------------------------------------------------------------- */
.fanza-recommended-wrapper .ec-icon-btn svg {
    stroke: #e06085 !important; /* ★通常時の線を濃いピンクに */
    fill: none !important;
    transition: stroke 0.2s, fill 0.2s; 
}

/* リンクアイコンの塗りつぶしや Webフォントの色を濃いピンクに設定 */
.fanza-recommended-wrapper .ec-icon-btn[data-type="link"] svg,
.fanza-recommended-wrapper .ec-icon-btn i {
    fill: #e06085 !important; /* SVG塗りつぶしを濃いピンクに強制 */
    color: #e06085 !important; /* Webフォントの色を濃いピンクに強制 */
    transition: color 0.2s, fill 0.2s;
}

/* ----------------------------------------------------------------- */
/* ★★★ ホバー時: SVGの線/塗りつぶしを黒に設定 ★★★ */
/* ----------------------------------------------------------------- */
.fanza-recommended-wrapper .ec-icon-btn:hover svg {
    stroke: #000000 !important; /* ホバー時の線を黒に */
    fill: none !important;
}

.fanza-recommended-wrapper .ec-icon-btn:hover[data-type="link"] svg,
.fanza-recommended-wrapper .ec-icon-btn:hover i {
    fill: #000000 !important; /* ホバー時のSVG塗りつぶしを黒に強制 */
    color: #000000 !important; /* ホバー時のWebフォントの色を黒に強制 */
}
















/* ----------------------------------------------------
   記事タイトル (card-title) の左揃え
   ---------------------------------------------------- */
.fanza-card-item .card-title {
    /* 中央揃えを解除し、左揃えを適用 */
    text-align: left !important;
    
    /* 記事一覧のタイトルが中央揃えになっている場合に備えて、marginも調整 */
    margin-left: 0 !important;
    margin-right: 0 !important;
	
	font-size: 19px;
}



/* ======================================================= */
/* [レコメンド対応] アイコン群のレイアウトと共通設定 */
/* ======================================================= */

/* 新着、予約、そしてレコメンド一覧のアイコンラッパーを共通化 */
.fanza-new-arrivals-wrapper .ec-action-group,
.fanza-pre-order-wrapper .ec-action-group,
.fanza-recommend-wrapper .ec-action-group {
    display: flex;        
    flex-direction: row; 
    gap: 3px;            
    justify-content: flex-start; /* 左寄せ */
    padding: 5px; 
}

/* アイコンボタンの共通サイズ保護 */
.fanza-new-arrivals-wrapper .ec-icon-btn,
.fanza-pre-order-wrapper .ec-icon-btn,
.fanza-recommend-wrapper .ec-icon-btn {
    flex-shrink: 0;      
    flex-grow: 0;        
}

/* ======================================================= */
/* [レコメンド対応] アイコン配色・UX強化 (背景: ピンク / 線: 濃いピンク) */
/* ======================================================= */

/* レコメンド一覧にも背景色と影を適用 */
.fanza-recommend-wrapper .ec-icon-btn {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; 
    cursor: pointer !important;
    background-color: #f9c2d2 !important; /* 薄いピンク */
    border: none !important;
    border-radius: 50%; /* 円形を維持 */
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fanza-recommend-wrapper .ec-icon-btn:hover {
    background-color: #ffafc7 !important; /* ホバー時の濃いピンク */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transform: translateY(-1px); 
}

/* 通常時のSVG線の色 (濃いピンク) */
.fanza-recommend-wrapper .ec-icon-btn svg {
    stroke: #e06085 !important; 
    fill: none !important;
    width: 18px;
    height: 18px;
    stroke-width: 2.5px;
    transition: stroke 0.2s, fill 0.2s; 
}

/* リンクアイコン専用の色設定 */
.fanza-recommend-wrapper .ec-icon-btn[data-type="link"] svg {
    fill: #e06085 !important; 
    transition: fill 0.2s;
}

/* ======================================================= */
/* [レコメンド対応] ホバー時: SVGの線を黒に変更 */
/* ======================================================= */

.fanza-recommend-wrapper .ec-icon-btn:hover svg {
    stroke: #000000 !important; 
}

.fanza-recommend-wrapper .ec-icon-btn:hover[data-type="link"] svg {
    fill: #000000 !important; 
}

/* ======================================================= */
/* [レコメンド対応] メタ情報（日付・タイトル）の微調整 */
/* ======================================================= */

.fanza-recommend-wrapper .fanza-card-item .entry-card-taxonomies {
    padding: 0 5px; 
}

.fanza-recommend-wrapper .fanza-card-item .card-date {
    padding: 0 5px 5px; 
    margin-top: 3px;
    font-size: 11px;
}

/* レコメンド一覧のタイトルも左寄せに */
.fanza-recommend-wrapper .card-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 19px;
}




#custom-search-container {
    max-width: 800px;
    margin: 20px auto;
}
#ajax-search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
}
#ajax-search-form input, #ajax-search-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1;
    min-width: 150px;
}
#search-results {
    margin-top: 20px;
    transition: opacity 0.2s;
}
.result-list {
    list-style: none;
    padding: 0;
}
.result-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}





/* ============================================================================================================== */
/* サイドバー */
/* ============================================================================================================== */
/* ======================================================= */
/* 新着一覧*/
/* ======================================================= */

/* 外枠全体のコンテナ */
.custom-recent-posts {
    padding: 0;
    border: 1px solid #e0e0e0; /* 外側をぐるっと囲む線 */
    border-radius: 6px;        /* コンテナ全体の角を少し丸くする */
    overflow: hidden;          /* 中身が角からはみ出さないようにする */
/* --- 45pxに設定して、次の見出しとの間隔をしっかり空ける --- */
    margin-bottom: 45px;
}

/* 記事ごとの横長枠（リンク） */
.custom-post-item-link {
    display: flex;
    align-items: stretch;
    text-decoration: none !important;
    color: #333 !important;
    margin-bottom: 0;          /* 隙間をゼロに */
    border: none;              /* 個別の全周枠線を消す */
    border-bottom: 1px solid #e0e0e0; /* 下側だけに区切り線を入れる */
    background: #fff;
    transition: background-color 0.3s;
}

/* 最後の記事だけは下線を消す（二重線を防ぐ） */
.custom-post-item-link:last-child {
    border-bottom: none;
}

/* ホバー時の反応 */
.custom-post-item-link:hover {
    background: #f9f9f9;
    opacity: 1;
}

/* 左側：アイキャッチエリア (40%) */
.custom-post-thumb {
    flex: 0 0 40%;
    max-width: 40%;
    background: #000;
    position: relative;
    overflow: hidden;
    /* --- 16 / 9 に設定（かなりシャープな印象になります） --- */
    aspect-ratio: 16 / 9; 
}

/* 画像自体の設定 */
.custom-post-img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 右側：タイトルエリア (60%) */
.custom-post-content {
    flex: 0 0 60%;
    max-width: 60%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* タイトルのスタイル */
.custom-post-title {
    font-size: 14px;
    line-height: 1.4;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
}

/* 投稿日のスタイル（右下配置） */
.custom-post-date {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: #888;
}

/* ======================================================= */
/* 人気一覧*/
/* ======================================================= */
/* 右側コンテンツエリアをバッジ配置の基準にする */
.custom-post-content {
    position: relative;
}

/* 順位バッジ：左下に配置 */
.custom-post-rank {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 11px;
    font-weight: bold;
    color: #999;
    font-family: 'Arial', sans-serif;
}

/* 上位3位の色強調（お好みで！） */
.custom-post-item-link:nth-child(1) .custom-post-rank { color: #cc9f00; font-size: 12px; } /* 金 */
.custom-post-item-link:nth-child(2) .custom-post-rank { color: #808080; } /* 銀 */
.custom-post-item-link:nth-child(3) .custom-post-rank { color: #a67942; } /* 銅 */

/* タブ全体のコンテナ */
.custom-popular-container {
    margin-bottom: 45px;
}

/* タブボタンの並び */
.popular-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: -1px; /* 下のコンテンツの枠線と重ねる */
}

/* タブボタンのサイズ調整（1.5倍） */
.popular-tab-btn {
    flex: 1;
    padding: 10px 0;    /* 8px の 1.25倍 */
    font-size: 15px;    /* 12px の 1.25倍 */
    font-weight: bold;
    cursor: pointer;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: #888;
    transition: all 0.2s;
    line-height: 1.2;
}

/* アクティブ時の設定はそのまま */
.popular-tab-btn.is-active {
    background: #fff;
    color: #333;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 2;
}

/* コンテンツの表示・非表示 */
.popular-tab-content {
    display: none;
}
.popular-tab-content.is-active {
    display: block;
}

/* 人気記事リスト側のmargin-bottomをタブコンテナに譲るため上書き */
.custom-popular-container .custom-recent-posts {
    margin-bottom: 0;
}

/* ======================================================= */
/* カテゴリー*/
/* ======================================================= */
/* カテゴリーグリッド全体のコンテナ */
.custom-category-grid {
    display: grid;
    /* 極限まで隙間を詰める（ほぼ線1本分） */
    column-gap: 2px; /* 横の隙間 */
    row-gap: 2px;    /* 縦の隙間 */
    
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 45px;
}

/* 各カテゴリーアイテム：背景色とサイズを最適化 */
.custom-cat-item {
    display: flex;
    align-items: center;
    padding: 4px 2px; /* 最小余白 */
    background: #ffe5e5; /* 指定の背景色 */
    border: 1px solid #f9d5d5; /* 背景に合わせた薄いピンクの線 */
    border-radius: 3px;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.2s ease;
}

/* ホバー時の効果：少しだけ濃くする */
.custom-cat-item:hover {
    background: #ffd9d9;
    border-color: #f2c2c2;
}

/* アイコン (Font Awesome) の設定 */
.custom-cat-icon::before {
    font-family: "Font Awesome 5 Free", "FontAwesome"; 
    content: "\f07b"; /* フォルダアイコン */
    font-weight: 900;
    margin-right: 4px; /* 隙間を最小に */
    color: #cb8e8e; /* アイコン色をピンク系に馴染ませる */
    font-size: 12px; /* サイズを小さめに */
    display: inline-block;
}

/* カテゴリー名：高密度設定 */
.custom-cat-name {
    font-size: 11px; /* 11pxで文字切れを防止 */
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    letter-spacing: -0.5px; /* 文字間を詰める */
}

/* カテゴリー数：バッジ風 */
.custom-cat-count {
    font-size: 9px;
    color: #333; /* カテゴリー名と同じ色に統一 */
    background: rgba(255, 255, 255, 0.4); /* 背景はさらに薄くして馴染ませる */
    padding: 1px 4px;
    border-radius: 10px;
    margin-left: 2px;
    font-weight: bold; /* 数字も少し強調 */
}


/* ======================================================= */
/* 女優ランキング*/
/* ======================================================= */

/* 女優ランキング全体のスタイル */
.actress-ranking {
    counter-reset: actress-rank;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 横の隙間を自動調整 */
    width: 100%;
    box-sizing: border-box;
}

/* 各アイテム：幅と隙間の再調整 */
.actress-ranking .custom-cat-item {
    display: flex !important;
    align-items: center;
    
    /* 横幅を微増させて隙間を詰め、box-sizingで溢れを防止 */
    width: 49.5% !important; 
    box-sizing: border-box !important;
    
    /* 縦の隙間を以前の感覚（4px〜6px程度）に詰める */
    padding: 4px 2px !important; 
    margin-bottom: 0.5px !important; /* 縦方向のアイテム間の隙間 */
    margin-right: 0 !important;
    border: 1px solid #eee; /* 枠線がある場合は維持 */
    border-radius: 4px;
	border: 1px solid #f9d5d5; /* 背景に合わせた薄いピンクの線 */

}

/* 順位バッジ：よりコンパクトに */
.actress-ranking .custom-cat-item::before {
    counter-increment: actress-rank;
    content: counter(actress-rank);
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #adb5bd;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

/* 1位〜3位のカラー */
.actress-ranking .custom-cat-item:nth-child(1)::before { background: #e6b422; }
.actress-ranking .custom-cat-item:nth-child(2)::before { background: #adb5bd; }
.actress-ranking .custom-cat-item:nth-child(3)::before { background: #c59562; }

/* 女優名：7文字程度（約5.5em〜6em）を確保 */
.actress-ranking .custom-cat-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 11px;
    
    /* 7文字程度を表示するための幅指定。サイドバー幅に合わせて微調整してください */
    min-width: 0; 
    max-width: 6em; /* 1em＝1文字分として計算 */
}

/* 記事数（カウント）：右端に最小限のスペースで配置 */
.actress-ranking .custom-cat-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    color: #999;
    padding-left: 3px;
}

/* ======================================================= */
/* その他。お問い合わせ/ご要望*/
/* ======================================================= */


/* サイドバー・バナーBOX全体 */
.sidebar-contact-box {
    display: flex;
    flex-direction: column;
    gap: 10px; /* ボタン同士の隙間 */
    margin: 10px 0;
}

/* ボタン共通スタイル */
.sidebar-contact-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* お問い合わせ（濃いめのピンク） */
.contact-btn {
    background: #ff75a0; /* Cocoonのメインピンクに近い色 */
    color: #fff !important;
}

/* ご要望（少し薄めのパステルピンク） */
.request-btn {
    background: #fff;
    color: #ff75a0 !important;
    border: 2px solid #ff75a0;
}

/* ホバー時の演出 */
.sidebar-contact-box a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    opacity: 0.9;
}

/* アイコンのスタイル */
.btn-icon {
    margin-right: 8px;
    font-size: 16px;
}


/* ======================================================= */
/* 閲覧履歴*/
/* ======================================================= */
/* 閲覧履歴ウィジェットのスタイル */
.my-history-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.my-history-list li {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f3f3;
}

.my-history-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.my-history-list li a {
    display: flex;
    gap: 12px;
    text-decoration: none !important;
    color: #333 !important; /* Cocoonの基本文字色 */
    align-items: flex-start;
    transition: all 0.3s;
}

.my-history-list li a:hover {
    opacity: 0.7;
    color: #ff75a0 !important; /* ホバー時にピンク */
}

.history-thumb {
    width: 80px;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.history-thumb img {
    width: 100%;
    height: 55px;
    object-fit: cover;
}

.history-title {
    font-size: 0.9em; /* Cocoonのサイドバー標準サイズに合わせる */
    line-height: 1.4;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 履歴がない時のメッセージ */
.history-empty-msg {
    font-size: 12px;
    color: #999;
    padding: 10px;
    text-align: center;
}

/* 閲覧履歴ウィジェット特有の調整 */
.my-view-history-container {
    margin-bottom: 45px; /* 他のセクションと間隔を合わせる */
}

/* 履歴には日付ではなく「履歴」と出したくない場合や、
   ホバー時の色を統一したい場合はここに追加 */
.my-view-history-container .custom-post-item-link:hover .custom-post-title {
    color: #ff75a0 !important; /* お問い合わせボタンと同じピンク */
}




/* ======================================================= */
/* 記事内のCSS*/
/* ======================================================= */

/*4コマ割りのビデオ調整  */


.video-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  background: transparent;
}

/* 枠を最初から固定して「黒い箱」にしておく */
.v-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; 
  background: #000; /* 動画が来るまでここが黒く表示される */
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.v-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
/* 読み込みラグがある場合でも、枠のサイズは変わらない */
}













/* ======================================================= */
/* 記事カード上のCSS*/
/* ======================================================= */





/* --- 記事一覧サムネイルを16:9・全体収容に整える --- */
.entry-card-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background-color: #f5f5f5 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px;
}

.entry-card-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}



/* --- サイドバーの人気一覧サムネイルを16:9・全体収容に整える --- */

/* 親要素：サイズを柔軟にしつつ、最大幅を制限 */
.popular-entry-card-thumb {
    width: 100% !important;        /* 親の枠に合わせて伸縮 */
    max-width: 160px !important;   /* 320pxの半分を上限にする */
    aspect-ratio: 16 / 9 !important; /* 比率は維持 */
    background-color: #f5f5f5 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px;
}

/* 子要素（画像）：枠いっぱいに広げる */
.popular-entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* 枠内に収める */
    object-position: center !important;
    display: block !important;
}

/* スマホなどさらに小さい画面への配慮（必要であれば） */
@media screen and (max-width: 480px) {
    .popular-entry-card-thumb {
        max-width: 120px !important; /* スマホではさらに少し小さくする場合 */
    }
}







/* 全ての記事カードからメーカー表示を非表示にする */
.maker-wrapper {
    display: none !important;
}


/* 記事タイトル (h1) のデザイン：究極のシャープ設定 */
body.single-post .entry-title,
body.single-post h1,
article h1,
.post h1 {
    /* 背景色（柔らかいピンク） */
    background-color: #fe7ba0 !important;
    
    /* 文字色（白） */
    color: #ffffff !important;
    
    /* 左寄せ */
    text-align: left !important;
    display: block !important;

    /* 余白の調整（上下2px、左右15px） */
    padding: 2px 15px !important; 
    
    /* 角の丸み（3px） */
    border-radius: 3px !important;
    
    /* 文字の高さ調整（2pxだと窮屈になりすぎないようline-heightを微調整） */
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 0 30px 0 !important;
    
    /* テーマの装飾を徹底リセット */
    border: none !important;
    box-shadow: none !important;
}



/* 選択中のメニュー項目：背景色 e15078 / 文字色 白 / 太字 */
#navi .current-menu-item > a {
    background-color: #8ea5f7 !important; /* 指定の背景色 */
    color: #ffffff !important;           /* 文字色を白に */
    font-weight: bold !important;         /* 太字にする */
}

/* マウスを乗せた時（ホバー）も同じ色にする場合（お好みで） */
#navi .navi-in a:hover {
    background-color: #8ea5f7 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}


/* フィルタエリア全体を上に引き上げる */
.fanza-filter-wrapper {
    margin-top: -30px !important; /* 数値は隙間に合わせて調整してください */
    padding-top: 0 !important;
}

/* スクロール位置調整用のダミー要素が場所を取らないようにする */
#fanza-list-top {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* ボタンを囲むコンテナの余白を徹底的に削る */
#fanza-ajax-container {
    padding-top: 0 !important;
}






/* トップページ以外でキャッチフレーズを非表示にする */
body:not(.home) .tagline {
  display: none;
}





/************************************
** レスポンシブデザイン用のメディアクエリ end
************************************/