.modelab-page .sect_category {
	padding: 24px 0 64px;
}

.category_list {
	display: flex;
	flex-wrap: wrap; /* アイテムが収まらない場合に折り返す */
	justify-content: flex-start; /* アイテムを左詰めに配置する */
	list-style: none;
	padding: 0;
	margin: 40px 0 0 0;
	text-align: center;
	/* アイテム間の余白を調整 */
	gap: 20px 10px; 
}

.category_item {
	/* アイテムを1行に8個ずつ並べる */
	width: calc(100% / 8 - 10px); 
	/* 文字数にかかわらず幅を均等に */
	flex-shrink: 0; 
}

.category_item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.modelab-page .category_icon_wrapper {
	/* PC版のアイコンサイズは現状維持 */
	width: 90px;
	height: 90px;
	border: 2px solid #4f739e;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 16px;
	transition: background-color 0.2s;
}

.category_icon {
	width: calc(100% - 48px);
	height: calc(100% - 48px);
	object-fit: contain;
}

.category_label {
	font-size: 14px;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	/* アイコンのサイズを調整 */
	.modelab-page .category_icon_wrapper {
		width: 70px;
		height: 70px;
		margin-bottom: 12px;
	}

	.category_icon {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
	}

	.category_label {
		font-size: 13px;
	}
}

/* スマートフォン向けの表示調整 */
@media screen and (max-width: 768px) {
	.sect_category {
		margin-top: 50px;
		padding-bottom: 50px;
	}

	.category_list {
		flex-wrap: wrap;
		justify-content: flex-start;
		/* スマホ版のアイテム間の余白を調整 */
		gap: 20px 2%; 
		margin-top: 30px;
	}

	.category_item {
		/* 1行4列に設定 */
		width: 23.5%;
		text-align: center;
	}

	.modelab-page .category_icon_wrapper {
		width: 60px;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 8px;
	}

	.category_icon {
		width: calc(100% - 32px);
		height: calc(100% - 32px);
	}

	.category_label {
		font-size: 12px;
	}
}

/* ===============================================
   セクション共通スタイル (更新版)
   =============================================== */

/* H2とH3両方に影響するヘッダーの基本設定 */
.modelab-page .section_header {
	padding-bottom: 12px;
	margin-bottom: 24px;
}

/* 英語＋日本語のメインタイトル (H2) のスタイル */
.modelab-page .section_header h2.sect_ttl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	font-family: "ivyora-text", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #4f739e;
	font-size: 3rem;
}

/* H2内の日本語部分 (span) のスタイル */
.modelab-page .section_header h2.sect_ttl .ja {
	font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #7e7e7e;
	font-size: .875rem;
}

/* ループ内のランキングタイトル (H3) のスタイル */
.modelab-page .section_header h3.sect_ttl {
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	color: #333;
	margin-top: 64px;
}

/* 「もっと見る」ボタンのスタイル */
.modelab-page .btn_view_all {
	/* 基本設定 */
	display: block;
	text-decoration: none;
	text-align: center;
	cursor: pointer;

	/* サイズと余白 */
	width: fit-content; /* テキスト量に応じた幅 */
	min-width: 220px; /* 最小幅を指定して見た目を揃える */
	padding: 12px 24px; /* 内側の余白を大きくしてボタンらしく */
	margin: 40px auto 0; /* 上に40px、左右autoで中央揃え */

	/* デザイン */
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
	border: 1.5px solid #4f739e; /* 青い枠線 */
	background-color: #ffffff; /* 背景は白 */
	color: #4f739e; /* 文字色は青 */

	/* ホバー時のアニメーション効果 */
	transition: background-color 0.3s, color 0.3s;
}

/* ホバー時のスタイル */
.modelab-page .btn_view_all:hover {
	background-color: #4f739e; /* 背景を青に */
	color: #ffffff; /* 文字色を白に */
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
	.modelab-page .section_header {
		margin-bottom: 30px;
	}

	/* スマホでのH2タイトルのフォントサイズ調整 */
	.modelab-page .section_header h2.sect_ttl {
		font-size: 2rem; /* スマホでは少し小さく */
	}

	/* スマホでのH3タイトルのフォントサイズ調整 */
	.modelab-page .section_header h3.sect_ttl {
		font-size: 1.5rem;
	}

	.modelab-page .btn_view_all {
		width: 50%;
		box-sizing: border-box;
		padding: 16px 24px; /* ← この行で上下の余白を調整 */
	}
}

/* ===============================================
ランキングセクション (Woodmartテーマ対応版)
=============================================== */

/* 親クラスを追加して優先度を確保 */
.modelab-page .ranking_list_wrapper .products {
	counter-reset: ranking-counter; /* 順位番号のリセット */
}

/* ★対象を li.product から .wd-product に変更 */
.modelab-page .ranking_list_wrapper .wd-product {
	text-align: center;
	position: relative;
	padding-top: 15px; /* 順位番号のスペース確保 */
}

