@charset "UTF-8";

/*================
カテゴリページ 個別設定
===============*/
/* 全体コンテナ */
.cate-h-sub {
	/* max-width: 1200px; */ /* サイト全体の幅に合わせて調整してください */
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
}

.cate-h-sub *, .cate-h-sub *::before, .cate-h-sub *::after {
	box-sizing: inherit;
}

/* タイトル「インテリア」 */
.cate-h-sub h3 {
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 50px 0;
	position: relative;
	color: #000;
}

/* タイトル下のオレンジの線 */
.cate-h-sub h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background-color: #d87c24; /* オレンジの下線色 */
}

/* リスト全体のレイアウト (Gridを使用) */
.cate-h-sub .sub-cate-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 横4列 */
	gap: 16px; /* パネル同士の隙間 */
}

/* 各アイテムの枠（ボタン） */
.cate-h-sub .sub-cate-list li a {
	display: flex;
	align-items: center;
	background-color: #f5f4f2; /* 薄いグレーの背景色 */
	text-decoration: none;
	padding: 12px 5%;
	border-radius: 12px; /* 少し強めの角丸 */
	transition: background-color 0.3s ease, transform 0.2s ease;
	height: 100%;
}

/* マウスホバー時のエフェクト */
.cate-h-sub .sub-cate-list li a:hover {
	background-color: #d5790e;
	opacity: 1;
}

/* 白い丸の画像外枠 */
.cate-h-sub .sub-cate-list .img-wrap {
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 画面が縮んでも丸が潰れないように固定 */
	margin-right: 16px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 軽めの影で馴染ませる */
}

/* 画像自体のスタイル */
.cate-h-sub .sub-cate-list .img-wrap img {
	width: 85%;
	height: 85%;
	object-fit: contain;
}

/* テキストのスタイル */
.cate-h-sub .sub-cate-list .text {
	color: #000;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
}
.cate-h-sub .sub-cate-list li a:hover .text {
	color: #fff;
}
@media screen and (max-width: 1200px){
	/* 全体コンテナ */
.cate-h-sub {
	/* max-width: 1200px; */ /* サイト全体の幅に合わせて調整してください */
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
}

.cate-h-sub *, .cate-h-sub *::before, .cate-h-sub *::after {
	box-sizing: inherit;
}

/* タイトル「インテリア」 */
.cate-h-sub h3 {
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 50px 0;
	position: relative;
	color: #000;
}

/* タイトル下のオレンジの線 */
.cate-h-sub h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background-color: #d87c24; /* オレンジの下線色 */
}

/* リスト全体のレイアウト (Gridを使用) */
.cate-h-sub .sub-cate-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 横4列 */
	gap: 10px; /* パネル同士の隙間 */
}

/* 各アイテムの枠（ボタン） */
.cate-h-sub .sub-cate-list li a {
	display: flex;
	align-items: center;
	background-color: #f5f4f2; /* 薄いグレーの背景色 */
	text-decoration: none;
	padding: 12px 5%;
	border-radius: 5px; /* 少し強めの角丸 */
	transition: background-color 0.3s ease, transform 0.2s ease;
	height: 100%;
}

/* マウスホバー時のエフェクト */
.cate-h-sub .sub-cate-list li a:hover {
	background-color: #d5790e;
	opacity: 1;
}

/* 白い丸の画像外枠 */
.cate-h-sub .sub-cate-list .img-wrap {
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 画面が縮んでも丸が潰れないように固定 */
	margin-right: 3%;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 軽めの影で馴染ませる */
}

/* 画像自体のスタイル */
.cate-h-sub .sub-cate-list .img-wrap img {
	width: 85%;
	height: 85%;
	object-fit: contain;
}

/* テキストのスタイル */
.cate-h-sub .sub-cate-list .text {
	/* color: #333333; */
	font-size: 13px;
	/* font-weight: bold; */
	letter-spacing: 1px;
	line-height: 1.4;
}
.cate-h-sub .sub-cate-list li a:hover .text {
	color: #fff;
}
}


