@charset "utf-8";
/*ワーク*/
.work {
  padding: 100px 0;
}

.tab_inner {
  max-width: 700px;
  padding: 10px 30px;
  margin: 80px auto 100px;
  background-color: #D9CDCD;
  border-radius: 100px;
}

.tab_list {
  display: flex;
  justify-content: space-around;
  gap: 30px;
}

.tab_list li a {
  display: block;
  font-size: 1.8rem;
  background-color: #D9CDCD;
  padding: 10px 20px;
  border-radius: 100px;
}

.tab_list li.active a {
  background-color: #fff;
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.work_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.work_lists li {
  width: 45%;
  box-shadow: -5px -5px 20px #fff,
  5px 5px 20px #babecc;
  transition: all .2s ease-in-out;
  background-color: #f8f8f8;
  cursor: pointer;
  margin-bottom: 50px;
}

.work_lists li:hover {
  box-shadow: -2px -2px 5px #fff,
  2px 2px 5px #babecc;
}

.work_result img {
  width: 100%;
}

.work_name {
  margin: 30px 0 15px;
  padding-left: 15px;
  font-weight: 500;
}

.work_hash {
  font-size: 1.4rem;
  padding: 0 0 30px 15px;
}

@media screen and (max-width:768px) {
  .work {
    padding: 100px 0 0;
  }
  .tab_inner {
    max-width: 100%;
    padding: 10px 17px;
    margin: 80px auto 50px;
  }
  
  .tab_list {
    display: flex;
    justify-content: space-around;
    gap: 0;
  }
  
  .tab_list li a {
    font-size: 1.5rem;
    padding: 5px 8px;
  }

  .area {
    padding: 50px 0;
  }
  
  .work_lists {
    flex-wrap: nowrap;
    flex-direction: column;
  }
  
  .work_lists li {
    width: 100%;
    margin-bottom: 50px;
  }
  
  .work_lists li:hover {
    box-shadow: -2px -2px 5px #fff,
    2px 2px 5px #babecc;
  }
  
  .work_result img {
    width: 100%;
  }
  
  .work_name {
    padding: 0 15px;
  }
}