/* 順位の数字（4位以下のスタイルを変更） */
.modelab-page .ranking_list_wrapper .wd-product::before {
	content: counter(ranking-counter);
	counter-increment: ranking-counter;
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background-color: #ffffff; /* ★背景を白に */
	color: #888888;            /* ★文字色をグレーに */
	border: 1.5px solid #c0c0c0; /* ★グレーの枠線を追加 */
	box-sizing: border-box;    /* 枠線を含めてサイズを計算 */
	font-weight: bold;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

/* 1位から3位までの色を上書き指定 */
.modelab-page .ranking_list_wrapper .wd-product:nth-child(1)::before {
	background-color: #d4af37;
	color: #fff;
	border: none; /* 枠線をリセット */
}
.modelab-page .ranking_list_wrapper .wd-product:nth-child(2)::before {
	background-color: #c0c0c0;
	color: #fff;
	border: none; /* 枠線をリセット */
}
.modelab-page .ranking_list_wrapper .wd-product:nth-child(3)::before {
	background-color: #b87333;
	color: #fff;
	border: none; /* 枠線をリセット */
}

/* Woodmartテーマの既存スタイルを微調整 */
.modelab-page .ranking_list_wrapper .product-element-top {
	margin-bottom: 15px;
}

.modelab-page .ranking_list_wrapper .star-rating {
	margin: 0 auto 10px auto;
}

/* スマホ対応 */
@media (max-width: 768px) {
	/* ★対象を .woocommerce ul.products から .products.wd-products に変更 */
	.modelab-page .ranking_list_wrapper .products.wd-products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ランキングの商品名と価格を左揃えに戻す */
.modelab-page .ranking_list_wrapper .wd-product .wd-product-header,
.modelab-page .ranking_list_wrapper .wd-product .wrap-price {
	text-align: left;
}

/* 特集コンテンツセクションのレイアウト */
.custom-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* PCでは3列表示 */
	gap: 20px;
}

.custom-post-item .post-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.custom-post-item .post-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3; /* 画像の縦横比を固定 */
	object-fit: cover;
	margin-bottom: 10px;
	border: 1px solid #eee;
}

.custom-post-item .post-title {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.custom-posts-grid {
		grid-template-columns: repeat(2, 1fr); /* スマホでは2列表示 */
	}
	.custom-post-item .post-title {
		font-size: 14px;
	}
}

.modelab-page .sect_sns {
	margin-top: 24px
}

/* ===============================================
   区切り線スタイル
   =============================================== */
.modelab-page hr.section-divider {
	border: none;
	height: 1px;
	background-color: #161616;
	display: block;
	max-width: 1040px;
	margin: 0px auto;
}

/* 画面幅が1079px以下になった時のスタイルを上書き */
@media screen and (max-width: 1079px) {
	.modelab-page hr.section-divider {
		/* max-widthの指定をなくし、左右の余白で幅を制御する */
		max-width: none;
		width: auto;
		margin: 0px 20px;
	}
}

/* 新しいラッパー要素に背景を指定 */
.modelab-page .ranking-wrapper { /* ← セレクタを具体的にして優先度を上げる */
	/* 背景画像を固定表示 */
	background: url(../images/bg_mm.jpg) center center / cover no-repeat;
	
	/* 背景がコンテンツの上下に見えるように余白を追加 */
	padding: 64px 0;
}

/* 個々のセクションが持つ上下の余白は不要になるためリセット */
.modelab-page .ranking-wrapper .sect_ranking { /* ← 子孫セレクタも同様に修正 */
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 48px;
}

/* 最後のセクションの下の余白だけは不要なので消す */
.modelab-page .ranking-wrapper .sect_ranking:last-child { /* ← こちらも同様 */
	margin-bottom: 0;
}

.modelab-page .sect_recently_viewed {
	padding: 64px 0;
}

.modelab-page .sect_featured_posts {
	padding: 64px 0;
}

@media screen and (max-width: 768px) {
	.modelab-page figure.fig img.image {
		height: 100%;
		object-fit: cover;
	}
}

.modelab-page .wd-products-with-bg:not(.products-bordered-grid) :is(.product-wrapper,.wd-cat-wrap) {
    background-color: #ffffff; /* White background */
}

/* メインビジュアルのスライダー
--------------------------------*/
.modelab-page .sect_mainVisual {
	line-height: 0; /* 画像下の余分な隙間を削除 */
}

.modelab-hero-slider {
	width: 100%;
	height: auto;
	/* PC表示時の画像アスペクト比（高さ）を調整 */
	aspect-ratio: 4 / 1;
}

.modelab-hero-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* コンテナに合わせて画像を表示 */
}

/* 左右の矢印ボタンの色やサイズを調整 */
.modelab-hero-slider .swiper-button-prev,
.modelab-hero-slider .swiper-button-next {
	color: #ffffff; /* 矢印の色（白） */
	background-color: rgba(0, 0, 0, 0.2); /* 半透明の背景 */
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.modelab-hero-slider .swiper-button-prev::after,
.modelab-hero-slider .swiper-button-next::after {
	font-size: 20px; /* 矢印アイコンのサイズ */
}

/* スマートフォン向けの表示調整 */
@media screen and (max-width: 768px) {
	.modelab-hero-slider {
		/* スマホ表示時の画像アスペクト比（高さ）を調整 */
		aspect-ratio: 4 / 3;
	}
	
	.modelab-hero-slider .swiper-button-prev,
	.modelab-hero-slider .swiper-button-next {
		/* スマホでは矢印を非表示にする場合 */
		/* display: none; */
	}
}