/*
Theme Name: Jade Grove Lightning Child
Template: lightning
Version: 1.0.0
Description: Jade Grove 用 Lightning 子テーマ
*/
/* =========================
   Jade Grove Pet Grid
========================= */

.jg-pet-list {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 20px 72px;
}

.jg-pet-list__header {
	margin-bottom: 28px;
}

.jg-pet-list__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #557a46;
}

.jg-pet-list__header h2 {
	margin: 0 0 8px;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	color: #2d2d26;
}

.jg-pet-list__header > p:last-child {
	margin: 0;
	color: #6c6a61;
}

.jg-pet-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.jg-pet-card {
	overflow: hidden;
	border: 1px solid rgba(77, 91, 67, 0.12);
	border-radius: 18px;
	background: #fffdf8;
	box-shadow: 0 8px 24px rgba(69, 71, 61, 0.07);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.jg-pet-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(69, 71, 61, 0.13);
}

.jg-pet-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.jg-pet-card__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f1eee4;
}

.jg-pet-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.jg-pet-card:hover .jg-pet-card__image img {
	transform: scale(1.045);
}

.jg-pet-card__status {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(76, 119, 67, 0.92);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	backdrop-filter: blur(6px);
}

.jg-pet-card__noimage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #918f85;
	font-size: 12px;
}

.jg-pet-card__body {
	padding: 17px 18px 18px;
}

.jg-pet-card__id {
	margin: 0 0 6px;
	font-size: 12px;
	color: #858278;
}

.jg-pet-card h3 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.45;
	color: #2c2c27;
}

.jg-pet-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-height: 24px;
	margin-bottom: 16px;
	color: #5f5d56;
	font-size: 14px;
}

.jg-pet-card__meta span + span::before {
	content: "・";
	margin-right: 10px;
	color: #aaa69a;
}

.jg-pet-card__footer {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #ece8de;
}

.jg-pet-card__footer strong {
	color: #4e7843;
	font-size: 20px;
}

.jg-pet-card__footer span {
	color: #77746c;
	font-size: 12px;
	text-align: right;
}

@media (max-width: 1000px) {
	.jg-pet-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.jg-pet-list {
		padding: 30px 14px 48px;
	}

	.jg-pet-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.jg-pet-card {
		border-radius: 14px;
	}

	.jg-pet-card__body {
		padding: 12px;
	}

	.jg-pet-card h3 {
		font-size: 15px;
	}

	.jg-pet-card__footer {
		display: block;
	}

	.jg-pet-card__footer strong,
	.jg-pet-card__footer span {
		display: block;
		text-align: left;
	}

	.jg-pet-card__footer strong {
		margin-bottom: 4px;
		font-size: 17px;
	}
}
/* =========================
   Jade Grove Filters
========================= */

.jg-status-tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 26px 0 20px;
	overflow: hidden;
	border: 1px solid #e5e1d6;
	border-radius: 14px;
	background: #fff;
}

.jg-status-tabs a {
	padding: 15px 10px;
	border-right: 1px solid #e5e1d6;
	color: #4f4d46;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.jg-status-tabs a:last-child {
	border-right: 0;
}

.jg-status-tabs a:hover {
	background: #f4f1e8;
}

.jg-status-tabs a.is-active {
	background: #567746;
	color: #fff;
}

.jg-pet-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px;
	margin-bottom: 28px;
	padding: 16px;
	border: 1px solid #e8e3d8;
	border-radius: 16px;
	background: #fbf9f3;
}

.jg-filter-field {
	display: flex;
	flex: 1 1 180px;
	flex-direction: column;
	gap: 6px;
}

.jg-filter-field label {
	font-size: 12px;
	font-weight: 700;
	color: #68665e;
}

.jg-filter-field select {
	width: 100%;
	min-height: 46px;
	padding: 0 42px 0 14px;
	border: 1px solid #ddd8cc;
	border-radius: 12px;
	background: #fff;
	color: #35342f;
	font-size: 14px;
}

.jg-pet-filter button {
	min-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: #567746;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.jg-pet-filter button:hover {
	opacity: 0.9;
}

.jg-pet-empty {
	padding: 60px 20px;
	border-radius: 16px;
	background: #f7f4ec;
	color: #77746b;
	text-align: center;
}

@media (max-width: 720px) {

	.jg-status-tabs {
		display: flex;
		overflow-x: auto;
		border-radius: 12px;
		-webkit-overflow-scrolling: touch;
	}

	.jg-status-tabs a {
		flex: 0 0 auto;
		min-width: 105px;
		padding: 13px 15px;
		white-space: nowrap;
	}

	.jg-pet-filter {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 12px;
	}

	.jg-filter-field {
		min-width: 0;
	}

	.jg-filter-field:last-of-type {
		grid-column: 1 / -1;
	}

	.jg-pet-filter button {
		grid-column: 1 / -1;
		width: 100%;
	}

}
/* Ajax切り替え演出 */
.jg-pet-grid {
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.jg-pet-grid.is-loading {
	opacity: 0.35;
	transform: translateY(4px);
	pointer-events: none;
}
/* =========================================================
   Jade Grove 生体カード UI仕上げ
   ========================================================= */


/* ---------------------------------------------------------
   カード本体
   --------------------------------------------------------- */

.jg-pet-card {
	border: 1px solid #e5ddd0;
	border-radius: 18px;
	overflow: hidden;
	background: #fffdf8;
	box-shadow: 0 7px 22px rgba(70, 60, 45, 0.05);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.jg-pet-card:hover {
	transform: translateY(-2px);
	border-color: #d6cbbb;
	box-shadow: 0 10px 28px rgba(70, 60, 45, 0.09);
}


/* ---------------------------------------------------------
   ステータスバッジ共通
   --------------------------------------------------------- */

.jg-pet-card__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 5px 14px;
	border-radius: 999px;

	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	background: #5b8050;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* 販売中 */

.jg-pet-card__status[data-status="販売中"] {
	background: #5b8050;
}


/* 予約可能 */

.jg-pet-card__status[data-status="予約可能"] {
	background: #6f93a8;
}


/* 商談中 */

.jg-pet-card__status[data-status="商談中"] {
	background: #c58a55;
}


/* ご家族様決定 */

.jg-pet-card__status[data-status="ご家族様決定"] {
	background: #b97878;
}


/* ---------------------------------------------------------
   SOLD
   ご家族様決定と同じカラー
   --------------------------------------------------------- */

.jg-pet-card__sold {
	color: #b97878 !important;
	font-weight: 700;
}


/* ---------------------------------------------------------
   ID
   --------------------------------------------------------- */

.jg-pet-card__id {
	margin: 0 0 8px;
	color: #8b857d;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}


/* ---------------------------------------------------------
   カードタイトル
   --------------------------------------------------------- */

.jg-pet-card__body h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 1.35;
}


/* ---------------------------------------------------------
   生年月日・価格エリア
   --------------------------------------------------------- */

.jg-pet-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}


/* 価格 */

.jg-pet-card__footer strong {
	flex-shrink: 0;
}


/* 誕生日
   日付の途中で変な位置に改行させない
   --------------------------------------------------------- */

.jg-pet-card__birthday {
	display: inline-block;
	flex-shrink: 0;
	text-align: right;
	line-height: 1.45;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.jg-pet-card {
		border-radius: 14px;
	}

	.jg-pet-card__status {
		min-height: 27px;
		padding: 4px 10px;
		font-size: 12px;
	}

	.jg-pet-card__body h3 {
		font-size: 17px;
	}

	.jg-pet-card__footer {
		align-items: flex-end;
	}

	.jg-pet-card__birthday {
		font-size: 12px;
	}
}
/* =========================================================
   Jade Grove 生体一覧 UI仕上げ 2026
   ========================================================= */


/* ---------------------------------------------------------
   カード
   --------------------------------------------------------- */

.jg-pet-card {
	border: 1px solid #e5ddd0;
	border-radius: 18px;
	overflow: hidden;
	background: #fffdf8;

	box-shadow:
		0 6px 20px rgba(74, 66, 53, 0.045);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


.jg-pet-card:hover {
	transform: translateY(-2px);

	border-color: #d6cbbb;

	box-shadow:
		0 10px 28px rgba(74, 66, 53, 0.09);
}


/* ---------------------------------------------------------
   JG-ID
   --------------------------------------------------------- */

.jg-pet-card__id {
	margin:
		0
		0
		8px;

	color: #8c857b;

	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;

	letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
   種類名
   --------------------------------------------------------- */

.jg-pet-card__body h3 {
	margin:
		0
		0
		10px;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;

	color: #27231f;
}


/* ---------------------------------------------------------
   ステータス共通
   --------------------------------------------------------- */

.jg-pet-card__status {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 30px;

	padding:
		5px
		14px;

	border-radius: 999px;

	color: #ffffff !important;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	white-space: nowrap;

	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.07);
}


/* ---------------------------------------------------------
   販売中
   Jade Grove グリーン
   --------------------------------------------------------- */

.jg-pet-card__status[data-status="販売中"] {
	background: #5b8050 !important;
}


/* ---------------------------------------------------------
   予約可能
   やさしいくすみブルー
   --------------------------------------------------------- */

.jg-pet-card__status[data-status="予約可能"] {
	background: #6f93a8 !important;
}


/* ---------------------------------------------------------
   商談中
   やわらかいキャメル
   --------------------------------------------------------- */

.jg-pet-card__status[data-status="商談中"] {
	background: #c58a55 !important;
}


/* ---------------------------------------------------------
   ご家族様決定
   やさしいくすみローズ
   --------------------------------------------------------- */

.jg-pet-card__status[data-status="ご家族様決定"] {
	background: #b97878 !important;
}


/* ---------------------------------------------------------
   価格
   --------------------------------------------------------- */

.jg-pet-card__price {
	color: #4f7e47;
}


/* ---------------------------------------------------------
   SOLD
   ご家族様決定と同じ色
   --------------------------------------------------------- */

.jg-pet-card__sold {
	color: #b97878 !important;

	font-weight: 700;
}


/* ---------------------------------------------------------
   カード下段
   価格・誕生日
   --------------------------------------------------------- */

.jg-pet-card__footer {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 12px;
}


/* ---------------------------------------------------------
   誕生日
   必ず
   YYYY年M月D日
   生まれ
   の2行に統一
   --------------------------------------------------------- */

.jg-pet-card__birthday {
	display: flex;

	flex-direction: column;

	align-items: flex-end;
	justify-content: flex-end;

	flex-shrink: 0;

	text-align: right;

	line-height: 1.35;

	color: #7d776e;
}


.jg-pet-card__birthday-date {
	display: block;

	white-space: nowrap;
}


.jg-pet-card__birthday-label {
	display: block;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.jg-pet-card {
		border-radius: 14px;
	}


	.jg-pet-card__status {
		min-height: 27px;

		padding:
			4px
			10px;

		font-size: 12px;
	}


	.jg-pet-card__id {
		font-size: 12px;
	}


	.jg-pet-card__body h3 {
		font-size: 17px;
	}


	.jg-pet-card__footer {
		gap: 8px;
	}


	.jg-pet-card__birthday {
		font-size: 11px;
	}
}
/* =========================================================
   Jade Grove 生体一覧 UI v2
   ========================================================= */


/* =========================================================
   フィルター
   ========================================================= */

.jg-filter-panel {
	margin: 24px 0 32px;
	padding: 22px;

	border: 1px solid #e8dfd2;
	border-radius: 18px;

	background: #fdfaf4;
}


.jg-filter-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}


.jg-filter-group {
	margin-bottom: 18px;
}


.jg-filter-group:last-child {
	margin-bottom: 0;
}


.jg-filter-group__label {
	margin: 0 0 9px;

	font-size: 13px;
	font-weight: 700;

	color: #4d473f;
}


.jg-filter-chips,
.jg-sort-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}


.jg-filter-chip,
.jg-sort-chip {
	appearance: none;

	padding: 8px 14px;

	border: 1px solid #ddd3c5;
	border-radius: 12px;

	background: #ffffff;

	color: #39352f;

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}


.jg-filter-chip:hover,
.jg-sort-chip:hover {
	transform: translateY(-1px);

	border-color: #9fb394;
}


.jg-filter-chip.is-active,
.jg-sort-chip.is-active {
	border-color: #709163;
	background: #edf4e8;
	color: #4e7043;
}


.jg-filter-chip--male.is-active {
	border-color: #92bfe3;
	background: #edf7ff;
	color: #397cae;
}


.jg-filter-chip--female.is-active {
	border-color: #e5aaaa;
	background: #fff1f1;
	color: #c65d68;
}


.jg-filter-chip--favorite.is-active {
	border-color: #e9a0ae;
	background: #fff0f3;
	color: #ce536b;
}


