
.category-wrapper .category a:hover{opacity:0.7;}
.category-wrapper .category a{transition:all 0.3s; opacity:1; }

section.works div.works-wrapper{width:100%; padding:100px 55px 15px; box-sizing:border-box;}
section.works div.works-wrapper div.category-wrapper{text-align:center; margin-bottom:60px;}
section.works div.works-wrapper div.category-wrapper ul.category{padding:9px 46px 10px; display: inline-block; text-align:center; border:2px solid #333; box-sizing:border-box;}
section.works div.works-wrapper div.category-wrapper ul.category li{display:inline-block; padding-right:9px; padding-left:9px;}
section.works div.works-wrapper div.category-wrapper ul.category li:last-of-type{ padding-right:0;}
section.works div.works-wrapper div.category-wrapper ul.category li a{text-decoration: none;font-size:1.5rem;}
section.works div.works-wrapper div.category-wrapper ul.category li a.current{ border-bottom: 2px solid #222; padding-bottom: 2px;}
section.works div.works-wrapper div.works-inner{display:flex; flex-wrap:wrap;}
section.works div.works-wrapper div.works-inner a.works-link{display:block; width:33.33%; height:100%; text-decoration:none; position:relative;}

section.works div.works-wrapper div.works-inner a.works-link div.image-wrapper{width:100%; overflow:hidden; position:relative;}
section.works div.works-wrapper div.works-inner a.works-link div.image-wrapper span.image-layer{display: block; width:100%; height:100%; background: rgba(17,17,17,0); transition: 0.8s all ease; position:absolute; z-index:1;}
section.works div.works-wrapper div.works-inner a.works-link div.image-wrapper img{vertical-align:bottom; width:100%; height:auto; transform: scale(1.0); transition: 0.8s all ease;}
section.works div.works-wrapper div.works-inner a.works-link:hover div.image-wrapper span.image-layer{ background: rgba(17,17,17,0.5);}
section.works div.works-wrapper div.works-inner a.works-link:hover div.image-wrapper img{transform: scale(1.1);}
section.works div.works-wrapper div.works-inner a.works-link img{width:100%; vertical-align: bottom; transition: 0.8s all ease; }
section.works div.works-wrapper div.works-inner a.works-link h3.works-name{font-size:1.5rem; font-weight:bold; margin-top:17px;}
section.works div.works-wrapper div.works-inner a.works-link p.works-name-en{font-size:1.3rem; margin-bottom:33px; margin-right: 15px;}
section.works div.works-wrapper div.works-inner a.works-link p.works-name-en span:before{content:" / ";}
section.works div.works-wrapper div.works-inner a.works-link p.works-name-en span.border-none:before{content:none;}
section.works p.publication-button{margin:0 auto;}
section.works p.publication-button a{width:100%; height:100%; cursor:pointer; display: block;}


footer div.button-top-wrapper {padding-top:55px;}


@media (max-width: 768px) {
  .ta {display:block;}
  section.works{margin-bottom:0px;}
  section.works div.works-wrapper{padding: 60px 30px 48px;}
  section.works div.works-wrapper h2.sp-title{font-size:2.6rem; text-align:center; margin-top:19px; margin-bottom:30px; letter-spacing:0.01rem;}
  section.works div.works-wrapper div.works-inner{justify-content:center;}
  section.works div.works-wrapper div.works-inner a.works-link{width:50%;}
  section.works div.works-wrapper div.works-inner a.works-link p.works-name-en {margin-bottom: 24px;}
  section.works p.index-button{right:30px;}
  section.works div.works-wrapper div.category-wrapper ul.category{padding:8px 20px 11px;}
}



@media (max-width: 550px) {

  section.works div.works-wrapper{padding: 30px 20px 0px;}
  section.works div.works-wrapper div.works-inner{display:block;}
  section.works div.works-wrapper div.works-inner a.works-link{width:100%;}
  section.works div.works-wrapper div.works-inner a.works-link h3.works-name{margin-top:3px;}
  section.works div.works-wrapper div.works-inner a.works-link p.works-name-en{margin-bottom:18px; margin-right: 0;}
  section.works p.index-button{position:static; margin:0 auto;}
  section.works div.works-wrapper div.category-wrapper ul.category li a{line-height:2;}
  section.works div.works-wrapper h2.sp-title{margin-bottom:21px;}
  section.works div.works-wrapper div.category-wrapper{margin-bottom:30px;}
  section.works div.works-wrapper div.works-inner a.works-link:last-child p.works-name-en{margin-bottom:25px;}
  footer div.button-top-wrapper { padding-top: 40px; }

}
