@charset "UTF-8";

/********************************
 　施工事例カテゴリー
********************************/
.section_box_category_works {
	overflow: hidden;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.category_works_contents{
	width: 24%;
	padding: 0 0 0px 0;
	overflow:hidden;
	border-bottom: 1px dotted #BFB9AC;
	background-color: #fff;
	margin: 0px 0 15px 0px;
}
.category_works_thumbnail_box{
	width:100%;
	overflow:hidden;
}
.category_works_thumbnail_box img{
    object-fit: cover;
	height: 288px;
	width: 288px;
}
.category_works_text{
	float:left;
	overflow:hidden;
	width: 100%;
	height: 105px;
}
.category_works_new{
    background: #ffa54a;
    color: #FFF;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    margin:5px 0px 3px 10px;
    width: 40px;
	padding: 3px;
	float:left;
}
.category_works_category {
    color: #000;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 5px 0px 3px 10px;
    width: 60px;
    padding: 3px;
    float: left;
    border: 1px solid #000;
}
.category_works_date{
    color: #000;
    text-align: left;
    font-size: 0.8rem;
	margin: 5px 10px 3px 10px;
    width: 88px;
    float: left;
	padding: 3px;
}
.category_works_title{
	float: left;
	text-align: left;
	width: 90%;
	margin: 5px 0 0 10px;
}
.category_works_title h3{
	font-size: 14px;
}
.category_works_title p{
	margin: 5px 0 5px 0;
	font-size:12px;
}

/************************************************************************************************
		　　　レスポンシブ（1023px以下）　ここから
************************************************************************************************/

@media only screen and (max-width: 1024px) {
/********************************
　カテゴリーメニュー（カテゴリー）
********************************/
.section_box_category_works {
	display: block;
}
.category_works_contents{
	width: 23%;
	margin: 0px 5px 10px 5px;
	padding: 0px;
	float: left;
}
.category_works_thumbnail_box img {
    height: 184px;
    width: 100%;
}
.category_works_contents_text{
	height: 150px;
}
.category_works_new {
    font-size: 0.6rem;
    margin: 5px 5px 0px 3px;
    width: 30px;
    padding: 3px;
}
.category_works_category {
	font-size: 0.6rem;
	margin: 5px 5px 0px 0;
	width: 55px;
	padding: 2px;
}
.category_works_date {
    font-size: 0.7rem;
    margin: 5px 0px 0px 0px;
    width: 46px;
    padding: 3px;
}
.category_works_title {
    margin: 5px 0 0 5px;
}
.category_works_title h3 {
    font-size: 13px;
}
.category_works_title p {
    margin: 10px 0 0px 0;
}
}

/************************************************************************************************
		　　　レスポンシブ（640px以下） ここから
************************************************************************************************/

@media only screen and (max-width: 641px) {
/********************************
　カテゴリーメニュー（カテゴリー）
********************************/
.section_box_category_works {
	margin: 0px auto 30px auto;
}
.category_works_contents{
	width: 47%;
	margin: 0 5px 15px 5px;
	padding: 0px;
}
.category_works_contents_text {
    float: left;
    overflow: hidden;
    width: 100%;
    height: 100px;
}
.category_works_thumbnail_box img {
    height: 176px;
}
.category_works_new {
	font-size: 0.5rem;
    margin: 5px 0px 3px 5px;
    width: 31px;
}
.category_works_category {
    font-weight: 500;
    margin: 5px 0px 3px 5px;
    width: 50px;
}
.category_works_date {
    font-size: 0.6rem;
    margin: 8px 0px 3px 5px;
    width: 60px;
    padding: 0px;
}
.category_works_title {
    width: 100%;
    margin: 5px 0 0 5px;
    font-size: 14px;
}
.category_works_title h3 {
	font-size: 90%;
}

}