.jg-filter-clear {
	display: inline-flex;
	align-items: center;

	margin-top: 8px;
	padding: 10px 16px;

	border: 1px solid #ded2c1;
	border-radius: 12px;

	background: #f5eddf;

	color: #4e473f;

	font-size: 14px;
	font-weight: 700;

	cursor: pointer;
}


/* =========================================================
   カード共通
   ========================================================= */

.jg-pet-card {
	position: relative;

	border-radius: 18px;
	overflow: hidden;

	background: #fffdf8;

	border: 1px solid #e5ddd0;

	box-shadow:
		0 6px 20px rgba(66, 58, 44, 0.055);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}


.jg-pet-card:hover {
	transform: translateY(-3px);

	box-shadow:
		0 12px 30px rgba(66, 58, 44, 0.10);
}


/* =========================================================
   ナチュラルリース四角枠
   ========================================================= */

.jg-pet-card::before {
	content: "";

	position: absolute;
	inset: 5px;

	z-index: 2;

	pointer-events: none;

	border-radius: 14px;

	border:
		1px solid
		rgba(91, 128, 80, 0.58);
}


/*
 * 葉っぱ感を四隅に追加
 */
.jg-pet-card::after {
	content: "❧";

	position: absolute;

	top: 3px;
	right: 9px;

	z-index: 3;

	pointer-events: none;

	color: #6a8d5e;

	font-size: 22px;

	transform: rotate(18deg);
}


/* =========================================================
   ステータス別 枠
   ========================================================= */

.jg-pet-card:has(
	.jg-pet-card__status[data-status="販売中"]
)::before {
	border-color:
		rgba(91, 128, 80, 0.72);
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="予約可能"]
)::before {
	border-color:
		rgba(111, 147, 168, 0.72);
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="予約可能"]
)::after {
	color: #6f93a8;
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="商談中"]
)::before {
	border-color:
		rgba(197, 138, 85, 0.75);
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="商談中"]
)::after {
	content: "✿";

	color: #c58a55;
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="ご家族様決定"]
)::before {
	border-color:
		rgba(185, 120, 120, 0.72);
}


.jg-pet-card:has(
	.jg-pet-card__status[data-status="ご家族様決定"]
)::after {
	content: "୨୧";

	color: #b97878;

	font-size: 17px;
}


/* =========================================================
   画像
   ========================================================= */

.jg-pet-card__image {
	position: relative;
}


.jg-pet-card__image-link {
	display: block;
}


.jg-pet-card__image img {
	display: block;

	width: 100%;
}


/* =========================================================
   ステータス
   ========================================================= */

.jg-pet-card__status {
	position: absolute;

	top: 14px;
	left: 14px;

	z-index: 5;

	padding: 6px 13px;

	border-radius: 999px;

	color: #ffffff !important;

	font-size: 12px;
	font-weight: 700;

	box-shadow:
		0 3px 9px rgba(0, 0, 0, 0.10);
}


.jg-pet-card__status[data-status="販売中"] {
	background: #5b8050;
}


.jg-pet-card__status[data-status="予約可能"] {
	background: #6f93a8;
}


.jg-pet-card__status[data-status="商談中"] {
	background: #c58a55;
}


.jg-pet-card__status[data-status="ご家族様決定"] {
	background: #b97878;
}


/* =========================================================
   お気に入り
   ========================================================= */

.jg-favorite-button {
	position: absolute;

	top: 12px;
	right: 12px;

	z-index: 10;

	display: grid;
	place-items: center;

	width: 38px;
	height: 38px;

	padding: 0;

	border: 1px solid rgba(255,255,255,.75);
	border-radius: 50%;

	background: rgba(255,255,255,.91);

	box-shadow:
		0 4px 12px rgba(60,50,40,.10);

	cursor: pointer;

	overflow: visible;

	transition:
		transform 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease;
}


.jg-favorite-button__heart {
	color: #65615c;

	font-size: 25px;
	line-height: 1;

	transition:
		color 0.2s ease,
		transform 0.2s ease,
		text-shadow 0.2s ease;
}


.jg-favorite-button:hover {
	transform: scale(1.07);
}


.jg-favorite-button.is-favorite {
	background: #fff5f7;

	box-shadow:
		0 4px 14px rgba(211, 86, 111, .20);
}


.jg-favorite-button.is-favorite
.jg-favorite-button__heart {
	color: #de5d76;
}


/* ---------------------------------------------------------
   豪華お気に入りアニメーション
   --------------------------------------------------------- */

.jg-favorite-button.is-celebrating {
	animation:
		jgHeartButtonPulse
		0.65s ease;
}


.jg-favorite-button.is-celebrating
.jg-favorite-button__heart {
	animation:
		jgHeartPop
		0.72s cubic-bezier(
			.18,
			1.4,
			.4,
			1
		);

	color: #e25270;

	text-shadow:
		0 0 7px rgba(255,119,146,.7),
		0 0 18px rgba(255,162,183,.65);
}


.jg-favorite-button.is-celebrating::before,
.jg-favorite-button.is-celebrating::after {
	position: absolute;

	z-index: -1;

	pointer-events: none;

	color: #ef8da1;

	animation:
		jgHeartSparkle
		0.8s ease-out
		forwards;
}


.jg-favorite-button.is-celebrating::before {
	content: "✦  ♥  ✧";

	top: -22px;
	left: -18px;

	font-size: 12px;
}


.jg-favorite-button.is-celebrating::after {
	content: "♡  ✦  ♡";

	right: -23px;
	bottom: -17px;

	font-size: 11px;

	animation-delay:
		0.06s;
}


@keyframes jgHeartPop {

	0% {
		transform: scale(.65);
	}

	38% {
		transform: scale(1.55) rotate(-7deg);
	}

	62% {
		transform: scale(.9) rotate(5deg);
	}

	82% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}


@keyframes jgHeartButtonPulse {

	0% {
		box-shadow:
			0 4px 12px rgba(60,50,40,.10);
	}

	40% {
		box-shadow:
			0 0 0 8px rgba(238,120,144,.14),
			0 0 25px rgba(238,120,144,.32);
	}

	100% {
		box-shadow:
			0 4px 14px rgba(211,86,111,.20);
	}
}


@keyframes jgHeartSparkle {

	0% {
		opacity: 0;
		transform:
			scale(.3)
			translateY(5px);
	}

	35% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform:
			scale(1.25)
			translateY(-13px);
	}
}


/* =========================================================
   カード本文
   ========================================================= */

.jg-pet-card__body {
	position: relative;

	z-index: 4;

	padding: 18px;
}


.jg-pet-card__id {
	margin:
		0
		0
		10px;

	color: #6a875f;

	font-size: 13px;
}


/* =========================================================
   カード内チップ
   ========================================================= */

.jg-pet-chip {
	appearance: none;

	border: none;

	cursor: pointer;
}


.jg-pet-chip--type {
	display: inline-flex;

	margin-bottom: 12px;

	padding: 6px 13px;

	border-radius: 999px;

	background: #5b8050;

	color: #ffffff;

	font-size: 13px;
	font-weight: 700;
}


.jg-pet-chip--sex {
	padding: 5px 10px;

	border-radius: 999px;

	font-size: 12px;
	font-weight: 700;
}


.jg-pet-chip--sex.is-male {
	border: 1px solid #acd1eb;

	background: #eef8ff;

	color: #3d84b8;
}


.jg-pet-chip--sex.is-female {
	border: 1px solid #efb6be;

	background: #fff2f4;

	color: #ce6272;
}


/* =========================================================
   年・月日
   ========================================================= */

.jg-pet-card__info-row {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 10px;

	margin-bottom: 12px;
}


.jg-pet-card__birthday {
	display: flex;

	flex-direction: column;

	align-items: flex-end;

	line-height: 1.25;
}


.jg-pet-card__birthday-year {
	color: #57524c;

	font-size: 13px;

	white-space: nowrap;
}


.jg-pet-card__birthday-date {
	margin-top: 3px;

	color: #57524c;

	font-size: 13px;

	white-space: nowrap;
}


/* =========================================================
   カラー
   ========================================================= */

.jg-pet-card__color {
	margin:
		0
		0
		10px;

	color: #79736b;

	font-size: 13px;
}


/* =========================================================
   価格＋この子を見る
   ========================================================= */

.jg-pet-card__footer {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 12px;

	padding-top: 13px;

	border-top:
		1px solid #ece4d9;
}


.jg-pet-card__price,
.jg-pet-card__sold {
	font-size: 23px;
	font-weight: 800;
	line-height: 1;

	white-space: nowrap;
}


.jg-pet-card__price {
	color: #4f7e47;
}


.jg-pet-card__sold {
	color: #b97878;
}


.jg-pet-card__detail {
	display: inline-flex;

	align-items: center;

	gap: 5px;

	flex-shrink: 0;

	padding: 7px 11px;

	border:
		1px solid #88a47c;

	border-radius: 9px;

	background: #fff;

	color: #56784b !important;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		background .18s ease,
		color .18s ease,
		transform .18s ease;
}


.jg-pet-card__detail:hover {
	background: #5b8050;

	color: #fff !important;

	transform: translateX(2px);
}


/* =========================================================
   ローディング
   ========================================================= */

.jg-pet-grid.is-loading {
	opacity: .48;

	pointer-events: none;

	transition: opacity .15s ease;
}


/* =========================================================
   お気に入り非表示
   ========================================================= */

.jg-pet-card[hidden] {
	display: none !important;
}


/* =========================================================
   スマホ
   ========================================================= */

@media (max-width: 767px) {

	.jg-filter-panel {
		padding: 16px;
	}


	.jg-filter-row {
		grid-template-columns:
			1fr;
		gap: 4px;
	}


	.jg-filter-chips,
	.jg-sort-chips {
		gap: 6px;
	}


	.jg-filter-chip,
	.jg-sort-chip {
		padding: 7px 10px;

		font-size: 12px;
	}


	.jg-pet-card {
		border-radius: 14px;
	}


	.jg-pet-card__body {
		padding: 14px;
	}


	.jg-pet-card__info-row {
		align-items:
			flex-start;
	}


	.jg-pet-card__birthday-year,
	.jg-pet-card__birthday-date {
		font-size: 11px;
	}


	.jg-pet-card__price,
	.jg-pet-card__sold {
		font-size: 19px;
	}


	.jg-pet-card__detail {
		padding:
			6px
			8px;

		font-size:
			10px;
	}


	.jg-favorite-button {
		width: 34px;
		height: 34px;
	}


	.jg-favorite-button__heart {
		font-size: 22px;
	}
}
/* =========================================================
   Jade Grove 生体一覧 UI FINAL OVERRIDE
   ========================================================= */


/* =========================================================
   フィルターヒント
   ========================================================= */

.jg-filter-group__hint {
	margin-left: 8px;

	color: #948a7e;

	font-size: 11px;
	font-weight: 500;
}


/* =========================================================
   フィルターチップ
   ========================================================= */

.jg-filter-chip,
.jg-sort-chip {
	position: relative;

	box-shadow:
		0 1px 1px rgba(74, 63, 50, .04),
		0 3px 8px rgba(74, 63, 50, .035);

	transform: translateY(0);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease,
		border-color .18s ease,
		color .18s ease;
}


.jg-filter-chip:hover,
.jg-sort-chip:hover {
	transform: translateY(-2px);

	box-shadow:
		0 5px 12px rgba(74, 63, 50, .08);
}


.jg-filter-chip.is-active,
.jg-sort-chip.is-active {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.8),
		0 4px 10px rgba(80, 113, 68, .12);
}


.jg-filter-chip.is-active:not(
	[data-filter-type=""]
)::after {
	content: "✓";

	display: inline-block;

	margin-left: 7px;

	font-size: 11px;
	font-weight: 800;
}


/* =========================================================
   ステータスタブ
   立体感
   ========================================================= */

.jg-status-tabs {
	position: relative;

	overflow: visible !important;

	perspective: 800px;
}


.jg-status-tabs a {
	position: relative;

	z-index: 1;

	transform:
		translateY(0)
		scale(1);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.85);

	transition:
		transform .28s cubic-bezier(.2,.8,.2,1),
		box-shadow .28s ease,
		background .28s ease,
		color .28s ease,
		border-color .28s ease;
}


.jg-status-tabs a:hover {
	z-index: 2;

	transform:
		translateY(-2px);
}


.jg-status-tabs a.is-active {
	z-index: 3;

	transform:
		translateY(-4px)
		scale(1.015);

	box-shadow:
		0 8px 17px rgba(68, 79, 58, .16),
		inset 0 1px 0 rgba(255,255,255,.25);
}


/* すべて */

