.archive-works.page-top-wrapper {
   height: 0;
   margin-top: 0;
   margin-bottom: 0;
}
.category{
   display: flex;
   gap: 20px;
   margin: 30px 0 100px;
   justify-content: center;
   align-items: center;
}
h3 {
   margin: 20px 0 15px;
}
.category a{
   color: #a8a8a8;
   padding: 7px 8px;
   transition: .3s;
   font-size: 20px;
   font-weight: bold;
   border-bottom: 2px solid #a8a8a8;
}
.category a:hover{
   color: #5c5c5c;
   transition: .3s;
   border-bottom: 2px solid #5c5c5c;
}


.category h2 a{
   color: #000;
   border-bottom: 2px solid #000;
}
.page-top-wrapper img{
   height: 1000px;
}
.page-top-wrapper::after {
    background: linear-gradient(to top, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 50%) 30%, rgb(255 255 255 / 50%) 50%, rgb(255 255 255 / 80%) 80%, rgb(255 255 255 / 100%) 100%);
    height: 1000px;
}
h1{
   margin-bottom: 10px;
}
h2.cat{
   display: inline-block;
   margin: 25px 0 35px!important;
   padding-left: 46px;
}
h2.cat::before{
   content: '';
   position: absolute;
   height: 1px;
   top: calc(50% + 0px);
   transform: translateY(-50%);
   left: 0;
   width: 30px;
   background-color: #687178;
}
h2.cat::after {
   content: '';
   position: absolute;
   left: 20px;
   top: calc(50% + 0px);
   transform: translateY(-50%);
   height: 2px;
   width: 10px;
   background-color: #df690b;
}
.contents-container.with-top-img{
   max-width: 1200px;
   padding: 0 20px;
   margin-top: unset;
   margin: 40px auto 80px;
   background-color: transparent;
}
main .works-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 50px;
   justify-items: center;
   justify-content: center;
   margin: 60px auto;
}
.work-inner{
   max-width: 350px;
}
.work-img img{
   min-width: 300px;
}
.work-img{
   position: relative;
}
.work-img::after{
   position: absolute;
   content: '';
   right: 22px;
   width: 17px;
   height: 6px;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
   transform: skew(45deg);
   transition: .3s;
}
.web-design .work-img::after{
   bottom: 15px;
}
.seo .work-img img{
   max-height: 120px;
   object-fit: contain;
}
.seo .work-img::after{
   bottom: -32px;
}
.work-inner a:hover .work-img::after{
   right: 18px;
   transition: .3s;
}
.phrase br{
   display: none;
}
.txt{
   color: #000;
}
.txt p{
   font-size: 14px;
   line-height: 1.6em;
}
.archive .work-title{
   font-size: 16px;
   text-align:center;
}