/* ==========================================================================
   キャスト追加情報表示
   エリアバッジ／年齢・MBTI・身長バッジ／移動・送迎ステータス／交通費テーブル
   サイト全体（サムネイル一覧・キャストプロフィールページ）に適用
   ========================================================================== */

:root {
	--jh2-ink: #1A1A1A;
	--jh2-accent: #E8447A;
	--jh2-accent-text: #C22563;
	--jh2-accent-soft: #FCE9F0;
	--jh2-navy: #002984;
	--jh2-navy-soft: #EEF1FB;
	--jh2-line: #ECECEC;
	--jh2-radius-pill: 999px;
	--jh2-radius-md: 10px;
	--jh2-shadow: 0 2px 10px rgba(20, 20, 40, 0.18);
	--jh2-area-shizuoka: #2FA4D6;
	--jh2-area-hamamatsu: #3CA46E;
	--jh2-area-numazu: #9884CC;
}

/* ---- エリアバッジ（サムネイル右上オーバーレイ） ---- */
.cast-image {
	position: relative;
}
.cast-area-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-block;
	background: var(--jh2-navy);
	color: #FFFFFF;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1;
	padding: 6px 13px;
	border-radius: var(--jh2-radius-pill);
	box-shadow: var(--jh2-shadow);
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* ---- エリアバッジの色分け（静岡＝水色／浜松＝緑／沼津＝薄紫） ---- */
.cast-area-badge.cast-area-badge-shizuoka {
	background: var(--jh2-area-shizuoka);
}
.cast-area-badge.cast-area-badge-hamamatsu {
	background: var(--jh2-area-hamamatsu);
}
.cast-area-badge.cast-area-badge-numazu {
	background: var(--jh2-area-numazu);
}

/* プロフィールページの名前まわりではオーバーレイではなくインライン表示にする */
#profile-name .cast-area-badge {
	position: static;
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	box-shadow: none;
}

/* ---- スマホ表示：写真上のエリアバッジは名前の横へ移動 ----
   写真が縦横比のまま小さくなるスマホでは、画像オーバーレイのバッジが
   写真の大部分を覆ってしまうため、名前・新人マークの横に表示し直す。 */
.cast-area-badge-inline-wrap {
	display: none;
}
.cast-area-badge-inline-wrap .cast-area-badge {
	position: static;
	display: inline-block;
	box-shadow: none;
}
@media (max-width: 640px) {
	.cast-area-badge-inline-wrap {
		display: inline-block;
	}
	.cast-image > .cast-area-badge {
		display: none;
	}
}

/* ---- ピックアップキャストカルーセル：タグの行数差による段ズレ対策 ----
   人によってアイコンタグの数が違い、2行になったり1行だったりすると
   カード自体の高さが変わってしまい、カルーセルの段がズレて見える。
   タグを最大2つまでに固定し、常に同じ高さになるようにする。 ---- */
.widget_cp5_cast_slider .cast-icon-lists {
	min-height: 1.9em;
	overflow: hidden;
}
.widget_cp5_cast_slider .cast-icon-lists .cast-icon-label:nth-of-type(n+3) {
	display: none;
}

/* ---- サイトロゴの幅をヘッダー下の左カラム（サイドバー／大画面で3/12幅）に揃える ---- */
@media (min-width: 641px) {
	#header #header-logo-col {
		width: 25%;
		box-sizing: border-box;
		margin-right: 0;
	}
	#header #header-logo-col a img {
		max-width: 100%;
		width: 100%;
		height: auto;
		max-height: none;
	}
}

/* ---- 名前 + 新人アイコンを横並びに ---- */
.cast-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
}
.cast-name .new-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.cast-name .new-icon img,
.cast-name .new-icon .icon-image {
	width: auto;
	height: 1.3em;
	max-height: 22px;
	display: block;
}
#profile-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
}
#profile-name .new-icon img,
#profile-name .new-icon .icon-image {
	width: auto;
	height: 1.1em;
	max-height: 24px;
	display: block;
}
@media (min-width: 641px) {
	#profile-name {
		justify-content: flex-start;
	}
}