.jg-status-tabs a[
	data-status-name="すべて"
].is-active {
	background:
		linear-gradient(
			180deg,
			#668d58,
			#527847
		);

	color: #fff !important;
}


/* 販売中 */

.jg-status-tabs a[
	data-status-name="販売中"
].is-active {
	background:
		linear-gradient(
			180deg,
			#6d915f,
			#5b8050
		);

	color: #fff !important;
}


/* 予約 */

.jg-status-tabs a[
	data-status-name="予約可能"
].is-active {
	background:
		linear-gradient(
			180deg,
			#83a8bd,
			#6f93a8
		);

	color: #fff !important;
}


/* 商談 */

.jg-status-tabs a[
	data-status-name="商談中"
].is-active {
	background:
		linear-gradient(
			180deg,
			#d99a62,
			#c58a55
		);

	color: #fff !important;
}


/* 家族決定 */

.jg-status-tabs a[
	data-status-name="ご家族様決定"
].is-active {
	background:
		linear-gradient(
			180deg,
			#ca8b8b,
			#b97878
		);

	color: #fff !important;
}


/* =========================================================
   AJAX 切替
   ========================================================= */

.jg-pet-grid {
	transition:
		opacity .23s ease,
		transform .23s ease,
		filter .23s ease;
}


.jg-pet-grid.is-loading {
	opacity: .38;

	transform:
		translateY(5px)
		scale(.995);

	filter:
		blur(.6px);

	pointer-events: none;
}


.jg-pet-grid.is-entering {
	opacity: 0;

	transform:
		translateY(8px);
}


.jg-pet-grid .jg-pet-card {
	animation:
		jgCardAppear
		.35s cubic-bezier(.2,.75,.25,1)
		both;
}


.jg-pet-grid .jg-pet-card:nth-child(2) {
	animation-delay: .025s;
}

.jg-pet-grid .jg-pet-card:nth-child(3) {
	animation-delay: .05s;
}

.jg-pet-grid .jg-pet-card:nth-child(4) {
	animation-delay: .075s;
}


@keyframes jgCardAppear {

	from {
		opacity: 0;

		transform:
			translateY(8px)
			scale(.99);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


/* =========================================================
   カード本体
   ========================================================= */

.jg-pet-card {
	position: relative;

	display: flex;
	flex-direction: column;

	height: 100%;

	overflow: visible !important;

	border-radius: 18px;

	border: none !important;

	background: #fffdf8;

	box-shadow:
		0 3px 8px rgba(75,65,50,.06),
		0 13px 28px rgba(75,65,50,.07);

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}


.jg-pet-card:hover {
	transform:
		translateY(-4px);

	box-shadow:
		0 5px 11px rgba(75,65,50,.07),
		0 18px 36px rgba(75,65,50,.11);
}


/* =========================================================
   決定したカード枠
   ========================================================= */

.jg-pet-card__frame {
	position: absolute;

	z-index: 7;

	inset: 4px;

	border:
		1.5px solid
		#6a8e5e;

	border-radius: 15px;

	pointer-events: none;

	box-shadow:
		inset 0 0 0 1px
		rgba(255,255,255,.48);
}


/* ---------------------------------------------------------
   四隅共通
   --------------------------------------------------------- */

.jg-card-ornament {
	position: absolute;

	z-index: 8;

	width: 30px;
	height: 30px;

	display: grid;
	place-items: center;

	pointer-events: none;

	color: #66895a;

	font-size: 27px;

	line-height: 1;

	text-shadow:
		0 1px 0 #fff;
}


.jg-card-ornament::before {
	content: "❧";
}


.jg-card-ornament--tl {
	top: -5px;
	left: -5px;

	transform:
		rotate(-48deg);
}


.jg-card-ornament--tr {
	top: -5px;
	right: -5px;

	transform:
		rotate(48deg)
		scaleX(-1);
}


.jg-card-ornament--bl {
	bottom: -5px;
	left: -5px;

	transform:
		rotate(-132deg)
		scaleX(-1);
}


.jg-card-ornament--br {
	right: -5px;
	bottom: -5px;

	transform:
		rotate(132deg);
}


.jg-card-ribbon {
	display: none;

	position: absolute;

	z-index: 9;

	top: -14px;
	left: 50%;

	transform:
		translateX(-50%);

	color: #b97878;

	font-size: 27px;
	font-weight: 700;

	line-height: 1;

	pointer-events: none;

	text-shadow:
		0 2px 0 #fff,
		0 3px 6px
		rgba(150,90,90,.16);
}


/* =========================================================
   販売中
   ナチュラルリース四角
   ========================================================= */

.jg-pet-card[
	data-status="販売中"
]
.jg-pet-card__frame {
	border-color:
		rgba(91,128,80,.82);
}


.jg-pet-card[
	data-status="販売中"
]
.jg-card-ornament {
	color: #628657;
}


/* =========================================================
   予約可能
   ブルー小花
   ========================================================= */

.jg-pet-card[
	data-status="予約可能"
]
.jg-pet-card__frame {
	border-color:
		rgba(111,147,168,.78);
}


.jg-pet-card[
	data-status="予約可能"
]
.jg-card-ornament {
	color: #6f93a8;

	font-size: 22px;
}


.jg-pet-card[
	data-status="予約可能"
]
.jg-card-ornament::before {
	content: "✿";
}


/* =========================================================
   商談中
   オレンジガーデン
   ========================================================= */

.jg-pet-card[
	data-status="商談中"
]
.jg-pet-card__frame {
	border-color:
		rgba(197,138,85,.82);
}


.jg-pet-card[
	data-status="商談中"
]
.jg-card-ornament {
	color: #c58a55;

	font-size: 24px;
}


.jg-pet-card[
	data-status="商談中"
]
.jg-card-ornament::before {
	content: "✿";
}


/* =========================================================
   ご家族様決定
   ローズ＋リボン
   ========================================================= */

.jg-pet-card[
	data-status="ご家族様決定"
]
.jg-pet-card__frame,
.jg-pet-card.is-sold
.jg-pet-card__frame {
	border-color:
		rgba(185,120,120,.74);
}


.jg-pet-card[
	data-status="ご家族様決定"
]
.jg-card-ornament,
.jg-pet-card.is-sold
.jg-card-ornament {
	color: #b97878;

	font-size: 21px;
}


.jg-pet-card[
	data-status="ご家族様決定"
]
.jg-card-ornament::before,
.jg-pet-card.is-sold
.jg-card-ornament::before {
	content: "❀";
}


.jg-pet-card[
	data-status="ご家族様決定"
]
.jg-card-ribbon,
.jg-pet-card.is-sold
.jg-card-ribbon {
	display: block;
}


/* =========================================================
   画像余白完全解消
   ========================================================= */

.jg-pet-card__image {
	position: relative;

	flex: 0 0 auto;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	border-radius:
		18px
		18px
		0
		0;

	background: #eeeae1;
}


.jg-pet-card__image-link {
	display: block;

	width: 100%;
	height: 100%;
}


.jg-pet-card__image img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	object-fit: cover !important;

	object-position: center !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   本文
   ========================================================= */

.jg-pet-card__body {
	position: relative;

	z-index: 4;

	display: flex;
	flex-direction: column;

	flex: 1;

	padding:
		18px
		18px
		17px;

	background: #fffdf8;

	border-radius:
		0
		0
		18px
		18px;
}


/* =========================================================
   生体種
   ========================================================= */

.jg-pet-chip--type {
	max-width: 100%;

	margin-bottom: 5px;

	white-space: normal;

	text-align: left;
}


/* =========================================================
   カラー / モルフ予約領域
   ========================================================= */

.jg-pet-card__morph-slot {
	display: flex;

	align-items: flex-start;

	min-height: 28px;

	margin:
		0
		0
		7px;

	padding-top: 3px;

	color: #817a70;

	font-size: 12px;
	line-height: 1.35;
}


/*
 * 空でも高さを維持
 */
.jg-pet-card__morph-slot:empty::before {
	content: "\00a0";
}


/* =========================================================
   性別・生年月日
   ========================================================= */

.jg-pet-card__info-row {
	min-height: 45px;

	margin-bottom: 11px;
}


.jg-pet-card__note {
	display: inline-flex;

	align-items: center;

	max-width: 62%;

	padding:
		5px
		10px;

	border-radius: 999px;

	background: #f1f0ee;

	color: #514d47;

	font-size: 11px;
	font-weight: 600;

	line-height: 1.35;
}


/* =========================================================
   カードフッター
   金額と詳細ボタン位置固定
   ========================================================= */

.jg-pet-card__footer {
	display: grid !important;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	align-items: end !important;

	gap: 10px !important;

	min-height: 55px;

	margin-top: auto;

	padding-top: 13px;

	border-top:
		1px solid #ece4d9;
}


.jg-pet-card__price-area {
	display: flex;

	align-items: flex-end;

	min-width: 0;
}


.jg-pet-card__detail {
	align-self: end;

	justify-self: end;

	margin-left: auto !important;

	white-space: nowrap;

	box-sizing: border-box;
}


/* =========================================================
   ハート通常時
   立体化
   ========================================================= */

.jg-favorite-button {
	position: absolute;

	top: 12px;
	right: 12px;

	z-index: 20;

	display: grid;

	place-items: center;

	width: 42px;
	height: 42px;

	padding: 0;

	border:
		1px solid
		rgba(255,255,255,.9);

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.98),
			rgba(246,243,237,.94)
		);

	box-shadow:
		inset 0 1px 1px
		rgba(255,255,255,1),

		inset 0 -2px 3px
		rgba(150,135,115,.08),

		0 2px 2px
		rgba(50,45,40,.08),

		0 7px 14px
		rgba(50,45,40,.15);

	cursor: pointer;

	overflow: visible;

	transform:
		translateY(0)
		scale(1);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease;
}


.jg-favorite-button:hover {
	transform:
		translateY(-2px)
		scale(1.055);

	box-shadow:
		inset 0 1px 1px #fff,

		0 4px 5px
		rgba(50,45,40,.10),

		0 10px 20px
		rgba(50,45,40,.18);
}


.jg-favorite-button:active {
	transform:
		translateY(1px)
		scale(.96);

	box-shadow:
		inset 0 2px 5px
		rgba(85,75,65,.13),

		0 2px 4px
		rgba(50,45,40,.08);
}


.jg-favorite-button__heart {
	position: relative;

	z-index: 3;

	display: block;

	color: #66615b;

	font-size: 27px;

	line-height: 1;

	transform: translateZ(0);

	filter:
		drop-shadow(
			0 1px 0 #fff
		);

	transition:
		color .25s ease,
		filter .25s ease;
}


/* =========================================================
   お気に入り登録済
   ========================================================= */

.jg-favorite-button.is-favorite {
	background:
		linear-gradient(
			145deg,
			#fff7f9,
			#ffecef
		);

	border-color:
		#f3cbd3;
}


.jg-favorite-button.is-favorite
.jg-favorite-button__heart {
	color: #df5874;

	filter:
		drop-shadow(
			0 2px 2px
			rgba(195,63,91,.18)
		);
}


/* =========================================================
   キラキラレイヤー
   ========================================================= */

.jg-favorite-button__sparkles {
	position: absolute;

	z-index: 2;

	inset: 50% auto auto 50%;

	width: 0;
	height: 0;

	pointer-events: none;
}


.jg-favorite-button__sparkles i {
	position: absolute;

	top: 0;
	left: 0;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	opacity: 0;

	background:
		radial-gradient(
			circle,
			#fff 0 20%,
			#ffd9e1 22% 42%,
			#ef6f8b 46% 62%,
			transparent 65%
		);

	box-shadow:
		0 0 6px
		rgba(255,118,149,.9);
}


.jg-favorite-button__sparkles i:nth-child(1) {
	--jx: -35px;
	--jy: -34px;
	--jd: 0ms;
}

.jg-favorite-button__sparkles i:nth-child(2) {
	--jx: 0px;
	--jy: -45px;
	--jd: 55ms;
}

.jg-favorite-button__sparkles i:nth-child(3) {
	--jx: 35px;
	--jy: -30px;
	--jd: 90ms;
}

.jg-favorite-button__sparkles i:nth-child(4) {
	--jx: 43px;
	--jy: 4px;
	--jd: 25ms;
}

.jg-favorite-button__sparkles i:nth-child(5) {
	--jx: 30px;
	--jy: 35px;
	--jd: 105ms;
}

.jg-favorite-button__sparkles i:nth-child(6) {
	--jx: -4px;
	--jy: 43px;
	--jd: 45ms;
}

.jg-favorite-button__sparkles i:nth-child(7) {
	--jx: -37px;
	--jy: 28px;
	--jd: 115ms;
}

.jg-favorite-button__sparkles i:nth-child(8) {
	--jx: -45px;
	--jy: -5px;
	--jd: 65ms;
}


