/*
 * 女優一覧（五十音順）ページ専用CSS
 *
 * 【重要な修正履歴】
 * 元のCSS（外部で作成されたもの）では、タブ切り替えのID対応を
 * 16進数（bin2hex）の手打ちで管理していたため、「や」行のIDが
 * 1文字分ズレる変換ミスが発生し、「や」行の女優が一切表示されない
 * 不具合の原因になっていた。
 *
 * このファイルでは、IDを「グループキー-連番」というシンプルな形式
 * （class-avct-actress-index.php側のPHPコードと完全に一致する形）に
 * 変更し、CSS側もスクリプトで機械生成することで、手打ちミスの
 * 再発を防いでいる。
 */

/* ─── 1. 五十音ジャンプナビゲーション ─── */
.actress-gojuon-navigation {
	margin-bottom: 30px;
	background: #f8fafc;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.actress-gojuon-navigation .nav-title {
	font-weight: 700;
	font-size: 14px;
	color: #475569;
	margin: 0 0 12px 0;
}

.actress-gojuon-navigation .nav-links-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
}

.actress-gojuon-navigation .nav-links-wrap a {
	background: #ea580c;
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	display: inline-block;
	transition: opacity 0.2s ease;
}

.actress-gojuon-navigation .nav-links-wrap a:hover {
	opacity: 0.85;
}

/* ─── 2. メインレイアウト ＆ ブログカード（スマホ2列がベース、flexで実装） ─── */
.site-main .actress-grid-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.site-main .actress-grid-list .actress-blog-card {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	align-items: center;
	/* スマホ（〜599px）：2列。gapが12pxなので、その分を差し引いた幅にする */
	flex: 0 0 calc(50% - 6px);
	box-sizing: border-box;
}

.site-main .actress-grid-list .actress-blog-card .card-thumb {
	width: 52px;
	height: 52px;
	max-width: 52px;
	min-width: 52px;
	flex: 0 0 52px;
	margin-right: 8px;
	margin-bottom: 0;
}

.site-main .actress-grid-list .actress-blog-card .card-thumb img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.site-main .actress-grid-list .actress-blog-card .card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	overflow: hidden;
}

