@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* ■■作品ページ■■ */

/* ■キャスト一覧のグリッド表示■ */
.cast-grid-container {
    display: grid;
    /* ポイント1: auto-fit を使うことで、中身（3人）に合わせて列数が確定します。
       ポイント2: 1fr をやめて 110px に固定することで、勝手に広がらないようにします。
       (名前が長い場合は適宜数値を上げてください)
    */
    grid-template-columns: repeat(auto-fit, 110px);
    
    /* ポイント3: グリッドのカタマリ自体を画面の中央に寄せます */
    justify-content: center;
    
    gap: 15px; /* カード間の隙間 */
    margin-top: 20px;
}

.cast-card {
    text-align: center;
}

.cast-link {
    text-decoration: none;
    color: #333;
    display: block;
    transition: opacity 0.3s;
}

.cast-link:hover {
    opacity: 0.7;
}

.cast-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 8px;
}

.cast-name {
    font-size: 13px; /* 名前がはみ出ないよう少し小さく調整 */
    font-weight: bold;
    line-height: 1.4;
    word-break: break-all; /* 長い名前でレイアウト崩れを防ぐ */
}

/* ■リストカラム■ */
.list-column {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 2px dashed #EEE;
}

@media (max-width: 768px) {
	.list-column { gap: 0.3em; }
}

/* ■FANZA BOX■ */
.fanza-box {
	padding: 1em;
	background-color: transparent;
	border-color: #FFB6BB;
}

.fanza-box a { width:100%; }

.fanza-box ul.wp-block-list {
	list-style: none; /* 元の黒点を消す */
	border: none;
	padding: 0;
}

.fanza-box .entry-content .is-style-sango-list-simple {
	padding: 0;
}

.fanza-box ul li {
	position: relative; /* アイコンの位置基準にする */
	padding-left: 1.5em; /* アイコンの分だけテキストを右にずらす */
	margin-bottom: 0;
}

.fanza-box ul li::before {
  font-family: "Font Awesome 6 Free"; /* ※バージョンに合わせて変更 */
  font-weight: 900; /* Solidアイコンを表示するために必要 */
  content: "\f00c"; /* チェックマークのユニコード */
  
  /* ここで色と位置を調整 */
  color: #ff69b4; /* ピンク色 (HotPink) */
  position: absolute;
  left: 0;
  top: 3px; /* 必要に応じて top: 2px; などで微調整 */
}

/* ■FANZA Button■ */
.fanza-btn a { width:100%; }
.entry-content p.fanza-btn-txt {
	margin-bottom: 0;
}

/* --- ■出演者タグ（カプセル型）のコンテナ■ --- */
.cast-tags-container {
    display: flex;
    flex-wrap: wrap; /* 複数いる場合は折り返す */
    gap: 8px;       /* タグ同士の隙間 */
    align-items: center; /* 上下中央揃え */
}

.cast-tags-title {
    font-weight: bold;
    font-size: 15px;
    color: #333;
    margin-right: 5px;
}

/* --- タグ本体のデザイン --- */
.cast-tag-pill {
    display: inline-flex;
    align-items: center;
    background-color: #f3f3f3; /* 背景色（画像のようなダークグレー） */
    border-radius: 50px;    /* 左右を丸くする */
	/* margin: 2px 4px 2px 0; */
    padding-right: 15px;     /* 右側の文字の余白 */
    text-decoration: none;
    transition: opacity 0.3s;
    overflow: hidden;       /* 角丸からはみ出ないように */
}

.cast-tag-pill:hover { background-color: var(--sgb-main-color); }
.cast-tag-pill:hover .cast-tag-text { color: #FFF; }

/* --- アイコン画像部分 --- */
.cast-tag-icon {
	display:　block;
    width: 36px;  /* アイコンの大きさ */
    height: 36px;
    border-radius: 50%; /* 完全な丸 */
    margin-right: 10px; /* 文字との隙間 */
    flex-shrink: 0;     /* 縮小させない */
}

.cast-tag-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を変形させずに埋める */
    border-radius: 50%;
    display: block; /* 余白除去 */
}

/* 画像がない場合のダミー丸 */
.no-img-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #555;
    border-radius: 50%;
}

/* --- 名前部分 --- */
.cast-tag-text {
    font-size: 14px;
    font-weight: bold;
    color: #000; 
	text-decoration: none;
    line-height: 1;
}

.entry-content p .cast-tags-container a { text-decoration: none; }

/* ■タクソノミー表示のデザイン■ */
.video-term-box {
    display: block; /* ★これを追加！spanでも箱として扱われます */
    font-size: 15px;
    color: #666;
}

.entry-content p .video-term-box a {
	text-decoration: none;
}

/* 以下はそのままでOK */
.term-title {
    font-weight: bold;
    color: #333;
}