/* =========================================================
   ハート登録
   豪華版
   ========================================================= */

.jg-favorite-button.is-celebrating {
	animation:
		jgFavoriteHalo
		1.05s ease
		both;
}


.jg-favorite-button.is-celebrating
.jg-favorite-button__heart {
	animation:
		jgFavoriteHeartPop
		.9s
		cubic-bezier(.17,1.55,.35,1)
		both;

	text-shadow:
		0 0 8px
		rgba(255,109,142,.75),

		0 0 16px
		rgba(255,143,166,.52);
}


.jg-favorite-button.is-celebrating
.jg-favorite-button__sparkles i {
	animation:
		jgFavoriteSpark
		.82s
		cubic-bezier(.18,.7,.25,1)
		var(--jd)
		both;
}


@keyframes jgFavoriteHeartPop {

	0% {
		transform:
			scale(.65)
			rotate(0);
	}

	28% {
		transform:
			scale(1.65)
			rotate(-8deg);
	}

	46% {
		transform:
			scale(.9)
			rotate(5deg);
	}

	65% {
		transform:
			scale(1.25)
			rotate(-2deg);
	}

	82% {
		transform:
			scale(.98);
	}

	100% {
		transform:
			scale(1);
	}
}


@keyframes jgFavoriteHalo {

	0% {
		box-shadow:
			0 6px 15px
			rgba(50,45,40,.14);
	}

	34% {
		box-shadow:
			0 0 0 9px
			rgba(239,100,131,.12),

			0 0 0 18px
			rgba(239,100,131,.06),

			0 0 32px
			rgba(239,100,131,.44);
	}

	70% {
		box-shadow:
			0 0 0 5px
			rgba(239,100,131,.07),

			0 0 22px
			rgba(239,100,131,.22);
	}

	100% {
		box-shadow:
			inset 0 1px 1px #fff,

			0 4px 14px
			rgba(211,86,111,.20);
	}
}


@keyframes jgFavoriteSpark {

	0% {
		opacity: 0;

		transform:
			translate(
				-50%,
				-50%
			)
			scale(.15);
	}

	25% {
		opacity: 1;
	}

	70% {
		opacity: .95;
	}

	100% {
		opacity: 0;

		transform:
			translate(
				calc(
					-50% + var(--jx)
				),
				calc(
					-50% + var(--jy)
				)
			)
			scale(1.5);
	}
}


/* =========================================================
   お気に入り解除
   余韻
   ========================================================= */

.jg-favorite-button.is-removing
.jg-favorite-button__heart {
	color: #dc667d;

	animation:
		jgFavoriteRemove
		.7s
		cubic-bezier(.32,.05,.45,1)
		both;
}


.jg-favorite-button.is-removing {
	animation:
		jgFavoriteRemoveGlow
		.7s ease
		both;
}


.jg-favorite-button.is-removing
.jg-favorite-button__sparkles i:nth-child(odd) {
	animation:
		jgFavoriteSoftFade
		.62s ease
		both;
}


.jg-favorite-button.is-remove-settle
.jg-favorite-button__heart {
	animation:
		jgFavoriteOutlineReturn
		.36s ease
		both;
}


@keyframes jgFavoriteRemove {

	0% {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}

	30% {
		opacity: 1;

		transform:
			translateY(-5px)
			scale(1.12);
	}

	72% {
		opacity: .7;

		transform:
			translateY(-9px)
			scale(.82);
	}

	100% {
		opacity: .18;

		transform:
			translateY(-12px)
			scale(.6);
	}
}


@keyframes jgFavoriteRemoveGlow {

	0% {
		box-shadow:
			0 4px 14px
			rgba(211,86,111,.20);
	}

	55% {
		box-shadow:
			0 0 22px
			rgba(229,117,139,.22);
	}

	100% {
		box-shadow:
			0 5px 13px
			rgba(60,50,40,.12);
	}
}


@keyframes jgFavoriteSoftFade {

	0% {
		opacity: 0;
	}

	30% {
		opacity: .6;

		transform:
			translate(-50%,-50%)
			scale(.7);
	}

	100% {
		opacity: 0;

		transform:
			translate(
				calc(-50% + var(--jx) * .45),
				calc(-50% + var(--jy) * .45)
			)
			scale(.3);
	}
}


@keyframes jgFavoriteOutlineReturn {

	0% {
		opacity: 0;

		transform:
			scale(.65);
	}

	65% {
		opacity: 1;

		transform:
			scale(1.1);
	}

	100% {
		opacity: 1;

		transform:
			scale(1);
	}
}


/* =========================================================
   ステータス
   ========================================================= */

.jg-pet-card__status[
	data-status="販売中"
] {
	background:
		linear-gradient(
			180deg,
			#6c915f,
			#5b8050
		) !important;
}


.jg-pet-card__status[
	data-status="予約可能"
] {
	background:
		linear-gradient(
			180deg,
			#82a8bd,
			#6f93a8
		) !important;
}


.jg-pet-card__status[
	data-status="商談中"
] {
	background:
		linear-gradient(
			180deg,
			#d79a63,
			#c58a55
		) !important;
}


.jg-pet-card__status[
	data-status="ご家族様決定"
] {
	background:
		linear-gradient(
			180deg,
			#c98989,
			#b97878
		) !important;
}


/* =========================================================
   SOLD
   ========================================================= */

.jg-pet-card__sold {
	color:
		#b97878 !important;
}


/* =========================================================
   スマホ
   ========================================================= */

@media (
	max-width: 767px
) {

	.jg-pet-card__image {
		aspect-ratio:
			4 / 3;
	}


	.jg-pet-card__morph-slot {
		min-height: 24px;

		font-size: 11px;
	}


	.jg-pet-card__info-row {
		min-height: 42px;
	}


	.jg-pet-card__footer {
		grid-template-columns:
			minmax(0,1fr)
			auto;

		gap: 6px !important;
	}


	.jg-pet-card__detail {
		padding:
			6px
			7px !important;

		font-size:
			10px !important;
	}


	.jg-favorite-button {
		width: 36px;
		height: 36px;

		top: 9px;
		right: 9px;
	}


	.jg-favorite-button__heart {
		font-size: 23px;
	}


	.jg-card-ornament {
		width: 25px;
		height: 25px;

		font-size: 22px;
	}


	.jg-card-ribbon {
		top: -11px;

		font-size: 22px;
	}
}
/* =========================================================
   Jade Grove MOBILE FINAL LAYOUT
   ========================================================= */

@media (max-width: 767px) {

	/* =====================================================
	   ページ全体
	   ===================================================== */

	.jg-pet-list {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.jg-pet-list__header {
		padding-left: 4px;
		padding-right: 4px;
	}

	.jg-pet-list__header h2 {
		font-size: 34px;
		line-height: 1.2;
	}

	.jg-pet-list__header > p:last-child {
		font-size: 15px;
		line-height: 1.8;
	}


	/* =====================================================
	   ステータスタブ
	   横はみ出し防止
	   ===================================================== */

	.jg-status-tabs {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));

		width: 100%;
		max-width: 100%;

		margin: 18px 0 22px;

		padding: 4px;

		border: 1px solid #e5ddd1;
		border-radius: 15px;

		background: #f8f5ef;

		box-shadow:
			inset 0 1px 2px rgba(95,80,60,.08),
			0 4px 10px rgba(75,65,50,.05);

		overflow: hidden !important;
	}


	.jg-status-tabs a {
		display: flex !important;

		align-items: center;
		justify-content: center;

		min-width: 0;

		min-height: 45px;

		padding: 5px 3px !important;

		border: none !important;
		border-right: 1px solid #e5ddd1 !important;

		border-radius: 0 !important;

		font-size: 12px !important;
		font-weight: 700;

		line-height: 1.25;

		text-align: center;

		white-space: normal;

		transform: none !important;

		box-shadow:
			inset 0 1px 0 rgba(255,255,255,.8) !important;
	}


	.jg-status-tabs a:last-child {
		border-right: none !important;
	}


	.jg-status-tabs a.is-active {
		transform: none !important;

		border-radius: 10px !important;

		box-shadow:
			inset 0 2px 5px rgba(40,60,35,.17),
			0 2px 3px rgba(255,255,255,.7) !important;
	}


	/* =====================================================
	   フィルターパネル
	   ===================================================== */

	.jg-filter-panel {
		width: 100%;

		margin:
			0
			0
			24px;

		padding:
			17px
			14px;

		border-radius: 18px;
	}


	.jg-filter-row {
		display: grid !important;

		grid-template-columns:
			1fr
			1fr !important;

		gap:
			16px
			12px !important;
	}


	.jg-filter-group {
		margin-bottom: 17px;
	}


	.jg-filter-group__label {
		font-size: 13px;
	}


	.jg-filter-group__hint {
		display: inline;

		margin-left: 5px;

		font-size: 10px;
	}


	.jg-filter-chips,
	.jg-sort-chips {
		display: flex;

		flex-wrap: wrap;

		gap:
			7px
			6px;
	}


	.jg-filter-chip,
	.jg-sort-chip {
		min-height: 38px;

		padding:
			7px
			11px !important;

		border-radius: 12px;

		font-size: 12px !important;

		line-height: 1.2;
	}


	.jg-filter-clear {
		min-height: 40px;

		padding:
			8px
			14px;

		font-size: 12px;
	}


	/* =====================================================
	   生体カード 2列固定
	   ===================================================== */

	.jg-pet-grid {
		display: grid !important;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			) !important;

		gap:
			16px
			12px !important;

		width: 100%;
	}


	.jg-pet-card {
		min-width: 0;

		width: 100%;

		border-radius: 14px;

		overflow: hidden !important;

		box-shadow:
			0 4px 14px rgba(65,55,45,.08);
	}


	/* =====================================================
	   装飾
	   スマホでは飛び出さない
	   ===================================================== */

	.jg-pet-card__frame {
		inset: 3px;

		border-radius: 12px;
	}


	.jg-card-ornament {
		width: 18px;
		height: 18px;

		font-size: 16px;
	}


	.jg-card-ornament--tl {
		top: 1px;
		left: 1px;
	}


	.jg-card-ornament--tr {
		top: 1px;
		right: 1px;
	}


	.jg-card-ornament--bl {
		bottom: 1px;
		left: 1px;
	}


	.jg-card-ornament--br {
		right: 1px;
		bottom: 1px;
	}


	.jg-card-ribbon {
		top: 0;

		font-size: 16px;
	}


	/* =====================================================
	   画像
	   ===================================================== */

	.jg-pet-card__image {
		aspect-ratio: 1.35 / 1;

		border-radius:
			14px
			14px
			0
			0;
	}


	.jg-pet-card__image img {
		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
	}


	/* =====================================================
	   ステータス
	   ===================================================== */

	.jg-pet-card__status {
		top: 9px !important;
		left: 9px !important;

		min-height: 26px;

		padding:
			4px
			9px !important;

		font-size:
			10px !important;
	}


	/* =====================================================
	   ハート
	   ===================================================== */

	.jg-favorite-button {
		top: 8px;
		right: 8px;

		width: 34px;
		height: 34px;

		border-width: 1px;
	}


	.jg-favorite-button__heart {
		font-size: 21px;
	}


	/* =====================================================
	   本文
	   ===================================================== */

	.jg-pet-card__body {
		padding:
			12px
			11px
			12px;
	}


	/* =====================================================
	   ID
	   無くても高さ維持
	   ===================================================== */

	.jg-pet-card__id {
		min-height: 17px;

		margin:
			0
			0
			5px;

		font-size: 10px;
		line-height: 1.2;
	}


	.jg-pet-card__id.is-empty {
		visibility: hidden;
	}


	/* =====================================================
	   種類
	   ===================================================== */

	.jg-pet-chip--type {
		display: flex;

		align-items: center;

		width: 100%;

		min-height: 28px;

		margin-bottom: 5px;

		padding:
			5px
			10px;

		font-size: 11px;

		border-radius: 999px;
	}


	/* =====================================================
	   カラー / モルフ予定欄
	   ===================================================== */

	.jg-pet-card__morph-slot {
		min-height: 22px;

		margin-bottom: 5px;

		padding-top: 2px;

		font-size: 10px;
	}


	/* =====================================================
	   性別＋誕生日
	   ===================================================== */

	.jg-pet-card__info-row {
		display: grid !important;

		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: center;

		gap: 5px;

		min-height: 44px;

		margin-bottom: 8px;
	}


	.jg-pet-chip--sex {
		justify-self: start;

		max-width: 100%;

		padding:
			4px
			8px !important;

		font-size: 10px !important;

		white-space: nowrap;
	}


	.jg-pet-card__birthday {
		align-items: flex-end;

		min-width: 55px;

		text-align: right;
	}


	.jg-pet-card__birthday-year,
	.jg-pet-card__birthday-date {
		font-size: 10px !important;

		line-height: 1.3;

		white-space: nowrap;
	}


	.jg-pet-card__note {
		max-width: 100%;

		padding:
			4px
			7px;

		font-size: 9px;
	}


	/* =====================================================
	   フッター
	   金額と「この子を見る」高さ統一
	   ===================================================== */

	.jg-pet-card__footer {
		display: grid !important;

		grid-template-columns:
			minmax(0, 1fr)
			auto !important;

		align-items: center !important;

		gap:
			5px !important;

		min-height: 46px;

		padding-top: 9px;
	}


	.jg-pet-card__price-area {
		display: flex;

		align-items: center;

		min-width: 0;

		height: 100%;
	}


	.jg-pet-card__price,
	.jg-pet-card__sold {
		display: inline-flex;

		align-items: center;

		margin: 0;

		font-size: 17px !important;

		line-height: 1 !important;

		white-space: nowrap;
	}


	.jg-pet-card__detail {
		display: inline-flex !important;

		align-items: center;
		justify-content: center;

		justify-self: end;

		min-height: 32px;

		padding:
			5px
			7px !important;

		border-radius: 8px;

		font-size: 9px !important;

		line-height: 1;

		white-space: nowrap;
	}


	/* =====================================================
	   お気に入りキラキラ
	   スマホは少しだけ範囲縮小
	   ===================================================== */

	.jg-favorite-button__sparkles i:nth-child(1) {
		--jx: -25px;
		--jy: -25px;
	}

	.jg-favorite-button__sparkles i:nth-child(2) {
		--jx: 0px;
		--jy: -31px;
	}

	.jg-favorite-button__sparkles i:nth-child(3) {
		--jx: 25px;
		--jy: -22px;
	}

	.jg-favorite-button__sparkles i:nth-child(4) {
		--jx: 30px;
		--jy: 2px;
	}

	.jg-favorite-button__sparkles i:nth-child(5) {
		--jx: 23px;
		--jy: 25px;
	}

	.jg-favorite-button__sparkles i:nth-child(6) {
		--jx: -3px;
		--jy: 30px;
	}

	.jg-favorite-button__sparkles i:nth-child(7) {
		--jx: -27px;
		--jy: 21px;
	}

	.jg-favorite-button__sparkles i:nth-child(8) {
		--jx: -31px;
		--jy: -3px;
	}
}