.site-main .actress-grid-list .actress-blog-card .card-name {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 2px 0;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-main .actress-grid-list .actress-blog-card .card-name a {
	color: #1e293b;
	text-decoration: none;
	display: block;
}

.site-main .actress-grid-list .actress-blog-card .card-name a:hover {
	color: #ea580c;
	text-decoration: underline;
}

.site-main .actress-grid-list .actress-blog-card .card-kana {
	font-size: 11px;
	color: #94a3b8;
	margin: 0 0 4px 0;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-main .actress-grid-list .actress-blog-card .card-size {
	font-size: 11px;
	color: #475569;
	margin: 0;
	line-height: 1.3;
}

.site-main .actress-grid-list .actress-blog-card .card-size span {
	font-weight: 600;
	color: #94a3b8;
	font-size: 9px;
	margin-right: 2px;
}

.site-main .actress-grid-list .no-actress-alert {
	text-align: center;
	color: #94a3b8;
	width: 100%;
	grid-column: 1 / -1;
	padding: 30px 0;
}

/* ─── 3. タブレット拡張（600px以上）：3列 ─── */
@media screen and (min-width: 600px) {
	.actress-gojuon-navigation {
		padding: 20px;
	}

	.site-main .actress-grid-list {
		gap: 16px;
	}

	.site-main .actress-grid-list .actress-blog-card {
		/* 3列。gapが16pxなので、その分（2つ分）を差し引いた幅にする */
		flex: 0 0 calc((100% - 32px) / 3);
		padding: 12px;
		border-radius: 8px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-thumb {
		width: 65px;
		height: 65px;
		max-width: 65px;
		min-width: 65px;
		flex: 0 0 65px;
		margin-right: 14px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-thumb img {
		width: 65px;
		height: 65px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-name {
		font-size: 15px;
		margin-bottom: 4px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-kana {
		font-size: 12px;
		margin-bottom: 6px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-size {
		font-size: 12px;
	}

	.site-main .actress-grid-list .actress-blog-card .card-size span {
		font-size: 11px;
		margin-right: 4px;
	}
}

/* ─── 4. PC拡張（768px以上）：4列 ─── */
@media screen and (min-width: 768px) {
	.site-main .actress-grid-list .actress-blog-card {
		/* 4列。gapが16pxなので、その分（3つ分）を差し引いた幅にする */
		flex: 0 0 calc((100% - 48px) / 4);
	}

	.pure-css-gojuon-app .tab-level-1-buttons label {
		padding: 10px 18px;
	}
}

/* ─── 4. タブ切り替え用ラジオボタン本体（非表示） ─── */
.pure-css-gojuon-app .radio-l1,
.pure-css-gojuon-app .radio-l2 {
	display: none;
}

/* ─── 5. 第1階層タブボタン ─── */
.pure-css-gojuon-app .tab-level-1-buttons {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px 0;
	padding: 0;
	border-bottom: 2px solid #e2e8f0;
}

.pure-css-gojuon-app .tab-level-1-buttons label {
	padding: 10px 16px;
	font-weight: 700;
	font-size: 14px;
	color: #64748b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.2s ease;
	display: inline-block;
}

/* ─── 6. 第2階層タブボタン ─── */
.pure-css-gojuon-app .tab-level-2-buttons {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 24px 0;
	padding: 0;
	gap: 10px 8px;
}

.pure-css-gojuon-app .tab-level-2-buttons label {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
	display: inline-block;
	transition: all 0.2s ease;
}

/* ─── 7. タブ切り替え本体（初期状態は全て非表示） ─── */
.pure-css-gojuon-app .content-l1,
.pure-css-gojuon-app .actress-grid-list {
	display: none;
}

/* ─── 8. ここから下、機械生成した対応ルール（手打ち編集禁止） ───
   PHP（class-avct-actress-index.php）のID生成ロジックと1対1で対応しています。
   五十音の構成自体を変更した場合は、このブロックも作り直す必要があります。 */

#input-l1-a:checked ~ .tab-level-1-buttons label[for="input-l1-a"],
#input-l1-k:checked ~ .tab-level-1-buttons label[for="input-l1-k"],
#input-l1-s:checked ~ .tab-level-1-buttons label[for="input-l1-s"],
#input-l1-t:checked ~ .tab-level-1-buttons label[for="input-l1-t"],
#input-l1-n:checked ~ .tab-level-1-buttons label[for="input-l1-n"],
#input-l1-h:checked ~ .tab-level-1-buttons label[for="input-l1-h"],
#input-l1-m:checked ~ .tab-level-1-buttons label[for="input-l1-m"],
#input-l1-y:checked ~ .tab-level-1-buttons label[for="input-l1-y"],
#input-l1-r:checked ~ .tab-level-1-buttons label[for="input-l1-r"],
#input-l1-w:checked ~ .tab-level-1-buttons label[for="input-l1-w"],
#input-l1-other:checked ~ .tab-level-1-buttons label[for="input-l1-other"] {
	color: #ea580c;
	border-bottom-color: #ea580c;
}

#input-l1-a:checked ~ #content-l1-a,
#input-l1-k:checked ~ #content-l1-k,
#input-l1-s:checked ~ #content-l1-s,
#input-l1-t:checked ~ #content-l1-t,
#input-l1-n:checked ~ #content-l1-n,
#input-l1-h:checked ~ #content-l1-h,
#input-l1-m:checked ~ #content-l1-m,
#input-l1-y:checked ~ #content-l1-y,
#input-l1-r:checked ~ #content-l1-r,
#input-l1-w:checked ~ #content-l1-w,
#input-l1-other:checked ~ #content-l1-other {
	display: block;
}

.pure-css-gojuon-app #input-l2-a-0:checked ~ .tab-level-2-buttons label[for="input-l2-a-0"],
.pure-css-gojuon-app #input-l2-a-1:checked ~ .tab-level-2-buttons label[for="input-l2-a-1"],
.pure-css-gojuon-app #input-l2-a-2:checked ~ .tab-level-2-buttons label[for="input-l2-a-2"],
.pure-css-gojuon-app #input-l2-a-3:checked ~ .tab-level-2-buttons label[for="input-l2-a-3"],
.pure-css-gojuon-app #input-l2-a-4:checked ~ .tab-level-2-buttons label[for="input-l2-a-4"],
.pure-css-gojuon-app #input-l2-k-0:checked ~ .tab-level-2-buttons label[for="input-l2-k-0"],
.pure-css-gojuon-app #input-l2-k-1:checked ~ .tab-level-2-buttons label[for="input-l2-k-1"],
.pure-css-gojuon-app #input-l2-k-2:checked ~ .tab-level-2-buttons label[for="input-l2-k-2"],
.pure-css-gojuon-app #input-l2-k-3:checked ~ .tab-level-2-buttons label[for="input-l2-k-3"],
.pure-css-gojuon-app #input-l2-k-4:checked ~ .tab-level-2-buttons label[for="input-l2-k-4"],
.pure-css-gojuon-app #input-l2-s-0:checked ~ .tab-level-2-buttons label[for="input-l2-s-0"],
.pure-css-gojuon-app #input-l2-s-1:checked ~ .tab-level-2-buttons label[for="input-l2-s-1"],
.pure-css-gojuon-app #input-l2-s-2:checked ~ .tab-level-2-buttons label[for="input-l2-s-2"],
.pure-css-gojuon-app #input-l2-s-3:checked ~ .tab-level-2-buttons label[for="input-l2-s-3"],
.pure-css-gojuon-app #input-l2-s-4:checked ~ .tab-level-2-buttons label[for="input-l2-s-4"],
.pure-css-gojuon-app #input-l2-t-0:checked ~ .tab-level-2-buttons label[for="input-l2-t-0"],
.pure-css-gojuon-app #input-l2-t-1:checked ~ .tab-level-2-buttons label[for="input-l2-t-1"],
.pure-css-gojuon-app #input-l2-t-2:checked ~ .tab-level-2-buttons label[for="input-l2-t-2"],
.pure-css-gojuon-app #input-l2-t-3:checked ~ .tab-level-2-buttons label[for="input-l2-t-3"],
.pure-css-gojuon-app #input-l2-t-4:checked ~ .tab-level-2-buttons label[for="input-l2-t-4"],
.pure-css-gojuon-app #input-l2-n-0:checked ~ .tab-level-2-buttons label[for="input-l2-n-0"],
.pure-css-gojuon-app #input-l2-n-1:checked ~ .tab-level-2-buttons label[for="input-l2-n-1"],
.pure-css-gojuon-app #input-l2-n-2:checked ~ .tab-level-2-buttons label[for="input-l2-n-2"],
.pure-css-gojuon-app #input-l2-n-3:checked ~ .tab-level-2-buttons label[for="input-l2-n-3"],
.pure-css-gojuon-app #input-l2-n-4:checked ~ .tab-level-2-buttons label[for="input-l2-n-4"],
.pure-css-gojuon-app #input-l2-h-0:checked ~ .tab-level-2-buttons label[for="input-l2-h-0"],
.pure-css-gojuon-app #input-l2-h-1:checked ~ .tab-level-2-buttons label[for="input-l2-h-1"],
.pure-css-gojuon-app #input-l2-h-2:checked ~ .tab-level-2-buttons label[for="input-l2-h-2"],
.pure-css-gojuon-app #input-l2-h-3:checked ~ .tab-level-2-buttons label[for="input-l2-h-3"],
.pure-css-gojuon-app #input-l2-h-4:checked ~ .tab-level-2-buttons label[for="input-l2-h-4"],
.pure-css-gojuon-app #input-l2-m-0:checked ~ .tab-level-2-buttons label[for="input-l2-m-0"],
.pure-css-gojuon-app #input-l2-m-1:checked ~ .tab-level-2-buttons label[for="input-l2-m-1"],
.pure-css-gojuon-app #input-l2-m-2:checked ~ .tab-level-2-buttons label[for="input-l2-m-2"],
.pure-css-gojuon-app #input-l2-m-3:checked ~ .tab-level-2-buttons label[for="input-l2-m-3"],
.pure-css-gojuon-app #input-l2-m-4:checked ~ .tab-level-2-buttons label[for="input-l2-m-4"],
.pure-css-gojuon-app #input-l2-y-0:checked ~ .tab-level-2-buttons label[for="input-l2-y-0"],
.pure-css-gojuon-app #input-l2-y-1:checked ~ .tab-level-2-buttons label[for="input-l2-y-1"],
.pure-css-gojuon-app #input-l2-y-2:checked ~ .tab-level-2-buttons label[for="input-l2-y-2"],
.pure-css-gojuon-app #input-l2-r-0:checked ~ .tab-level-2-buttons label[for="input-l2-r-0"],
.pure-css-gojuon-app #input-l2-r-1:checked ~ .tab-level-2-buttons label[for="input-l2-r-1"],
.pure-css-gojuon-app #input-l2-r-2:checked ~ .tab-level-2-buttons label[for="input-l2-r-2"],
.pure-css-gojuon-app #input-l2-r-3:checked ~ .tab-level-2-buttons label[for="input-l2-r-3"],
.pure-css-gojuon-app #input-l2-r-4:checked ~ .tab-level-2-buttons label[for="input-l2-r-4"],
.pure-css-gojuon-app #input-l2-w-0:checked ~ .tab-level-2-buttons label[for="input-l2-w-0"],
.pure-css-gojuon-app #input-l2-w-1:checked ~ .tab-level-2-buttons label[for="input-l2-w-1"],
.pure-css-gojuon-app #input-l2-w-2:checked ~ .tab-level-2-buttons label[for="input-l2-w-2"] {
	background: #ea580c;
	color: #fff;
	border-color: #ea580c;
}

#input-l2-a-0:checked ~ #list-l2-a-0,
#input-l2-a-1:checked ~ #list-l2-a-1,
#input-l2-a-2:checked ~ #list-l2-a-2,
#input-l2-a-3:checked ~ #list-l2-a-3,
#input-l2-a-4:checked ~ #list-l2-a-4,
#input-l2-k-0:checked ~ #list-l2-k-0,
#input-l2-k-1:checked ~ #list-l2-k-1,
#input-l2-k-2:checked ~ #list-l2-k-2,
#input-l2-k-3:checked ~ #list-l2-k-3,
#input-l2-k-4:checked ~ #list-l2-k-4,
#input-l2-s-0:checked ~ #list-l2-s-0,
#input-l2-s-1:checked ~ #list-l2-s-1,
#input-l2-s-2:checked ~ #list-l2-s-2,
#input-l2-s-3:checked ~ #list-l2-s-3,
#input-l2-s-4:checked ~ #list-l2-s-4,
#input-l2-t-0:checked ~ #list-l2-t-0,
#input-l2-t-1:checked ~ #list-l2-t-1,
#input-l2-t-2:checked ~ #list-l2-t-2,
#input-l2-t-3:checked ~ #list-l2-t-3,
#input-l2-t-4:checked ~ #list-l2-t-4,
#input-l2-n-0:checked ~ #list-l2-n-0,
#input-l2-n-1:checked ~ #list-l2-n-1,
#input-l2-n-2:checked ~ #list-l2-n-2,
#input-l2-n-3:checked ~ #list-l2-n-3,
#input-l2-n-4:checked ~ #list-l2-n-4,
#input-l2-h-0:checked ~ #list-l2-h-0,
#input-l2-h-1:checked ~ #list-l2-h-1,
#input-l2-h-2:checked ~ #list-l2-h-2,
#input-l2-h-3:checked ~ #list-l2-h-3,
#input-l2-h-4:checked ~ #list-l2-h-4,
#input-l2-m-0:checked ~ #list-l2-m-0,
#input-l2-m-1:checked ~ #list-l2-m-1,
#input-l2-m-2:checked ~ #list-l2-m-2,
#input-l2-m-3:checked ~ #list-l2-m-3,
#input-l2-m-4:checked ~ #list-l2-m-4,
#input-l2-y-0:checked ~ #list-l2-y-0,
#input-l2-y-1:checked ~ #list-l2-y-1,
#input-l2-y-2:checked ~ #list-l2-y-2,
#input-l2-r-0:checked ~ #list-l2-r-0,
#input-l2-r-1:checked ~ #list-l2-r-1,
#input-l2-r-2:checked ~ #list-l2-r-2,
#input-l2-r-3:checked ~ #list-l2-r-3,
#input-l2-r-4:checked ~ #list-l2-r-4,
#input-l2-w-0:checked ~ #list-l2-w-0,
#input-l2-w-1:checked ~ #list-l2-w-1,
#input-l2-w-2:checked ~ #list-l2-w-2 {
	display: flex;
}

/* 最初のひらがな文字を初期アクティブにするための補完指定 */
.pure-css-gojuon-app .content-l1 .radio-l2:first-of-type:checked ~ .tab-level-2-buttons label:first-of-type {
	background: #ea580c;
	color: #fff;
	border-color: #ea580c;
}