@media screen and (max-width:768px){
	/* 全体コンテナ */
.cate-h-sub {
	/* max-width: 1200px; */ /* サイト全体の幅に合わせて調整してください */
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
}

.cate-h-sub *, .cate-h-sub *::before, .cate-h-sub *::after {
	box-sizing: inherit;
}

/* タイトル「インテリア」 */
.cate-h-sub h3 {
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 50px 0;
	position: relative;
	color: #000;
}

/* タイトル下のオレンジの線 */
.cate-h-sub h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background-color: #d87c24; /* オレンジの下線色 */
}

/* リスト全体のレイアウト (Gridを使用) */
.cate-h-sub .sub-cate-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 横4列 */
	gap: 10px; /* パネル同士の隙間 */
}

/* 各アイテムの枠（ボタン） */
.cate-h-sub .sub-cate-list li a {
	display: flex;
	align-items: center;
	background-color: #f5f4f2; /* 薄いグレーの背景色 */
	text-decoration: none;
	padding: 12px 5%;
	border-radius: 5px; /* 少し強めの角丸 */
	transition: background-color 0.3s ease, transform 0.2s ease;
	height: 100%;
}

/* マウスホバー時のエフェクト */
.cate-h-sub .sub-cate-list li a:hover {
	background-color: #d5790e;
	opacity: 1;
}

/* 白い丸の画像外枠 */
.cate-h-sub .sub-cate-list .img-wrap {
	width: 40px;
	height: 40px;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 画面が縮んでも丸が潰れないように固定 */
	margin-right: 3%;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 軽めの影で馴染ませる */
}

/* 画像自体のスタイル */
.cate-h-sub .sub-cate-list .img-wrap img {
	width: 85%;
	height: 85%;
	object-fit: contain;
}

/* テキストのスタイル */
.cate-h-sub .sub-cate-list .text {
	/* color: #333333; */
	font-size: 12px;
	/* font-weight: bold; */
	letter-spacing: 0;
	line-height: 1.4;
}
.cate-h-sub .sub-cate-list li a:hover .text {
	color: #fff;
}
}


@media screen and (max-width:580px){
	/* 全体コンテナ */
.cate-h-sub {
	/* max-width: 1200px; */ /* サイト全体の幅に合わせて調整してください */
	margin: 0 auto;
	padding: 10px 0 30px 0;
	box-sizing: border-box;
}

.cate-h-sub *, .cate-h-sub *::before, .cate-h-sub *::after {
	box-sizing: inherit;
}

/* タイトル「インテリア」 */
.cate-h-sub h3 {
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 40px 0;
	position: relative;
	color: #000;
}

/* タイトル下のオレンジの線 */
.cate-h-sub h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 25px;
	height: 3px;
	background-color: #d87c24; /* オレンジの下線色 */
}

/* リスト全体のレイアウト (Gridを使用) */
.cate-h-sub .sub-cate-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 横4列 */
	gap: 8px; /* パネル同士の隙間 */
}

/* 各アイテムの枠（ボタン） */
.cate-h-sub .sub-cate-list li a {
	display: flex;
	align-items: center;
	background-color: #f5f4f2; /* 薄いグレーの背景色 */
	text-decoration: none;
	padding: 12px 0 12px 5%;
	border-radius: 5px; /* 少し強めの角丸 */
	transition: background-color 0.3s ease, transform 0.2s ease;
	height: 100%;
}

/* マウスホバー時のエフェクト */
.cate-h-sub .sub-cate-list li a:hover {
	background-color: #d5790e;
	opacity: 1;
}

/* 白い丸の画像外枠 */
.cate-h-sub .sub-cate-list .img-wrap {
	width: 25px;
	height: 25px;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 画面が縮んでも丸が潰れないように固定 */
	margin-right: 3%;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 軽めの影で馴染ませる */
}

/* 画像自体のスタイル */
.cate-h-sub .sub-cate-list .img-wrap img {
	width: 85%;
	height: 85%;
	object-fit: contain;
}

/* テキストのスタイル */
.cate-h-sub .sub-cate-list .text {
	/* color: #333333; */
	font-size: 11px;
	/* font-weight: bold; */
	letter-spacing: 0;
	line-height: 1.4;
}
.cate-h-sub .sub-cate-list li a:hover .text {
	color: #fff;
}
}