@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
#works .system-contents {
   width: min(95%, 1200px);
   margin-inline: auto;
}
#works .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 60px;
   margin-bottom: 80px;
}
#works .system-list li {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
   margin-bottom: 60px;
}
#works .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
}
#works .system-pic {
   margin-bottom: 20px;
   width: 100%;
   height: 260px;
   text-align: center;
}
#works .system-pic img{
   width: auto;
   height: 100%;
   max-width: 100%;
}
#works .system-category {
   font-size: 12px;
   letter-spacing: 0.05em;
   line-height: 2.3333;
   color: #fff;
   margin-bottom: 11px;
}
#works .system-category span {
   text-align: center;
   border-radius: 2px;
   background: #839b95;
   padding: 0 14px;
   display: inline-block;
}
#works .system-ttl-01 {
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.875;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   margin-bottom: 17px;
}
#works .system-area {
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 2;
   color: #a4a4a4;
   border-bottom: 1px solid #A4A4A4;
   padding-bottom: 8px;
}
#works .cate-list span {
   background: #839b95;
}
#works article .num-bx {
   margin-bottom: 40px;
}
}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#works .system-contents { 
   width: 91.79vw;
   margin-inline: auto;
}
#works .system-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 4.83vw;
   margin-bottom: 11vw;
}
#works .system-list li {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
   margin-bottom: 9.5vw;
}
#works .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
}
#works .system-pic {
   margin-bottom: 3.38vw;
   width: 100%;
   height: 31.40vw;
   text-align: center;
}
#works .system-pic img{
   width: auto;
   height: 100%;
   max-width: 100%;
}
#works .system-category {
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 2.3333;
   color: #fff;
   margin-bottom: 2vw;
}
#works .system-category span {
   text-align: center;
   border-radius: 0.48vw;
   background: #839b95;
   padding: 0.1vw 3.32vw;
   display: inline-block;
}
#works .system-category .cat02 {
   padding: 0.1vw 1.95vw;
}
#works .system-ttl-01 {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.71428;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   margin-bottom: 3.5vw;
}
#works .system-area {
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.8333;
   color: #a4a4a4;
   border-bottom: 0.2vw solid #A4A4A4;
   padding-bottom: 1.8vw;
}
#works .cate-list span {
   background: #839b95;
}
#works article .num-bx {
   margin-bottom: 2vw;
}
}