@charset "UTF-8";
/* CSS Document */



/* 画像左右入れ替わり
------------------------------*/
.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}
.wrap-gray {
	background:#ececec;
	border-radius: 8px;
	padding: 15px;
}
.wrap:not(:last-child) {
  margin-bottom: 40px;
}

.wrap:nth-child(even) {
  flex-direction: row-reverse;
}
.wrap h2 {
	font-size: 1.2rem;
	margin: 0;
}
.wrap p {
	margin: 0;
}
.wrap img {
  display: block;
  width: 48%;
  height: auto;
}

.wrap-box {
  width: 48%;
}





/* 工事内容ボタン
------------------------------*/
.work-button { 
    display: flex;
    flex-wrap: wrap; /* 折返し可 */ 
    justify-content: space-between;
}

/* 子要素 */
.work-button-item { 
    width: 33% ; /* 親要素の1/3より小さい値 */
	margin: 5px 0;
	padding: 1rem .5rem;
	text-align: center;
	font-size: 0.85rem;
}

/* 親要素の疑似要素 */
.work-button::after {
    content: "";
    display:block;
    width:33%; /* 子要素と同じ幅 */
}

@media screen and (min-width: 751px){
	.work-button-item:nth-child(3n+1) {
		margin-left: 0;
	}
}

@media screen and (max-width:640px) {
.work-button-item { 
    width: 49% ;
}

/* 親要素の疑似要素 */
.work-button::after {
    width:49%; 
}
}


.work-button-item,
a.work-button-item {
  color: #fff;
	display: block;
	text-decoration: none;
	background:#FE0004;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
}
.work-button-item:hover,
a.work-button-item:hover {
	color:#FE0004;
	border: 2px solid #FE0004;
	background: #fff;
}


/*  flexで画像や説明文を横並び
-------------------------------------*/
.work-box { 
    display: flex;
    flex-wrap: wrap; /* 折返し可 */ 
    justify-content: space-between;
}

/* 子要素 */
.work-item { 
    width: 33% ; /* 親要素の1/3より小さい値 */
	margin: 5px 0;
	padding: 1rem .5rem;
	text-align: center;

}

/* 親要素の疑似要素 */
.work-box::after {
    content: "";
    display:block;
    width:33%; /* 子要素と同じ幅 */
}

@media screen and (min-width: 751px){
	.work-item:nth-child(3n+1) {
		margin-left: 0;
	}
}

@media screen and (max-width:640px) {
.work-item { 
    width: 49% ;
}
/* 親要素の疑似要素 */
.work-box::after {
    width:49%; 
}
}
.work-item,
a.work-item {
	display: block;
	text-decoration: none;
	background:#ececec;
	border-radius: 3px;
}
.inner .work-item h3 {
	margin: 0;
	padding: 0;
	font-size: 1.0rem;
	line-height: 125%;
}
.work-item p {
	font-size: 0.85rem;
	margin: 0;
	padding: 0;
	line-height: 125%;
}
.work-item-image{
position: relative;
}
.work-item-image::before{
	width: 100%;
	height: 96%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: rgba(0,0,0,0.3);*/
background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1)10%, rgba(0, 0, 0, 0.4)80%,rgba(0, 0, 0, 0.1))
}
.work-item-image h3 {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}
.work-item img {
  width: 100%;
}