@charset "UTF-8";

.breadcrumb{
    display:none;
}
.breadcrumb ul{
  display: flex;
  font-size: 12px;
}
.breadcrumb ul li:first-child:after,
.breadcrumb.list ul li:nth-of-type(2):after{
  content: "---";
  letter-spacing: -1px;
  margin: 0 10px;
}
#container.backnumber{
  min-height: 700px;
}
#container.backnumber #main{
  margin:0 auto 0px;
}
.backnumber #main .contents{
	margin: 0;
	background: none;
	width: auto;
	padding: 0 0px;
	display: flex;
	align-items: center;
}
	.backnumber #main #contact{
		margin-top: 100px;
		padding: 83px 0 0px;
	}
.backnumber #main h2{
	display: inline-block;
	margin: 0 0 130px;
	align-self: center;
}
.backnumber #main h2:before{
	content:"News";
	font-size:24px;
	margin:0 0 25px;
	display:block;
}
	.backnumber.detail #main h2:after{
		text-align:center;
	}
	.works #main h2:before{
		content:"Works";
	}
	#contact .box h2:before{
		content:none!important;
	}
.heading > div{
	align-self: center;
	margin-bottom: 60px;
}
	.heading .topbox div:after{
		content:"";
		background:url(../parts/news.svg) no-repeat;
		background-size:contain;
		display:block;
		width:247px;
		height:112px;
		position: relative;
		left: 5em;
		margin-right: 105px;
	}
.heading .topbox{
	display: flex;
	align-items: flex-end;
	margin: 0 70px 60px;
	width: 100%;
	justify-content: space-between;
}
.heading > div:first-child:after{
	content:"";
	display:block;
	background:url(../parts/news_top.jpg) no-repeat;
	max-width:1000px;
	max-height:440px;
	background-size:cover;
	height: 50vw;
	width: clamp(30vw,57vw,1000px);
	background-position: center;
}
.label_menu{
  display: flex;
  justify-content:space-evenly;
  max-width: 360px;
  margin:0 auto;
}
.label_menu a{
  border:solid 1px #363635;
  padding: 3px;
  display: block;
  width:100px;
  text-align: center;
}
.label_menu a.active{
  background: #E7E247;
}
ul.backnumber {
	margin: 0 calc(50% - 50vw) 0px;
	background: #F2F2ED;
	padding: 60px 0;
	width: 100vw;
}
ul.backnumber li{
	position: relative;
	padding: 20px;
	background: #fff;
	margin: 0 auto 20px;
	max-width: 1000px;
	width: auto;
}
	ul.backnumber li:last-child{
		margin-bottom:0;
	}
	ul.backnumber li img{
		max-width:100%;
	}
	ul.backnumber li.empty{
		display:none;
	}
span.label{
  border:solid 1px rgb(54 54 53 / 51%);
  font-size:13px;
  padding: 3px;
  margin: 0 20px 0 20px;
  background: #FBF8EC;
}
.new_info_date{
  display: inline-block;
  margin: 0 35px 0 0;
  width: auto;
}
.new_info_title{
  display: block;
  margin:0px 0 0 0 ;
  font-size: 16px;
}
ul.backnumber li a{
  display: flex;
}
	ul.backnumber li a:after{
		content: "\f054";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 16px;
		position: absolute;
		right: 20px;
	}
.fa-solid{
	align-self: center;
}

.backnumber #main #contact h2{
	margin-bottom:40px;
}

footer{
	margin-top:52px;
}

/* 詳細ページ */
.detail .heading > div:first-child{
	margin-right:0;
	display:flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 90px;
	margin-left: 0;
}
.backnumber.detail #main .contents{
	justify-content: center;
}
.detail .heading > div:after{
	left:0;
	content:none;
}
.detail .heading .topbox div::after{
	margin:0;
	left:0;
}
.detail.backnumber #main h2{
	margin: 0 0px 43px 0;
	line-height: 1;
	padding: 0 0 3px;
}
.detail.backnumber #main h2:before{
	text-align:center;
}
.detail .topbox div{
	display:flex;
	flex-direction: column;
	align-items: center;
}
.detail .box{
	margin:0 -20px 100px;
	padding: 60px 0;
	max-width: none;
	background: #F2F2ED;
	width: 100vw;
}
.article{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	padding: 40px 100px;
}
.detail h3{
	font-size: 32px;
	margin: 0 0 50px;
  color:#54494B;
}
.detail .new_info_date{
	font-size:14px;
	margin: 0 0 20px;
}
.text{
  margin:0 0 70px 0;
}
.photo{
	margin:0 0 25px 0;
}
.photo img{
  max-width: 100%;
}
.photo p{
  text-align: center;
  margin: 25px 0 70px;
}
	.photo:last-child,
	.photo:last-child p{
		margin-bottom:0;
	}
a.back_list{
	display: block;
	margin: 0 auto;
	width: auto;
	font-size: 15px;
	text-align: center;
	text-decoration: underline;
}
	a.back_list:before{
		content: "\f054";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 16px;
		transform: scale(-1, 1);
		display: inline-block;
		margin-right: 15px;
	}