/* =========================================================
   極小スマホ
   ========================================================= */

@media (max-width: 390px) {

	.jg-status-tabs a {
		font-size: 10px !important;
	}


	.jg-filter-row {
		grid-template-columns: 1fr !important;
	}


	.jg-pet-grid {
		gap:
			14px
			8px !important;
	}


	.jg-pet-card__body {
		padding:
			11px
			9px;
	}


	.jg-pet-card__price,
	.jg-pet-card__sold {
		font-size: 15px !important;
	}


	.jg-pet-card__detail {
		padding:
			5px
			5px !important;

		font-size:
			8px !important;
	}
}
/* =========================================================
   Jade Grove PC微調整
   金額位置・お気に入りハート中央補正
   ========================================================= */


/* ---------------------------------------------------------
   PC版：金額を「この子を見る」と高さ合わせ
   スマホ設定は変更しない
   --------------------------------------------------------- */

@media (min-width: 768px) {

	.jg-pet-card__footer {
		align-items: center !important;
	}

	.jg-pet-card__price-area {
		display: flex !important;
		align-items: center !important;
		height: 100%;
	}

	.jg-pet-card__price,
	.jg-pet-card__sold {
		display: inline-flex !important;
		align-items: center !important;

		margin: 0 !important;

		line-height: 1 !important;

		transform: translateY(-2px);
	}

	.jg-pet-card__detail {
		align-self: center !important;
	}
}


/* ---------------------------------------------------------
   ハートを丸の完全中央へ
   PC・スマホ共通
   --------------------------------------------------------- */

.jg-favorite-button {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;

	line-height: 1 !important;
}


.jg-favorite-button__heart {
	position: absolute !important;

	top: 50% !important;
	left: 50% !important;

	display: block !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	line-height: 1 !important;

	transform:
		translate(-50%, -50%) !important;

	transform-origin:
		center center !important;
}


/* ---------------------------------------------------------
   お気に入りアニメーション時も
   中央位置を基準に拡大
   --------------------------------------------------------- */

.jg-favorite-button.is-celebrating
.jg-favorite-button__heart {
	animation:
		jgFavoriteHeartPopCentered
		.9s
		cubic-bezier(.17,1.55,.35,1)
		both !important;
}


@keyframes jgFavoriteHeartPopCentered {

	0% {
		transform:
			translate(-50%, -50%)
			scale(.65)
			rotate(0);
	}

	28% {
		transform:
			translate(-50%, -50%)
			scale(1.65)
			rotate(-8deg);
	}

	46% {
		transform:
			translate(-50%, -50%)
			scale(.9)
			rotate(5deg);
	}

	65% {
		transform:
			translate(-50%, -50%)
			scale(1.25)
			rotate(-2deg);
	}

	82% {
		transform:
			translate(-50%, -50%)
			scale(.98);
	}

	100% {
		transform:
			translate(-50%, -50%)
			scale(1);
	}
}


/* ---------------------------------------------------------
   お気に入り解除時も中央基準
   --------------------------------------------------------- */

.jg-favorite-button.is-removing
.jg-favorite-button__heart {
	animation:
		jgFavoriteRemoveCentered
		.7s
		cubic-bezier(.32,.05,.45,1)
		both !important;
}


@keyframes jgFavoriteRemoveCentered {

	0% {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			translateY(0)
			scale(1);
	}

	30% {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			translateY(-5px)
			scale(1.12);
	}

	72% {
		opacity: .7;

		transform:
			translate(-50%, -50%)
			translateY(-9px)
			scale(.82);
	}

	100% {
		opacity: .18;

		transform:
			translate(-50%, -50%)
			translateY(-12px)
			scale(.6);
	}
}


.jg-favorite-button.is-remove-settle
.jg-favorite-button__heart {
	animation:
		jgFavoriteOutlineReturnCentered
		.36s
		ease
		both !important;
}


@keyframes jgFavoriteOutlineReturnCentered {

	0% {
		opacity: 0;

		transform:
			translate(-50%, -50%)
			scale(.65);
	}

	65% {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			scale(1.1);
	}

	100% {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			scale(1);
	}
}
/* =========================================================
   Jade Grove STATUS TAB 強制最終調整
   必ず style.css の一番最後
   ========================================================= */


/* ---------------------------------------------------------
   PC版のみ
   --------------------------------------------------------- */

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

	/* タブ全体 */
	.entry-body .jg-status-tabs {
		position: relative !important;

		overflow: visible !important;

		z-index: 20 !important;

		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}


	/* 通常タブ */
	.entry-body .jg-status-tabs > a {
		position: relative !important;

		z-index: 1 !important;

		transform:
			translateY(0)
			scale(1) !important;

		transform-origin:
			center center !important;

		border-radius: 10px !important;

		transition:
			transform .28s cubic-bezier(.18,.85,.25,1),
			box-shadow .28s ease,
			border-radius .28s ease,
			background .28s ease !important;
	}


	/* =====================================================
	   選択中
	   1.2倍＋浮き上がり
	   ===================================================== */

	.entry-body .jg-status-tabs > a.is-active {
		z-index: 100 !important;

		transform:
			translateY(-7px)
			scale(1.2) !important;

		border: 0 !important;

		border-radius: 16px !important;

		outline: none !important;

		box-shadow:
			0 15px 30px rgba(55, 75, 48, .22),
			0 6px 12px rgba(55, 75, 48, .16),
			inset 0 1px 0 rgba(255,255,255,.30) !important;

		overflow: hidden !important;
	}


	/*
	 * 下に残る元の枠線・区切り線を隠すための
	 * 背面レイヤー
	 */
	.entry-body .jg-status-tabs > a.is-active::before {
		content: "" !important;

		position: absolute !important;

		z-index: -2 !important;

		top: -7px !important;
		right: -7px !important;
		bottom: -7px !important;
		left: -7px !important;

		border-radius: 19px !important;

		background: #ffffff !important;

		pointer-events: none !important;
	}


	/*
	 * active本体の色を再度前面に出す
	 */
	.entry-body .jg-status-tabs > a.is-active::after {
		content: "" !important;

		position: absolute !important;

		z-index: -1 !important;

		inset: 0 !important;

		border-radius: 16px !important;

		background: inherit !important;

		pointer-events: none !important;
	}


	/* ホバーしても1.2倍を維持 */
	.entry-body .jg-status-tabs > a.is-active:hover {
		transform:
			translateY(-9px)
			scale(1.2) !important;
	}
}


/* =========================================================
   お気に入り解除ボタン
   強制装飾
   ========================================================= */

.jg-filter-actions {
	display: flex !important;

	align-items: center !important;

	flex-wrap: wrap !important;

	gap: 10px !important;

	margin-top: 8px !important;
}


.jg-filter-actions .jg-filter-clear,
.jg-filter-actions .jg-favorite-clear {
	margin: 0 !important;
}


button.jg-favorite-clear {
	appearance: none !important;

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-height: 42px !important;

	padding: 9px 16px !important;

	border:
		1px solid #e3b8c1 !important;

	border-radius:
		12px !important;

	background:
		linear-gradient(
			180deg,
			#fffafb 0%,
			#fff0f3 100%
		) !important;

	color:
		#b75f70 !important;

	font-family:
		inherit !important;

	font-size:
		14px !important;

	font-weight:
		700 !important;

	line-height:
		1 !important;

	cursor:
		pointer !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,1),
		0 3px 8px rgba(130,78,88,.10) !important;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease !important;
}


button.jg-favorite-clear:hover {
	transform:
		translateY(-2px) !important;

	background:
		linear-gradient(
			180deg,
			#fff5f7,
			#ffe7ec
		) !important;

	box-shadow:
		0 7px 14px rgba(130,78,88,.14) !important;
}


button.jg-favorite-clear:active {
	transform:
		translateY(1px)
		scale(.98) !important;
}


