@charset "UTF-8";

.work-content{
  padding: 2rem 1.5rem 0;
}

/* 一覧 SP
------------------------- */
.work-list{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 5rem 0 0;
}
.work-list article{
  width: auto;
  margin: 0 0 5rem 0;
  position: relative;
}

/* サイト画像 SP -------------- */
.work-list article > p a,
.work-list article > p.nolink{
  display: block;
  padding: 2rem;
  text-align: center;
  border: 0;
  border-radius: 1rem;
  background: #f8f8f8;
  overflow: hidden;
}

/* サイト名 SP -------------- */
.work-list article h3{  
  padding: 1em 0.5rem;
}
.work-list article h3 span:first-child{
  display: block;
  color: var(--or);
  font-size: 1.3rem;
  font-weight: bold;
}
.work-list article h3 span:last-child{
  line-height: 1.5;
  font-size: 1.8rem;
}
.work-list article h3::after{
  content: "様";
  color: #333;
  font-size: 1.4rem;
  font-weight: normal;
  padding-left: 0.5em;
}

/* 作業内容 SP -------------- */
.work-list article ol{
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;  
}
.work-list article ol li{
  border-radius: 2px;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
}
.work-list article ol li.ad {
  background: #ffd9bf;
}

/* NEW マーク -------- */
.work-list article .newWork {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 10;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  border: none;
  line-height: 1.2;
  width: 4em;
  border-radius: 1.2em;
  padding: 0;
  background: -moz-linear-gradient(-70deg, #f00, #f90);
  background: -webkit-linear-gradient(-70deg, #f00, #f90);
  background: linear-gradient(160deg, #f00, #f90);
}

/*------------------------------------------------------
TB768
------------------------------------------------------*/
@media screen and (min-width:768px) {

  .work-list{
    flex-direction: row;
  }
  .work-list article{
    width: 48%;
    margin: 0 4% 5rem 0;
  }
  .work-list article:nth-child(even){
    margin: 0 0 5rem 0;
  }


}


/*------------------------------------------------------
PC1000
------------------------------------------------------*/
@media screen and (min-width:1000px) {

  .work-content{
    padding: 5rem 1.5rem;
  }
  .work-list article{
    width: 32%;
    margin: 0 2% 5rem 0;
  }
  .work-list article:nth-child(even){
    margin: 0 2% 5rem 0;
  }
  .work-list article:nth-child(3n){
    margin: 0 0 5rem 0;
  }

}

/*------------------------------------------------------
PC1200
------------------------------------------------------*/
@media screen and (min-width:1200px) {

  .work-list article{
    width: 23.8%;
    margin: 0 1.6% 5rem 0;
  }
  .work-list article:nth-child(even){
    margin: 0 1.6% 5rem 0;
  }
  .work-list article:nth-child(3n){
    margin: 0 1.6% 5rem 0;
  }
  .work-list article:nth-child(4n){
    margin: 0 0 5rem 0;
  }

  /* サイト画像 1200 -------------- */
  .work-list article > p a,
  .work-list article > p.nolink{
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;    
  }

}

/*------------------------------------------------------
PC1400
------------------------------------------------------*/
@media screen and (min-width:1400px) {

  .work-content{
    padding: 5rem 0;
  }

}