@charset "UTF-8";


/* 部位別施工事例 */
.w-btn {
    top: 170px;
}
	
.room-nav{ display: inline-block; margin-bottom:30px}
.room-nav li{ display:inline-block;  position:relative; box-sizing:border-box; margin:0 10px 10px 0;white-space: nowrap;}
.room-nav li a{ position: relative; display:block;  padding:5px 10px; border-radius:10px; font-weight:bold; background:#e4e4e4}
.room-nav li.highlight{  box-sizing:border-box}
.room-nav li.highlight a{ color:#fff; background:#007843}
.room-list{ text-align:center}
.room-list li{ position:relative; display:inline-block;    max-width: 334px; margin: 0 10px 30px;}
.room-list li h4{ position:absolute; left:-19px; top:20px; margin:0}
.room-list li img{ margin-bottom:10px}
.room-list li p{ text-align:left}

@media screen and (min-width: 961px) {
.w-btn {
    top: 260px;
}
	
.room-nav{ display:flex; justify-content:flex-start; background:url(../../works/room/img/line.gif) left bottom repeat-x; margin-bottom:50px}
.room-nav li a{  padding:0 15px 15px;background:none}
.room-nav li a:hover{ color:#007843; opacity:1}
.room-nav li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #007843;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;}
.room-nav li.highlight a::after,
.room-nav li a:hover::after {  transform: scale(1, 1);}
.room-nav li{  margin:0}
.room-nav li.highlight{  box-sizing:border-box}
.room-nav li.highlight a{ color:#007843; background:none}
.room-list{  display: flex;text-align: center; flex-wrap: wrap;}

.room-list li{ margin:0 39px 40px 0;}
.room-list li:nth-child(3n){ margin-right:0}
.room-list li img{ width:100%; height:auto}
}