/* =========================================================
   スマホは確定レイアウト維持
   ========================================================= */

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

	.entry-body .jg-status-tabs > a.is-active {
		transform: none !important;

		border-radius:
			10px !important;
	}


	.jg-filter-actions {
		gap:
			7px !important;
	}


	button.jg-favorite-clear {
		min-height:
			38px !important;

		padding:
			7px
			11px !important;

		font-size:
			11px !important;
	}
}
/* =========================================================
   ステータスタブ
   浮遊中の下地・区切り線を完全に隠す
   ========================================================= */

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

	/* -----------------------------------------------------
	   選択中ボタン
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active {
		position: relative !important;
		z-index: 100 !important;

		overflow: visible !important;

		transform:
			translateY(-7px)
			scale(1.2) !important;

		border: none !important;
		outline: none !important;

		border-radius: 16px !important;
	}


	/* -----------------------------------------------------
	   浮いたボタンの後ろに
	   タブ背景色のマスクを敷く

	   これで元の縦線・横線を隠す
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active::before {
		content: "" !important;

		position: absolute !important;

		z-index: -1 !important;

		top: -9px !important;
		right: -10px !important;
		bottom: -9px !important;
		left: -10px !important;

		background: #f8f5ef !important;

		border: none !important;
		border-radius: 20px !important;

		box-shadow: none !important;

		pointer-events: none !important;
	}


	/* 前回作った ::after は使わない */
	.entry-body .jg-status-tabs > a.is-active::after {
		display: none !important;
		content: none !important;
	}


	/* -----------------------------------------------------
	   選択中の左隣に残る区切り線を削除
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a:has(+ a.is-active) {
		border-right-color: transparent !important;

		box-shadow:
			inset 0 1px 0 rgba(255,255,255,.8) !important;
	}


	/* -----------------------------------------------------
	   選択中自身の右区切り線を削除
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active {
		border-right-color: transparent !important;
		border-left-color: transparent !important;
	}


	/* -----------------------------------------------------
	   選択中の右隣に左線がある場合も削除
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active + a {
		border-left-color: transparent !important;
	}


	/* -----------------------------------------------------
	   選択ボタン本体の影は前面に出す
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active {
		box-shadow:
			0 16px 30px rgba(55, 75, 48, .22),
			0 6px 12px rgba(55, 75, 48, .16),
			inset 0 1px 0 rgba(255,255,255,.30)
			!important;
	}
}
/* =========================================================
   Jade Grove STATUS TAB 修正版
   疑似レイヤーを使わず、色を維持して区切り線を隠す
   ========================================================= */

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

	/* -----------------------------------------------------
	   前回の白マスクを完全停止
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a.is-active::before,
	.entry-body .jg-status-tabs > a.is-active::after {
		content: none !important;
		display: none !important;
	}


	/* -----------------------------------------------------
	   タブ全体
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs {
		position: relative !important;
		overflow: visible !important;

		padding: 8px !important;

		border: 1px solid #ded8ce !important;
		border-radius: 18px !important;

		background: #f7f7f5 !important;
	}


	/* -----------------------------------------------------
	   通常ボタン
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a {
		position: relative !important;

		z-index: 1 !important;

		border-top: 0 !important;
		border-bottom: 0 !important;

		border-radius: 10px !important;

		background: transparent !important;

		transform: scale(1) !important;

		transition:
			transform .28s cubic-bezier(.2,.85,.25,1),
			box-shadow .28s ease,
			background .28s ease,
			color .28s ease !important;
	}


	/* -----------------------------------------------------
	   通常時の区切り線
	   ----------------------------------------------------- */

	.entry-body .jg-status-tabs > a:not(:last-child) {
		border-right:
			1px solid #ded8ce !important;
	}


	/* =====================================================
	   選択中
	   ===================================================== */

	.entry-body .jg-status-tabs > a.is-active {
		z-index: 100 !important;

		transform:
			translateY(-6px)
			scale(1.2) !important;

		border: 0 !important;

		border-radius:
			17px !important;

		color:
			#ffffff !important;

		/*
		 * 最初の大きな薄色シャドウが
		 * 下の区切り線を覆う役割
		 */
		box-shadow:
			0 0 0 9px #f7f7f5,
			0 16px 28px rgba(55,75,48,.20),
			0 6px 11px rgba(55,75,48,.13),
			inset 0 1px 0 rgba(255,255,255,.30)
			!important;
	}


	/* -----------------------------------------------------
	   すべて
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active[data-status-name="すべて"] {
		background:
			linear-gradient(
				180deg,
				#6d9461 0%,
				#557e4b 100%
			) !important;
	}


	/* -----------------------------------------------------
	   販売中
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active[data-status-name="販売中"] {
		background:
			linear-gradient(
				180deg,
				#6d9461 0%,
				#557e4b 100%
			) !important;
	}


	/* -----------------------------------------------------
	   予約可能
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active[data-status-name="予約可能"] {
		background:
			linear-gradient(
				180deg,
				#89aec2 0%,
				#6f93a8 100%
			) !important;

		box-shadow:
			0 0 0 9px #f7f7f5,
			0 16px 28px rgba(80,120,145,.19),
			0 6px 11px rgba(80,120,145,.12),
			inset 0 1px 0 rgba(255,255,255,.30)
			!important;
	}


	/* -----------------------------------------------------
	   商談中
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active[data-status-name="商談中"] {
		background:
			linear-gradient(
				180deg,
				#d9a16e 0%,
				#c58a55 100%
			) !important;

		box-shadow:
			0 0 0 9px #f7f7f5,
			0 16px 28px rgba(165,105,55,.18),
			0 6px 11px rgba(165,105,55,.11),
			inset 0 1px 0 rgba(255,255,255,.30)
			!important;
	}


	/* -----------------------------------------------------
	   ご家族様決定
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active[data-status-name="ご家族様決定"] {
		background:
			linear-gradient(
				180deg,
				#ca9090 0%,
				#b97878 100%
			) !important;

		box-shadow:
			0 0 0 9px #f7f7f5,
			0 16px 28px rgba(155,90,90,.18),
			0 6px 11px rgba(155,90,90,.11),
			inset 0 1px 0 rgba(255,255,255,.30)
			!important;
	}


	/* =====================================================
	   選択中周辺の縦線を削除
	   ===================================================== */

	/* 選択中自身 */
	.entry-body .jg-status-tabs > a.is-active {
		border-left-color:
			transparent !important;

		border-right-color:
			transparent !important;
	}


	/* 選択中の左隣 */
	.entry-body
	.jg-status-tabs
	> a:has(+ a.is-active) {
		border-right-color:
			transparent !important;
	}


	/* 選択中の右隣 */
	.entry-body
	.jg-status-tabs
	> a.is-active + a {
		border-left-color:
			transparent !important;
	}


	/* -----------------------------------------------------
	   hover
	   ----------------------------------------------------- */

	.entry-body
	.jg-status-tabs
	> a.is-active:hover {
		transform:
			translateY(-8px)
			scale(1.2) !important;
	}
}


/* =========================================================
   スマホは現在の確定デザインを維持
   ========================================================= */

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

	.entry-body .jg-status-tabs > a.is-active {
		transform: none !important;
	}
}
/* =========================================================
   Jade Grove 個体詳細ページ
   ========================================================= */


/* ---------------------------------------------------------
   全体
   --------------------------------------------------------- */

.jg-pet-detail {
	--jg-green: #5d8754;
	--jg-green-dark: #456d3f;
	--jg-green-soft: #eef5eb;

	--jg-beige: #fbf8f1;
	--jg-border: #e5ddd0;

	--jg-blue: #70a8cc;
	--jg-pink: #d98091;

	--jg-family: #c98282;
	--jg-family-soft: #fff1f1;

	--jg-reservation: #7fa8bd;
	--jg-negotiation: #c79663;

	width: min(1180px, calc(100% - 40px));

	margin: 0 auto;

	padding:
		42px
		0
		80px;

	color: #34332f;
}


/* ---------------------------------------------------------
   一覧へ戻る
   --------------------------------------------------------- */

.jg-pet-detail__top {
	margin-bottom: 20px;
}


.jg-pet-detail__back {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	color: #65705f;

	font-size: 14px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		color .2s ease,
		transform .2s ease;
}


.jg-pet-detail__back:hover {
	color: var(--jg-green-dark);

	transform: translateX(-3px);
}


/* =========================================================
   HERO
   ========================================================= */

.jg-pet-detail__hero {
	display: grid;

	grid-template-columns:
		minmax(0, 1.15fr)
		minmax(360px, .85fr);

	gap: 38px;

	align-items: start;
}


/* =========================================================
   写真
   ========================================================= */

.jg-pet-detail__gallery {
	min-width: 0;
}


.jg-pet-detail__main-image {
	position: relative;

	width: 100%;

	aspect-ratio: 1.25 / 1;

	overflow: hidden;

	border-radius: 24px;

	background: #f1eee7;

	box-shadow:
		0 16px 38px rgba(57, 51, 43, .10);
}


.jg-pet-detail__main-image img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;

	transition:
		opacity .2s ease,
		transform .35s ease;
}


.jg-pet-detail__main-image:hover img {
	transform: scale(1.015);
}


/* ---------------------------------------------------------
   サムネイル
   --------------------------------------------------------- */

.jg-pet-detail__thumbs {
	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap: 10px;

	margin-top: 12px;
}


.jg-pet-detail__thumb {
	appearance: none;

	position: relative;

	width: 100%;

	aspect-ratio: 1 / 1;

	padding: 0;

	overflow: hidden;

	border:
		2px solid transparent;

	border-radius: 13px;

	background: #eee;

	cursor: pointer;

	opacity: .72;

	transition:
		opacity .2s ease,
		transform .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}


.jg-pet-detail__thumb img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.jg-pet-detail__thumb:hover {
	opacity: 1;

	transform: translateY(-2px);
}


.jg-pet-detail__thumb.is-active {
	opacity: 1;

	border-color: var(--jg-green);

	box-shadow:
		0 4px 10px rgba(67, 107, 61, .18);
}


/* =========================================================
   右側情報カード
   ========================================================= */

.jg-pet-detail__summary {
	position: sticky;

	top: 90px;

	padding:
		26px
		27px
		28px;

	border:
		1px solid var(--jg-border);

	border-radius: 24px;

	background:
		linear-gradient(
			180deg,
			#fffdf9 0%,
			#fbf8f1 100%
		);

	box-shadow:
		0 14px 34px rgba(61, 53, 44, .08);
}


/* ---------------------------------------------------------
   ステータス＋ハート
   --------------------------------------------------------- */

.jg-pet-detail__summary-top {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-bottom: 14px;
}


.jg-pet-detail__status {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 34px;

	padding:
		6px
		14px;

	border-radius: 999px;

	background: var(--jg-green);

	color: #fff;

	font-size: 13px;
	font-weight: 700;

	box-shadow:
		0 4px 10px rgba(74, 112, 68, .18);
}


/* ステータス色 */

.jg-pet-detail[data-status="reservation"]
.jg-pet-detail__status {
	background: var(--jg-reservation);
}


.jg-pet-detail[data-status="negotiation"]
.jg-pet-detail__status {
	background: var(--jg-negotiation);
}


.jg-pet-detail[data-status="family"]
.jg-pet-detail__status {
	background: var(--jg-family);
}


/* ---------------------------------------------------------
   お気に入り
   --------------------------------------------------------- */

.jg-detail-favorite {
	appearance: none;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	padding: 0;

	border:
		1px solid #d8d2c9;

	border-radius: 50%;

	background:
		linear-gradient(
			180deg,
			#ffffff,
			#f8f6f1
		);

	color: #666;

	font-size: 29px;

	line-height: 1;

	cursor: pointer;

	box-shadow:
		0 5px 11px rgba(50, 45, 38, .10),
		inset 0 1px 0 #fff;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		color .2s ease,
		background .2s ease;
}


.jg-detail-favorite:hover {
	transform: translateY(-2px) scale(1.04);

	box-shadow:
		0 8px 17px rgba(50, 45, 38, .13);
}


.jg-detail-favorite.is-favorite {
	color: #e45c75;

	background:
		linear-gradient(
			180deg,
			#fffafa,
			#fff0f3
		);

	border-color: #efc3cb;
}


.jg-detail-favorite.is-pop {
	animation:
		jgDetailHeartPop
		.65s
		cubic-bezier(.17,1.55,.35,1);
}


@keyframes jgDetailHeartPop {

	0% {
		transform: scale(.72);
	}

	35% {
		transform: scale(1.35) rotate(-7deg);
	}

	62% {
		transform: scale(.92) rotate(4deg);
	}

	82% {
		transform: scale(1.12);
	}

	100% {
		transform: scale(1);
	}
}


/* =========================================================
   ID / タイトル
   ========================================================= */

.jg-pet-detail__id {
	min-height: 20px;

	margin:
		0
		0
		7px;

	color: #8a887f;

	font-size: 14px;
	font-weight: 500;

	letter-spacing: .02em;
}


.jg-pet-detail__id.is-empty {
	visibility: hidden;
}


.jg-pet-detail__title {
	margin:
		0
		0
		8px !important;

	color: #292a26;

	font-size: clamp(
		30px,
		3vw,
		43px
	) !important;

	font-weight: 800 !important;

	line-height: 1.2 !important;

	letter-spacing: -.03em;
}


.jg-pet-detail__morph {
	margin:
		0
		0
		23px;

	color: var(--jg-green-dark);

	font-size: 18px;

	font-weight: 700;
}


/* =========================================================
   基本情報
   ========================================================= */

.jg-pet-detail__facts {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	border:
		1px solid var(--jg-border);

	border-radius: 17px;

	overflow: hidden;

	background: #fff;

	margin-top: 21px;
}


.jg-pet-detail__fact {
	min-width: 0;

	padding:
		15px
		16px;

	border-bottom:
		1px solid #eee8df;
}


.jg-pet-detail__fact:nth-child(odd) {
	border-right:
		1px solid #eee8df;
}


.jg-pet-detail__fact:nth-last-child(-n+2) {
	border-bottom: 0;
}


.jg-pet-detail__fact span {
	display: block;

	margin-bottom: 4px;

	color: #89857d;

	font-size: 11px;
	font-weight: 600;
}


.jg-pet-detail__fact strong {
	display: block;

	color: #34332f;

	font-size: 15px;

	font-weight: 700;

	line-height: 1.4;
}


.jg-pet-detail__fact strong.is-male {
	color: #4c94c5;
}


.jg-pet-detail__fact strong.is-female {
	color: #d46f83;
}


/* =========================================================
   価格＋問い合わせ
   ========================================================= */

.jg-pet-detail__bottom {
	margin-top: 25px;
}


.jg-pet-detail__price {
	display: flex;

	align-items: baseline;

	gap: 7px;

	margin-bottom: 18px;

	color: var(--jg-green-dark);

	font-size: 36px;

	font-weight: 800;

	line-height: 1;
}


.jg-pet-detail__price small {
	color: #87837a;

	font-size: 12px;

	font-weight: 500;
}


.jg-pet-detail__price.is-sold {
	color: var(--jg-family);

	letter-spacing: .04em;
}