.term-link {
    display: inline-block;
    background: #f3f3f3;
    padding: 2px 8px;
    border-radius: 3px;
    color: #000;
    margin: 3px 6px 3px 0;
    font-size: 14px;
    transition: 0.3s;
}

.term-link:hover {
    background-color: var(--sgb-main-color);
    color: #FFF;
}

/* ■■女優ページ■■ */

/* ■女優ページの場合はヘッダ画像を非表示■ */
.type-actress .post-thumbnail { display: none; }

.actress-top {
	gap:0;
	background-color: #f3f3f3;
	border-radius: 15px;
}

@media (max-width: 768px) {
	.actress-top { padding-top: 1.5em }
}

/* ■女優画像■ */
/* 丸ワイプにするためのCSS */
.actress-photo img {
	border: 5px solid #FFB6BB;
    border-radius: 50%; /* これが画像を完璧な円形にする魔法だぜ */
    object-fit: cover;  /* 画像のアスペクト比を保ちつつ、枠いっぱいに表示させる */
    aspect-ratio: 1 / 1; /* 正方形に固定する（もし画像が正方形じゃない場合でも崩れないように） */
    width: 125px;       /* もし画像サイズが固定なら、これも設定しておくと良い */
    height: 125px;      /* 同上 */
}

/* リンク要素も丸くすることで、クリック可能な範囲を調整する（お好みで） */
.actress-photo a {
    display: block; /* リンクをブロック要素にして、領域をコントロールできるようにする */
    border-radius: 50%; /* リンクの領域も丸くする */
    overflow: hidden;   /* リンクの領域からはみ出した部分を隠す */
    width: 125px;       /* imgのサイズと合わせる */
    height: 125px;      /* imgのサイズと合わせる */
}

/* Figure要素も丸くするなら、これも追加する（お好みで） */
.actress-photo {
    border-radius: 50%; /* figureの枠も丸くする */
    overflow: hidden;   /* figureの枠からはみ出した部分を隠す */
    width: 125px;       /* imgのサイズと合わせる */
    height: 125px;      /* imgのサイズと合わせる */
}

/* ■テーブル■ */
.actress_intro, .entry-content .actress_intro table { margin:0.5em 0; }

.actress_intro table, .actress_intro table tr, .actress_intro table tr td {
	/* border: 6px solid #FFF!important; */
	border: none!important;
}

.actress_intro table tr td {
	font-size: 0.85em;
}

/* ■SNSアイコン■ */
/* --- SNSアイコンバーの共通設定 --- */
.my-sns-bar {
  display: inline-flex;    
  gap: 20px;               
  align-items: center;     
  vertical-align: middle;  
}

/* アイコン単体の設定 */
.my-sns-item {
  font-size: 20px;         
  line-height: 1;          
  transition: opacity 0.3s;
  text-decoration: none !important; 
}

/* --- アクティブ（リンクあり）時の色設定 --- */
.my-sns-item.is-active {
	opacity: 1;
	color: #666;
}

/* X (Twitter) の色 */
.my-sns-item.is-active.my-sns-x {
  
}

/* Instagram の色 */
.my-sns-item.is-active.my-sns-insta {

}

/* TikTok の色 */
.my-sns-item.is-active.my-sns-tiktok {

}

/* YouTube の色 */
.my-sns-item.is-active.my-sns-youtube {

}


/* --- 非アクティブ（リンクなし）時の設定 --- */
.my-sns-item.is-disabled {
  color: #cccccc; 
  opacity: 0.5;
  cursor: default;
}

/* ホバー時の挙動 */
a.my-sns-item.is-active:hover {
  color: #FFB6BB;
}

/* --- ■カード内のタグ表示調整■ --- */

/* タイトルと日付の間に余白を作る */
.card-in-tags {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* カード内なので少しタグを小さくする */
.cast-tag-pill.small-tag {
    padding-right: 10px; /* 余白を少し詰める */
    background-color: #f3f3f3;
}

a:hover .cast-tag-pill.small-tag { background-color: #FFB6BB; }

/* アイコンサイズも少し小さく */
.cast-tag-pill.small-tag .cast-tag-icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

/* 文字サイズ調整 */
.cast-tag-pill.small-tag .cast-tag-text {
    font-size: 11px;
}

/* カードタイトルが太字で見やすくなるように念の為 */
.c_linkto_text .card-title-text {
    font-weight: bold;
    display: block;
    line-height: 1.4;
}

/* ページネーション（前回のコードがあれば不要ですが念の為） */
.custom-pagination {
    margin-top: 30px;
    text-align: center;
    width: 100%;
}
.custom-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #fff;
    font-size: 14px;
}
.custom-pagination .page-numbers.current {
    background: #666;
    color: #fff;
    border-color: #666;
}