/*ボタン*/
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.page_view{
  margin: 40px auto 0 !important;
  text-align: center;
}
.page_view button{
	width: 30px;
	height: 30px;
	padding: 0 0 2px;
	margin: 0 20px 0 0;
	border: 1px solid #54494B;
	border-radius: 50%;
	font-size: 14px;
	color: #54494B;
}
.page_view button.next,
.page_view button.prev{
  border: none;
}
.page_view button.prev{
  margin:0 20px 0 0;
  transform: scale(-1, 1);
}
.page_view .active{
	background: #54494B;
	color: #fff;
}

/* 施工事例 */
.works .topbox div:after{
	background-image:url(../parts/bousui.svg);
	width:158px;
	height:121px;
	left:11em;
	margin-right:160px;
}
.works .heading > div:first-child::after{
	background-image:url(../parts/works_top.jpg);
}
.works .new_info_date{
	font-size: 14px;
	margin: 0px 0 0px;
	display: inline-block;
	line-height: normal;
}
.works ul.backnumber{
	display: flex;
	flex-wrap: wrap;
	padding: 60px 9.65vw;
	justify-content: center;
}
.works ul.backnumber li{
	width: 270px;
	padding: 0;
	background: none;
	margin: 0 40px 120px 0;
}
	.works ul.backnumber li.empty{
		width:270px;
		height: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
		margin-bottom: 0;
		display:block;
	}
.works ul.backnumber li a{
	display:block;
	width:100%;
}
.works ul.backnumber li a::after{
	content:none;
}
.works ul.backnumber li img{
	width: 270px;
	height: 270px;
	object-fit: cover;
	margin: 0 0 15px;
}
.detail.works .topbox div::after{
	left: 0;
	margin-right: 0;
}
.detail.works .heading > div:first-child::after{
	content:none;
}

@media screen and (max-width: 1200px) {

	.heading .topbox{
		flex-direction: column;
		align-items: center;
		margin: 0;
		left: 0;
	}
	.topbox div{
		display:flex;
    margin:0 0 20px 40px;
		/*margin: 0 0 30px;*/
		width: 100%;
		/*justify-content: center;*/
	}
	.heading > div:first-child::after{
		margin-right:0;
		left: 0;
	}
	.backnumber #main h2{
		margin: 0 0px 0px 0px;
	}
	.backnumber #main h2::before{
		text-align: left;
	}
	.works ul.backnumber{
		margin-right:0;
	}

	.article{
		width: auto;
		max-width: none;
		margin: 0 20px;
	}
	ul.backnumber li{
		margin: 0 20px 20px;
	}

}
@media screen and (max-width: 1024px) {

  header{
    margin:0 0 13px 0;
  }
  header .inner{
    position: relative;
  }

  .backnumber #main h2::before{
	  font-size:12px;
	  margin: 0 0 10px;
	 }
  .backnumber #main h2:after{
      position: static;
    }
  .breadcrumb{
    margin:0 auto 10px;
    padding: 0 10px;
  }
	 .backnumber #main h2{
		 white-space: nowrap;
		}
		.heading .topbox div::after{
			width:166px;
			height:75px;
			left: 40px;
			margin: 0;
		}
		.works .topbox div::after{
			left:40px;
			margin:0;
			width: 99px;
			height: 76px;
		}
  .new_info_date{
    margin-right: 10px;
  }
  span.label{
    margin: 0px;
    padding: 0 2px;
  }
  .label_menu{
    justify-content:space-between;
  }

	.heading > div:first-child::after{
		left: 0;
		width: 100vw;
		margin: 0 0 0 0px;
    height: 260px;
	}
	/*.topbox div{
		justify-content: space-between;
		width: 100%;
		align-items: flex-end;
		max-width: 335px;
	}*/
  .backnumber.detail.works .topbox div,
  .backnumber.detail .topbox div{
    margin:0 0 20px 0;
  }
  .detail .heading > div:first-child{
		width: 100%;
		margin: 0;
	 }
	.detail .heading > div::after {
		content:none;
	}
	.article{
		padding: 20px 20px;
	}
	.detail h3{
		font-size:24px;
		margin: 0 0 30px;
	}
	.detail .new_info_date{
		margin:0 0 5px;
	}

	.works ul.backnumber{
		flex-direction: column;
    padding: 60px 20px;
	}
	.works ul.backnumber li{
		display: flex;
		width: auto;
		margin: 0 0 20px;
	}
	.works ul.backnumber li img{
		margin-right: 15px;
		width:150px;
		height:150px;
		float:left;
	}
	.works .heading > div:first-child::after{
		/*width: 100vw;*/
    height: 260px;
	}
	.photo p{
		text-align: left;
	}
  ul.backnumber,
  .detail .box{
    padding: 30px 0 10px;
  }
  .detail .box{
    padding: 30px 0 30px;
  }
  ul.backnumber li a{
		display: block;
	}
  ul.backnumber li a:after{
    bottom:15px;
  }
  .video_parking{
    width:100%;
  }
}