.jg-pet-detail__contact {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	width: 100%;

	min-height: 58px;

	padding:
		12px
		18px;

	border:
		1px solid var(--jg-green-dark);

	border-radius: 14px;

	background:
		linear-gradient(
			180deg,
			#638d59 0%,
			#527b49 100%
		);

	color: #fff !important;

	font-size: 15px;

	font-weight: 700;

	text-align: center;

	text-decoration: none !important;

	box-shadow:
		0 7px 16px rgba(63, 99, 58, .20),
		inset 0 1px 0 rgba(255,255,255,.22);

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}


.jg-pet-detail__contact span {
	font-size: 20px;

	transition:
		transform .2s ease;
}


.jg-pet-detail__contact:hover {
	transform: translateY(-2px);

	box-shadow:
		0 11px 22px rgba(63, 99, 58, .24);
}


.jg-pet-detail__contact:hover span {
	transform: translateX(3px);
}


/* =========================================================
   安心ポイント3つ
   ========================================================= */

.jg-pet-detail__support {
	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	gap: 15px;

	margin-top: 50px;
}


.jg-pet-detail__support > div {
	position: relative;

	padding:
		24px
		22px;

	border:
		1px solid var(--jg-border);

	border-radius: 18px;

	background:
		#fffdf9;

	box-shadow:
		0 8px 20px rgba(56, 50, 43, .05);
}


.jg-pet-detail__support span {
	display: block;

	margin-bottom: 13px;

	color: var(--jg-green);

	font-size: 12px;

	font-weight: 800;

	letter-spacing: .1em;
}


.jg-pet-detail__support strong {
	display: block;

	margin-bottom: 9px;

	color: #33322e;

	font-size: 17px;
}


.jg-pet-detail__support p {
	margin: 0;

	color: #777269;

	font-size: 13px;

	line-height: 1.8;
}


/* =========================================================
   下部CTA
   ========================================================= */

.jg-pet-detail__cta {
	margin-top: 50px;

	padding:
		42px
		30px;

	border:
		1px solid #dae6d5;

	border-radius: 25px;

	background:
		linear-gradient(
			135deg,
			#f3f8f0 0%,
			#fffdf8 58%,
			#f8f3e9 100%
		);

	text-align: center;

	box-shadow:
		0 12px 28px rgba(60, 70, 50, .06);
}


.jg-pet-detail__cta > p {
	margin:
		0
		0
		8px;

	color: var(--jg-green);

	font-size: 12px;

	font-weight: 800;

	letter-spacing: .15em;
}


.jg-pet-detail__cta h2 {
	margin:
		0
		0
		10px;

	color: #30312d;

	font-size: 30px;
}


.jg-pet-detail__cta > span {
	display: block;

	color: #757168;

	font-size: 14px;
}


.jg-pet-detail__cta-buttons {
	display: flex;

	justify-content: center;

	gap: 12px;

	max-width: 630px;

	margin:
		25px
		auto
		0;
}


.jg-pet-detail__cta-buttons
.jg-pet-detail__contact {
	width: auto;

	flex: 1.2;
}


.jg-pet-detail__back-button {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: .8;

	min-height: 58px;

	padding:
		12px
		18px;

	border:
		1px solid #a9bca4;

	border-radius: 14px;

	background: #fff;

	color: var(--jg-green-dark) !important;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none !important;

	transition:
		transform .2s ease,
		background .2s ease;
}


.jg-pet-detail__back-button:hover {
	transform: translateY(-2px);

	background: #f5f8f3;
}


/* =========================================================
   前後の個体
   ========================================================= */

.jg-pet-detail__neighbors {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 16px;

	margin-top: 35px;
}


.jg-pet-detail__neighbors a {
	display: flex;

	flex-direction: column;

	gap: 5px;

	min-width: 0;

	padding:
		17px
		19px;

	border:
		1px solid var(--jg-border);

	border-radius: 14px;

	background: #fff;

	color: #44413b !important;

	text-decoration: none !important;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}


.jg-pet-detail__neighbors a:hover {
	transform: translateY(-2px);

	border-color: #b9cbb4;

	box-shadow:
		0 7px 16px rgba(60, 65, 50, .07);
}


.jg-pet-detail__neighbors small {
	color: #878279;

	font-size: 11px;
}


.jg-pet-detail__neighbors strong {
	overflow: hidden;

	font-size: 13px;

	white-space: nowrap;

	text-overflow: ellipsis;
}


/* =========================================================
   SOLD / ご家族様決定
   ========================================================= */

.jg-pet-detail[data-status="family"]
.jg-pet-detail__summary {
	border-color: #e7bebe;

	background:
		linear-gradient(
			180deg,
			#fffafa,
			#fff6f4
		);
}


.jg-pet-detail[data-status="family"]
.jg-pet-detail__contact {
	border-color: #bd7e7e;

	background:
		linear-gradient(
			180deg,
			#c98a8a,
			#b87373
		);

	box-shadow:
		0 7px 16px rgba(150, 90, 90, .18);
}


/* =========================================================
   スマホ
   ========================================================= */

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

	.jg-pet-detail {
		width:
			calc(100% - 28px);

		padding:
			25px
			0
			55px;
	}


	.jg-pet-detail__top {
		margin-bottom: 14px;
	}


	.jg-pet-detail__back {
		font-size: 12px;
	}


	/* HERO */

	.jg-pet-detail__hero {
		display: flex;

		flex-direction: column;

		gap: 18px;
	}


	/* 写真 */

	.jg-pet-detail__main-image {
		aspect-ratio: 1.12 / 1;

		border-radius: 18px;
	}


	.jg-pet-detail__thumbs {
		display: flex;

		gap: 8px;

		overflow-x: auto;

		padding-bottom: 3px;

		scrollbar-width: none;
	}


	.jg-pet-detail__thumbs::-webkit-scrollbar {
		display: none;
	}


	.jg-pet-detail__thumb {
		flex:
			0
			0
			67px;

		width: 67px;

		border-radius: 10px;
	}


	/* 情報カード */

	.jg-pet-detail__summary {
		position: static;

		width: 100%;

		padding:
			20px
			18px
			21px;

		border-radius: 19px;

		box-shadow:
			0 9px 22px rgba(61, 53, 44, .07);
	}


	.jg-pet-detail__summary-top {
		margin-bottom: 10px;
	}


	.jg-pet-detail__status {
		min-height: 30px;

		padding:
			5px
			12px;

		font-size: 11px;
	}


	.jg-detail-favorite {
		width: 40px;
		height: 40px;

		font-size: 25px;
	}


	/* ID */

	.jg-pet-detail__id {
		margin-bottom: 4px;

		font-size: 12px;
	}


	/* タイトル */

	.jg-pet-detail__title {
		font-size:
			29px !important;
	}


	.jg-pet-detail__morph {
		margin-bottom: 17px;

		font-size: 15px;
	}


	/* 情報 */

	.jg-pet-detail__facts {
		grid-template-columns:
			1fr
			1fr;

		border-radius: 14px;
	}


	.jg-pet-detail__fact {
		padding:
			12px
			11px;
	}


	.jg-pet-detail__fact span {
		font-size: 9px;
	}


	.jg-pet-detail__fact strong {
		font-size: 12px;
	}


	/* 価格 */

	.jg-pet-detail__price {
		margin-bottom: 14px;

		font-size: 31px;
	}


	.jg-pet-detail__contact {
		min-height: 53px;

		padding:
			10px
			12px;

		border-radius: 12px;

		font-size: 13px;
	}


	/* 安心ポイント */

	.jg-pet-detail__support {
		grid-template-columns:
			1fr;

		gap: 10px;

		margin-top: 25px;
	}


	.jg-pet-detail__support > div {
		padding:
			18px
			17px;
	}


	.jg-pet-detail__support span {
		margin-bottom: 7px;

		font-size: 10px;
	}


	.jg-pet-detail__support strong {
		margin-bottom: 5px;

		font-size: 15px;
	}


	.jg-pet-detail__support p {
		font-size: 12px;

		line-height: 1.7;
	}


	/* 下CTA */

	.jg-pet-detail__cta {
		margin-top: 27px;

		padding:
			29px
			17px;

		border-radius: 20px;
	}


	.jg-pet-detail__cta h2 {
		font-size: 23px;
	}


	.jg-pet-detail__cta > span {
		font-size: 12px;

		line-height: 1.7;
	}


	.jg-pet-detail__cta-buttons {
		flex-direction: column;

		gap: 8px;

		margin-top: 19px;
	}


	.jg-pet-detail__cta-buttons
	.jg-pet-detail__contact,
	.jg-pet-detail__back-button {
		width: 100%;

		flex: auto;

		min-height: 50px;
	}


	/* 前後 */

	.jg-pet-detail__neighbors {
		grid-template-columns:
			1fr;

		gap: 8px;

		margin-top: 22px;
	}

}


/* =========================================================
   極小スマホ
   ========================================================= */

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

	.jg-pet-detail {
		width:
			calc(100% - 22px);
	}


	.jg-pet-detail__summary {
		padding:
			18px
			14px;
	}


	.jg-pet-detail__facts {
		grid-template-columns:
			1fr;
	}


	.jg-pet-detail__fact,
	.jg-pet-detail__fact:nth-child(odd) {
		border-right: 0;
		border-bottom:
			1px solid #eee8df;
	}


	.jg-pet-detail__fact:last-child {
		border-bottom: 0;
	}


	.jg-pet-detail__price {
		font-size: 28px;
	}
}
/* =========================================================
   生体カード footer 最終調整
   ========================================================= */

.jg-pet-card__footer {
	display: grid !important;

	grid-template-columns:
		minmax(0, 1fr)
		auto !important;

	align-items: center !important;

	column-gap: 8px !important;

	min-width: 0 !important;
}


.jg-pet-card__price-area {
	display: flex !important;

	align-items: center !important;

	min-width: 0 !important;

	overflow: visible !important;
}


.jg-pet-card__price,
.jg-pet-card__sold {
	display: block !important;

	max-width: 100%;

	margin: 0 !important;

	white-space: nowrap !important;
}


.jg-pet-card__detail {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	flex-shrink: 0 !important;

	white-space: nowrap !important;
}


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

	.jg-pet-card__price,
	.jg-pet-card__sold {
		font-size:
			clamp(
				18px,
				1.55vw,
				24px
			) !important;

		line-height: 1 !important;
	}


	.jg-pet-card__detail {
		min-height: 34px !important;

		padding:
			6px
			10px !important;

		font-size:
			11px !important;
	}


	.jg-pet-card__footer {
		min-height:
			48px !important;
	}
}


/*
 * 中間幅ではさらに少しコンパクトに
 */
@media screen
	and (min-width: 768px)
	and (max-width: 1150px) {

	.jg-pet-card__price,
	.jg-pet-card__sold {
		font-size:
			18px !important;
	}


	.jg-pet-card__detail {
		padding:
			5px
			7px !important;

		font-size:
			9px !important;
	}
}
/* =========================================================
   フィルター下部
   ========================================================= */

.jg-filter-footer {
	display: flex !important;

	align-items: flex-end !important;
	justify-content: space-between !important;

	gap: 18px !important;

	margin-top: 9px !important;
}


.jg-filter-footer .jg-filter-actions {
	flex:
		0
		1
		auto;
}


/* =========================================================
   お気に入りまとめ問い合わせ
   ⑤ やさしいピンク
   ========================================================= */

.jg-favorite-inquiry {
	appearance: none !important;

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	gap: 7px !important;

	flex:
		0
		0
		auto;

	width: auto !important;

	min-width: 300px !important;
	min-height: 46px !important;

	padding:
		9px
		15px !important;

	border:
		1px solid #e7b6c0 !important;

	border-radius:
		13px !important;

	background:
		linear-gradient(
			180deg,
			#fffafb 0%,
			#fff0f3 100%
		) !important;

	color:
		#b85f70 !important;

	font-family:
		inherit !important;

	font-size:
		13px !important;

	font-weight:
		700 !important;

	line-height:
		1.2 !important;

	cursor:
		pointer !important;

	box-shadow:
		inset 0 1px 0
			rgba(255,255,255,1),
		0 4px 10px
			rgba(155,86,100,.09)
		!important;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease,
		opacity .18s ease
		!important;
}


.jg-favorite-inquiry__heart {
	color:
		#d66f83;

	font-size:
		18px;

	line-height: 1;
}


.jg-favorite-inquiry__arrow {
	margin-left:
		2px;

	font-size:
		18px;

	line-height:
		1;

	transition:
		transform .18s ease;
}


/* 有効時 */

