@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* portfolio -------------------------------------*/
#portfolio .system-contents {
   width: min(95%, 1660px);
   margin-inline: auto;
}
#portfolio .system-list{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 60px 20px;
   margin-bottom: 60px;
}
#portfolio .system-list li a:hover{ text-decoration: none; }
#portfolio .system-pic{width: 100%;height: 17.5rem;overflow: hidden;text-align: center;margin-bottom: 21px;}
#portfolio .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#portfolio .system-area{ 
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: left;
   color: #a1a1a1;
   margin-bottom: 5px;
}
#portfolio .system-ttl-01{
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.625;
   color: #1a1a1a;
}
}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* portfolio -------------------------------------*/
#portfolio .system-contents {
   width: 89.375vw;
   margin-inline: auto;
}
#portfolio .system-list{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 5vw 2.4vw;
   margin-bottom: 14vw;
}
#portfolio .system-list li a:hover{ text-decoration: none; }

#portfolio .system-pic{width: 100%;height: 30.435vw;overflow: hidden;text-align: center;margin-bottom: 2vw;}
#portfolio .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#portfolio .system-area{
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.833333;
   text-align: left;
   color: #a1a1a1;
   margin-bottom: 0vw;
}
#portfolio .system-ttl-01{
   font-weight: bold;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.7142857;
   color: #1a1a1a;
}

}