/* ---- 年齢 / MBTI / 身長 バッジ行 ---- */
.cast-info-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0;
	padding: 0;
	list-style: none;
}
.cast-info-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	background: var(--jh2-accent-soft);
	color: var(--jh2-accent-text);
	border-radius: var(--jh2-radius-md);
	padding: 4px 10px;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.4;
}
.cast-info-badge-label {
	opacity: 0.75;
	font-weight: 500;
}
.cast-info-badge-value {
	font-weight: 700;
}
.cast-info-badge.cast-info-badge-mbti {
	background: var(--jh2-navy-soft);
	color: var(--jh2-navy);
}

#profile-info-badges .cast-info-badges {
	justify-content: center;
}
@media (min-width: 641px) {
	#profile-info-badges .cast-info-badges {
		justify-content: flex-start;
	}
}

/* ---- LINE公式アカウント誘導ボタン ---- */
#profile-line-cta:empty {
	display: none;
}
.cast-line-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.cast-line-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #06C755;
	color: #FFFFFF !important;
	font-weight: 700;
	font-size: 0.95em;
	padding: 10px 20px;
	border-radius: var(--jh2-radius-pill);
	box-shadow: 0 2px 8px rgba(6, 199, 85, 0.35);
	margin: 8px 0;
	text-decoration: none;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.cast-line-cta:hover {
	opacity: 0.85;
	color: #FFFFFF !important;
}
/* 店舗公式LINEボタンはキャスト個別ボタンと区別できるようアウトライン調に */
.cast-line-cta.cast-line-cta-shop {
	background: #FFFFFF;
	color: #06C755 !important;
	border: 2px solid #06C755;
	box-shadow: none;
	padding: 8px 18px;
}
.cast-line-cta.cast-line-cta-shop:hover {
	opacity: 1;
	background: #06C755;
	color: #FFFFFF !important;
}

/* ---- 移動・送迎 対応状況 ---- */
.cast-mobility-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cast-mobility-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--jh2-line);
	font-size: 0.95em;
}
.cast-mobility-item:last-child {
	border-bottom: none;
}
.cast-mobility-label {
	color: var(--jh2-ink);
	font-weight: 600;
}
.cast-mobility-value {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--jh2-radius-pill);
	font-weight: 700;
	font-size: 0.9em;
	background: #EEEEEE;
	color: #555555;
}
.cast-mobility-item.is-ok .cast-mobility-value {
	background: #E4F6EC;
	color: #1E8A4C;
}
.cast-mobility-item.is-ng .cast-mobility-value {
	background: #FBEAEA;
	color: #C0392B;
}
.cast-mobility-item.is-maybe .cast-mobility-value {
	background: #FFF4E0;
	color: #B9770E;
}

/* ---- プロフィールページの3サイズ行は情報バッジと重複するため非表示 ---- */
#profile-size {
	display: none;
}

/* ---- 旧3サイズ表示(.cast-size)の位置に年齢・MBTI・身長バッジを再利用表示 ---- */
.cast-size .cast-info-badges {
	margin: 4px 0;
}
.widget_cp5_cast_slider .cast-frame .cast-size,
.widget_cp5_schedule_slider .cast-frame .cast-size {
	font-size: 1em;
}

/* ---- 交通費テーブル ---- */
.cast-travel-fee-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
}
.cast-travel-fee-table th,
.cast-travel-fee-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--jh2-line);
	text-align: left;
}
.cast-travel-fee-table thead th {
	color: #767676;
	font-weight: 600;
	font-size: 0.85em;
	border-bottom: 2px solid var(--jh2-line);
}
.cast-travel-fee-table td.fee {
	font-weight: 700;
	color: var(--jh2-accent-text);
	white-space: nowrap;
}
.cast-travel-fee-table td.note {
	color: #767676;
	font-size: 0.92em;
}
.cast-travel-fee-table tbody tr:last-child td {
	border-bottom: none;
}