.jg-favorite-inquiry.is-enabled:hover {
	transform:
		translateY(-2px);

	background:
		linear-gradient(
			180deg,
			#fff6f8,
			#ffe9ee
		) !important;

	box-shadow:
		inset 0 1px 0 #fff,
		0 7px 15px
			rgba(155,86,100,.13)
		!important;
}


.jg-favorite-inquiry.is-enabled:hover
.jg-favorite-inquiry__arrow {
	transform:
		translateX(3px);
}


.jg-favorite-inquiry.is-enabled:active {
	transform:
		translateY(0)
		scale(.985);
}


/* お気に入り0件 */

.jg-favorite-inquiry:disabled {
	opacity:
		.45 !important;

	cursor:
		default !important;

	transform:
		none !important;

	box-shadow:
		none !important;
}


/* =========================================================
   スマホ
   ========================================================= */

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

	.jg-filter-footer {
		flex-direction: column !important;

		align-items: stretch !important;

		gap: 12px !important;
	}


	.jg-filter-footer .jg-filter-actions {
		width: 100%;
	}


	.jg-favorite-inquiry {
		align-self:
			flex-end;

		min-width:
			0 !important;

		width:
			100% !important;

		min-height:
			43px !important;

		padding:
			8px
			12px !important;

		font-size:
			11px !important;
	}
}
/* =========================================================
   Jade Grove
   ステータス5ボタン 最終パステルカラー強制上書き
   2026-08-22
   ========================================================= */

/*
 * 正式カラー
 *
 * 販売中           #BFE7C6
 * 予約可能         #FFE08A
 * 商談中           #A9D7F7
 * ご家族様決定     #F7B7CF
 *
 * 選択時も色は変えず、
 * 少し大きく＋影だけ追加する
 */


/* =========================================================
   共通
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a {

	position: relative !important;

	box-sizing: border-box !important;

	border-radius: 18px !important;

	text-decoration: none !important;

	font-weight: 700 !important;

	filter: none !important;

	text-shadow: none !important;

	opacity: 1 !important;

	transition:
		transform .18s ease,
		box-shadow .18s ease !important;
}


/*
 * 過去CSSの疑似要素を無効化
 * 今回は背景そのもので配色する
 */

html body
.jg-pet-list
.jg-status-tabs > a::before,

html body
.jg-pet-list
.jg-status-tabs > a::after {

	content: none !important;
}


/* =========================================================
   1. すべて
   白背景＋4色フレーム
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:first-child,

html body
.jg-pet-list
.jg-status-tabs > a:first-child:hover,

html body
.jg-pet-list
.jg-status-tabs > a:first-child.is-active {

	color: #292929 !important;

	border: 3px solid transparent !important;

	background:

		linear-gradient(
			#FFFFFF,
			#FFFFFF
		)
		padding-box,

		conic-gradient(
			from 315deg,

			#BFE7C6 0deg 90deg,

			#F7B7CF 90deg 180deg,

			#A9D7F7 180deg 270deg,

			#FFE08A 270deg 360deg
		)
		border-box !important;
}


/* =========================================================
   2. 販売中
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(2),

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(2):hover,

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(2).is-active {

	background: #F8FCF5 !important;

	border:
		2px solid
		#BFE7C6 !important;

	color:
		#2F9948 !important;
}


/* =========================================================
   3. 予約可能
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(3),

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(3):hover,

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(3).is-active {

	background: #FDF8EC !important;

	border:
		2px solid
		#FFE08A !important;

	color:
		#F39800 !important;
}


/* =========================================================
   4. 商談中
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(4),

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(4):hover,

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(4).is-active {

	background: #EFF5FC !important;

	border:
		2px solid
		#A9D7F7 !important;

	color:
		#1678C2 !important;
}


/* =========================================================
   5. ご家族様決定
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(5),

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(5):hover,

html body
.jg-pet-list
.jg-status-tabs > a:nth-child(5).is-active {

	background: #FCF4F6 !important;

	border:
		2px solid
		#F7B7CF !important;

	color:
		#EE5B7C !important;
}


/* =========================================================
   選択中
   背景色は変更しない
   浮き上がるだけ
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a.is-active {

	z-index: 10 !important;

	transform:
		translateY(-4px)
		scale(1.055) !important;

	box-shadow:
		0 11px 24px
		rgba(78, 69, 57, .14) !important;
}


/*
 * 「すべて」選択時も絶対に濃い緑に戻さない
 */

html body
.jg-pet-list
.jg-status-tabs > a:first-child.is-active {

	color: #292929 !important;

	border: 3px solid transparent !important;

	background:

		linear-gradient(
			#FFFFFF,
			#FFFFFF
		)
		padding-box,

		conic-gradient(
			from 315deg,

			#BFE7C6 0deg 90deg,

			#F7B7CF 90deg 180deg,

			#A9D7F7 180deg 270deg,

			#FFE08A 270deg 360deg
		)
		border-box !important;
}


/* =========================================================
   キーボード操作時だけフォーカスを表示
   ========================================================= */

html body
.jg-pet-list
.jg-status-tabs > a:focus-visible {

	outline:
		3px solid
		rgba(80, 125, 78, .22) !important;

	outline-offset:
		3px !important;
}
/* =========================================================
   予約可能・商談中・ご家族様決定
   選択時の白い外枠だけ削除
   ========================================================= */

/* 予約可能 */
html body
.jg-pet-list
.jg-status-tabs > a:nth-child(3).is-active {

	outline: none !important;

	box-shadow:
		0 10px 22px
		rgba(210, 170, 70, .16) !important;
}


/* 商談中 */
html body
.jg-pet-list
.jg-status-tabs > a:nth-child(4).is-active {

	outline: none !important;

	box-shadow:
		0 10px 22px
		rgba(80, 145, 195, .16) !important;
}


/* ご家族様決定 */
html body
.jg-pet-list
.jg-status-tabs > a:nth-child(5).is-active {

	outline: none !important;

	box-shadow:
		0 10px 22px
		rgba(205, 105, 140, .15) !important;
}
/* =========================================================
   Jade Grove
   個体詳細ページ 正式パステルカラー
   一覧ページには影響させない
   ========================================================= */


/* =========================================================
   販売中
   GREEN #BFE7C6
   ========================================================= */

html body
.jg-pet-detail.is-sale
.jg-pet-detail__summary {
	border-color: #BFE7C6 !important;

	background:
		linear-gradient(
			180deg,
			rgba(191, 231, 198, .13) 0%,
			#FFFDF8 32%
		) !important;
}

html body
.jg-pet-detail.is-sale
.jg-pet-detail__status {
	background: #BFE7C6 !important;
	color: #34824A !important;
	border-color: #BFE7C6 !important;
}

html body
.jg-pet-detail.is-sale
.jg-pet-detail__fact:last-child strong {
	color: #34824A !important;
}


/* =========================================================
   予約可能
   YELLOW #FFE08A
   ========================================================= */

html body
.jg-pet-detail.is-reservation
.jg-pet-detail__summary {
	border-color: #FFE08A !important;

	background:
		linear-gradient(
			180deg,
			rgba(255, 224, 138, .16) 0%,
			#FFFDF8 32%
		) !important;
}

html body
.jg-pet-detail.is-reservation
.jg-pet-detail__status {
	background: #FFE08A !important;
	color: #C77B00 !important;
	border-color: #FFE08A !important;
}

html body
.jg-pet-detail.is-reservation
.jg-pet-detail__fact:last-child strong {
	color: #C77B00 !important;
}


/* =========================================================
   商談中
   BLUE #A9D7F7
   ========================================================= */

html body
.jg-pet-detail.is-negotiation
.jg-pet-detail__summary {
	border-color: #A9D7F7 !important;

	background:
		linear-gradient(
			180deg,
			rgba(169, 215, 247, .16) 0%,
			#FFFDF8 32%
		) !important;
}

html body
.jg-pet-detail.is-negotiation
.jg-pet-detail__status {
	background: #A9D7F7 !important;
	color: #2379BA !important;
	border-color: #A9D7F7 !important;
}

html body
.jg-pet-detail.is-negotiation
.jg-pet-detail__fact:last-child strong {
	color: #2379BA !important;
}


/* =========================================================
   ご家族様決定
   PINK #F7B7CF
   ========================================================= */

html body
.jg-pet-detail.is-family
.jg-pet-detail__summary {
	border-color: #F7B7CF !important;

	background:
		linear-gradient(
			180deg,
			rgba(247, 183, 207, .16) 0%,
			#FFFDF8 32%
		) !important;
}

html body
.jg-pet-detail.is-family
.jg-pet-detail__status {
	background: #F7B7CF !important;
	color: #D45C7D !important;
	border-color: #F7B7CF !important;
}

html body
.jg-pet-detail.is-family
.jg-pet-detail__fact:last-child strong {
	color: #D45C7D !important;
}

html body
.jg-pet-detail.is-family
.jg-pet-detail__price.is-sold strong {
	color: #D45C7D !important;
}
/* =========================================================
   性別フィルター：不明
   Pastel Purple
   ========================================================= */

.jg-filter-chip--unknown {

	color:
		#745A9B !important;

	border-color:
		#D9C7F2 !important;

	background:
		#F8F4FC !important;
}


.jg-filter-chip--unknown:hover {

	color:
		#745A9B !important;

	border-color:
		#D9C7F2 !important;

	background:
		#F1EAF9 !important;
}


.jg-filter-chip--unknown.is-active {

	color:
		#684C91 !important;

	border-color:
		#CDB5EC !important;

	background:
		#D9C7F2 !important;

	box-shadow:
		0 5px 12px
		rgba(116, 90, 155, .12) !important;
}
/* =========================================================
   性別フィルター：不明
   非選択時は他ボタンと統一
   選択時だけパープル
   ========================================================= */

.jg-filter-chip--unknown {

	color:
		#2F2F2F !important;

	border-color:
		#E6E1DA !important;

	background:
		#FFFFFF !important;

	box-shadow:
		0 2px 6px
		rgba(70, 60, 50, .05) !important;
}


.jg-filter-chip--unknown:hover {

	color:
		#745A9B !important;

	border-color:
		#D9C7F2 !important;

	background:
		#FCFAFE !important;
}


.jg-filter-chip--unknown.is-active {

	color:
		#684C91 !important;

	border-color:
		#D9C7F2 !important;

	background:
		#F1EAF9 !important;

	box-shadow:
		0 5px 12px
		rgba(116, 90, 155, .12) !important;
}
/* =========================================================
   ステータスボタン
   スマホでは5個すべて画面内に収める
   PCには影響なし
   ========================================================= */

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

	.jg-pet-list .jg-status-tabs {
		display: grid !important;
		grid-template-columns:
			0.88fr
			0.90fr
			1fr
			0.90fr
			1.37fr !important;

		width: 100% !important;
		max-width: 100% !important;

		gap: 2px !important;

		padding: 6px !important;

		box-sizing: border-box !important;

		overflow: visible !important;
	}


	.jg-pet-list .jg-status-tabs > a {
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;

		margin: 0 !important;

		padding:
			0 3px !important;

		font-size:
			clamp(9px, 2.8vw, 12px) !important;

		letter-spacing:
			-.03em !important;

		white-space:
			nowrap !important;

		text-align:
			center !important;

		justify-content:
			center !important;
	}


	/* ご家族様決定だけ文字数が多いので少しだけ小さく */
	.jg-pet-list
	.jg-status-tabs > a:nth-child(5) {
		font-size:
			clamp(8.5px, 2.55vw, 11px) !important;
	}


	/*
	 * PCの「選択時に少し大きく浮く」は維持しつつ
	 * スマホでは横にはみ出さない程度に縮小
	 */
	.jg-pet-list
	.jg-status-tabs > a.is-active {
		transform:
			translateY(-3px)
			scale(1.025) !important;
	}


	.jg-pet-list
	.jg-status-tabs > a:first-child.is-active {
		transform-origin:
			left center !important;
	}


	.jg-pet-list
	.jg-status-tabs > a:last-child.is-active {
		transform-origin:
			right center !important;
	}

}
/* =========================================================
   Jade Grove
   フィルターボタン 選択時チェックマーク完全非表示
   PC / スマホ共通
   ========================================================= */

.jg-filter-chip.is-active::before,
.jg-filter-chip.is-active::after {
	content: none !important;
	display: none !important;
}


/* チェック用要素がHTML内にある場合も非表示 */

.jg-filter-chip.is-active .jg-filter-check,
.jg-filter-chip.is-active .jg-check,
.jg-filter-chip.is-active .checkmark {
	display: none !important;
}
/* =========================================================
   生体一覧ページのみ
   WordPress標準タイトル・パンくずを非表示
   Page ID: 2679
   ========================================================= */

body.page-id-2679 .page-header {
	display: none !important;
}

body.page-id-2679 #breadcrumb {
	display: none !important;
}