@charset "utf-8";

/* ==========================================================================
   アグロ部門 リニューアル：製品カタログ用（既存干渉リセット付き）
   ========================================================================== */

/* 1. メインビジュアル */
.agro-hero-image {
	width: 100%;
	height: 200px;
	background-size: cover;                        
	background-position: center;
	color: white;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	margin-bottom: 25px;
	text-align: center;
	box-sizing: border-box;
	padding: 0 10px;
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
}
.agro-hero-image#main {  background-image: url("../img/agro-main.jpg"); }
.agro-hero-image#shiba {  background-image: url("../img/agro-shiba-main.jpg"); }
.agro-hero-image#kinoko {  background-image: url("../img/agro-kinoko-main.jpg"); }

.agro-hero-image h3.hero-title {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	font-size: 1.8rem !important;
	font-weight: bold !important;
	color: #fff !important;
	line-height: 1.2 !important;
	background: transparent !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 2. 絞り込み検索コンテナ */
.catalog-filter-container {
	background: #fdfdfa;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 25px;
	border: 1px solid #dfd9ca;
	box-sizing: border-box;
}
.catalog-filter-row {
	display: flex;
	align-items: center; /* ★上下中央揃えに修正 */
	margin-bottom: 0;
	flex-wrap: wrap;
}
.catalog-filter-label {
	font-weight: bold;
	width: 100%;
	color: #009970;
	margin-bottom: 8px;
	font-size: 0.9rem;
	line-height: 1.2;
}
.catalog-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}
.catalog-filter-btn {
	background-color: #f3f3e9;
	border: 1px solid #dfd9ca;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.85rem;
	color: #333;
	transition: all 0.2s ease;
	line-height: 1.4;
}
.catalog-filter-btn:hover {
	background-color: #e2e2d5;
}
.catalog-filter-btn.active-filter {
	background-color: #009970;
	color: white;
	border-color: #009970;
	font-weight: bold;
}

/* 3. 製品グリッド（スマホ・タブレットは1行2列） */
.catalog-product-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 40px;
	width: 100%;
	box-sizing: border-box;
}
.catalog-product-card {
	background: white;
	width: calc(50% - 6px);
	border: 1px solid #dfd9ca;
	border-radius: 6px;
	padding: 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* 画像枠 */
.catalog-product-img-space {
	width: 100%;
	height: 140px;
	margin-bottom: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
	background: transparent;
	border: none;
}
.catalog-product-img-space img {
	width: auto !important;
	height: 100% !important;
	max-height: 140px !important;
	object-fit: contain;
	transition: none !important;
	opacity: 1 !important;
}
.catalog-product-card:hover .catalog-product-img-space img {
	opacity: 1 !important;
	filter: none !important;
}

/* カード内のテキスト装飾 */
.catalog-product-card h4.product-name {
	margin: 0 0 8px 0 !important;
	padding: 0 0 5px 0 !important;
	border-left: none !important;
	border-bottom: 2px solid #009970 !important;
	font-size: 1.05rem !important;
	color: #111 !important;
	background: transparent !important;
}
.product-name span {font-size: 0.75rem;}
.catalog-product-tag {
	display: inline-block;
	font-size: 0.7rem;
	padding: 2px 6px;
	border-radius: 4px;
	margin-bottom: 8px;
	width: fit-content;
	font-weight: bold;
}
.cat-tag-satsuchu { background: #ffebee; color: #c62828; }
.cat-tag-satsukin { background: #e8f5e9; color: #2e7d32; }
.cat-tag-tenchaku { background: #e3f2fd; color: #1565c0; }
.cat-tag-kinoko { background: #f3e5f5; color: #6a1b9a; }

.catalog-product-desc {
	font-size: 0.85rem;
	color: #666666;
	min-height: 35px;
	margin-bottom: 15px;
	line-height: 1.5;
}

/* ボタン */
.catalog-product-button {
	display: block !important;
	margin-top: auto !important;
	padding: 8px 0 !important;
	background-color: #009970 !important;
	color: white !important;
	text-decoration: none !important;
	font-weight: bold !important;
	font-size: 0.85rem !important;
	text-align: center !important;
	border-radius: 4px !important;
	border: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	transition: opacity 0.2s ease !important;
}
.catalog-product-button:hover {
	opacity: 0.8 !important;
	background-color: #009970 !important;
	color: white !important;
}

/* 非表示クラス */
.catalog-card-hide {
	display: none !important;
}

/* パソコン表示時のレイアウト上書き（画面幅769px以上は1行3列） */
@media (min-width: 769px) {
	.agro-hero-image {
		height: 220px;
		margin-bottom: 30px;
	}
	.agro-hero-image h3.hero-title {
		font-size: 2rem !important;
	}
	.catalog-filter-container {
		padding: 20px;
	}
	.catalog-filter-label {
		width: 110px;
		margin-bottom: 0;
		font-size: 0.95rem;
	}
	.catalog-filter-buttons {
		width: auto;
	}
	.catalog-product-grid {
		gap: 16px;
	}
	.catalog-product-card {
		width: calc(33.333% - 11px);
		padding: 16px;
	}
	.catalog-product-img-space {
		height: 160px;
	}
	.catalog-product-img-space img {
		max-height: 160px !important;
	}
	.catalog-product-card h4.product-name {
		font-size: 1.15rem !important;
	}
}