@charset "utf-8";

/*==================================================
  施工実績・事例（case）アーカイブ／一覧
  ※ eyecatch / pan / CONTACT(inc02) は共通（admin.css）
  ※ 詳細ページは single_case.css を使用（別ファイル）
==================================================*/

/* ヒーロー背景 */
.eyecatch_inc .eye_img{
	background-image: url(../img/case/eye01.jpg);
}
@media only screen and (max-width: 767px){
	.eyecatch_inc .eye_img{
		background-image: url(../img/case/eye01_sp.jpg);
	}
}

/*==================================================
  contents01：施工実績一覧
==================================================*/
.contents01{
	width: 100%;
	padding: 4.4rem 0 12.4rem;
}
.contents01_inner{
	width: 120rem;
	margin: 0 auto;
}
/* カテゴリー別ナビ（記事のあるタームのみ・現在地をcurrentで緑塗り） */
.contents01_cat{
	display: flex;
	align-items: center;
	margin-bottom: 5.5rem;
}
.contents01_cat_ttl{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-right: 2.4rem;
	font-size: 1.5rem;
	letter-spacing: calc((20/1000)*1em);
	color: #235a32;
	white-space: nowrap;
}
.contents01_cat_ttl::before{ /* 緑の縦バー */
	content: '';
	width: 2px;/* 線の太さはpx固定（remの端数丸めで左右に太さがぶれるのを防止） */
	height: 2.6rem;
	margin-right: 1rem;
	background: #235a32;
	flex-shrink: 0;
}
.contents01_cat_ttl::after{ /* 区切り線（緑バー） */
	content: '';
	width: 2px;/* 線の太さはpx固定（remの端数丸めで左右に太さがぶれるのを防止） */
	height: 2.6rem;
	margin-left: 1rem;
	background: #235a32;
	flex-shrink: 0;
}
.contents01_cat_list{
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.contents01_cat_btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 2.7rem;
	padding: 0 1.5rem;
	border-radius: 99.9rem;
	background: #f2f5f3;
	font-size: 1.5rem;
	letter-spacing: calc((40/1000)*1em);
	color: #235a32;
	transition: all .3s;
	white-space: nowrap;
}
.contents01_cat_btn:hover,
.contents01_cat_btn.current{
	background: #235a32;
	color: #ffffff;
}

.contents01_list{
	display: flex;
	flex-wrap: wrap;
	gap: 5.3rem 3.6rem;
}
/* カード装飾（.contents01_card*）は css/case_card.css に集約（一覧/タクソノミー/TOP 共通） */

/*==================================================
  ページネーション
==================================================*/
.contents01_pager{
	margin-top: 11.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.7rem;
}
.contents01_pager_num{
	width: 4rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #235a32;
	border-radius: 50%;
	transition: background-color .3s;
}
.contents01_pager_num.current,
.contents01_pager_num:hover{
	background: #f2f5f3;
}
.contents01_pager_arrow{
	width: 0.8rem;
	height: 0.8rem;
	flex-shrink: 0;
	border-top: 1px solid #235a32;
	border-right: 1px solid #235a32;
}
.contents01_pager_arrow.prev{
	margin-right: 0.8rem;
	transform: rotate(-135deg);
}
.contents01_pager_arrow.next{
	margin-left: 0.8rem;
	transform: rotate(45deg);
}

/*==================================================
  SP（375基準・XD SP/施工実績・事例_一覧）
==================================================*/
@media only screen and (max-width: 767px){
	.contents01{
		padding: 2.4rem 0 10.5rem;
	}
	.contents01_inner{
		width: 100%;
		padding: 0 2.8rem;
	}
	/* カテゴリナビ：ラベルを上段・区切りは右端・ボタンは下段で折返し */
	.contents01_cat{
		flex-direction: column;
		align-items: stretch;
		margin-bottom: 4.6rem;
	}
	.contents01_cat_ttl{
		margin-right: 0;
		margin-bottom: 2.1rem;
		font-size: 1.3rem;   /* PC base15→SP */
	}
	.contents01_cat_ttl::before{ /* PC base h26/mr10→SP */
		height: 1.7rem;
		margin-right: 0.8rem;
	}
	.contents01_cat_ttl::after{
		height: 1.7rem;      /* PC base h26→SP */
		margin-left: 0.8rem;
	}
	.contents01_cat_btn{ /* PC base（h27/pad0 15/fs15/ls0.04）→SPは小さめ */
		height: 2.3rem;
		padding: 0 1rem;
		font-size: 1.2rem;
		letter-spacing: calc((20/1000)*1em);
	}
	/* 1カラム縦積み（カード自体のSPは case_card.css） */
	.contents01_list{
		gap: 3.4rem 0;
	}
	.contents01_pager{
		margin-top: 6rem;
	}
}