#main #ttl h1{
 background: url(../img/works/bg_ttl.jpg) no-repeat center center;
 background-size: cover;
}
.pageList1{
 display: flex;
 width: 100%;
}
.pageList1 li{
 width: 25%;
 margin-right: 1px;
}
.pageList1 li a{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background: #071F4F;
 color: #fff;
 color: #fff;
 padding: 10px;
 box-sizing: border-box;
}
.pageList1 li a .name{
 width: 6em;
}
.pageList2{
 display: flex;
 width: 100%;
 flex-wrap: wrap;
}
.pageList2 li{
 box-sizing: border-box;
 width: 24%;
 margin-right: 1.3%;
 margin-bottom: 10px;
}
.pageList2 li:nth-child(4n){
 margin-right: 0%;
}
.pageList2 li .img{
 max-height: 160px;
 overflow: hidden;
}
.pageList2 li p{
 text-align: center;
 padding: 10px;
}
#links .maxWidth2{
 position: relative;
}
#links .maxWidth2:after{
 position: absolute;
 content: "";
 display: block;
 background: url(../img/works/bg1.png) no-repeat top center;
 width: 80px;
 height: 1000px;
 right: -120px;
 top: 40px;
 background-size: contain;
 mix-blend-mode: multiply;
}

/*
===================================================
        tb
===================================================
*/
@media screen and (max-width: 1100px) {
 .pageList1{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
 }
 .pageList1 li{
  width: calc( 50% - 1px );
  margin-right: 1px;
  margin-bottom: 1px;
  font-size: 90%;
 }
 .pageList1 li a{
  padding: 8px;
 }
}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 768px) {
 #links .maxWidth2:after{
  display: none;
 }
 .pageList2 li{
  box-sizing: border-box;
  width: 48%;
  margin-right: 4%;
  margin-bottom: 10px;
  text-align: center
 }
 .pageList2 li:nth-child(2n){
  margin-right: 0%;
 }
}