@charset "UTF-8";

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

/* shop -------------------------------------*/
#shop .system-contents {
   width: min(95%, 1660px);
   margin-inline: auto;
}

#shop .system-contents{
padding: 3.5rem 0 0rem;}

#shop .system-list{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 60px 20px;
   margin-bottom: 60px;
}

#shop .textbx{width: 1000px;margin: 0 auto 15px;text-align: center;}
#shop .system-category {display: flex;gap: 20px;justify-content: center;}


#shop .system-list li a:hover{ text-decoration: none; }
#shop .system-pic{width: 100%;height: 17.5rem;overflow: hidden;text-align: center;margin-bottom: 21px;}
#shop .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#shop .system-area{ 
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: left;
   color: #a1a1a1;
   margin-bottom: 5px;
}
#shop .system-ttl-01{
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.625;
   color: #1a1a1a;
}
#shop .shop-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2rem 1.5rem;
}
#shop .shop-img {
   text-align: center;
}
#shop .shop-img img {
max-height: 500px;
max-width: 800px;
height: auto;
margin: auto;
}
#shop .shop-img h3 {
   text-align: center;
   font-size: 1rem;
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 700;
}
#shop .shop-container {
   margin-bottom: 8rem;
}
#shop .gallery-ttl {
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: 0.05em;
   line-height: 1.5;
   color: #1a1a1a;
   margin-bottom: 1rem;
   text-align: center;
}
}


@media screen and (min-width:768px) and (max-width:1770px) {
#shop .shop-img img {
max-height: 30.6582vw;
max-width: 42.5639vw;
height: auto;
margin: auto;
}
}

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

#shop .system-contents{padding: 10.323671vw 0 19.323671vw;}
#shop .textbx{width: 88vw;margin: 0 auto 3vw;text-align: center;}
#shop .system-category {display: flex;gap: 2vw;justify-content: center;}

/* shop -------------------------------------*/
#shop .system-list{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 5vw 2.4vw;
   margin-bottom: 14vw;
}
#shop .system-pic{width: 100%;height: 30.435vw;overflow: hidden;text-align: center;margin-bottom: 2vw;}
#shop .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#shop .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;
}
#shop .system-ttl-01{
   font-weight: bold;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.7142857;
   color: #1a1a1a;
}
#shop .gallery-ttl {
   font-weight: 700;
   font-size: 3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.5;
   color: #1a1a1a;
   margin-bottom: 2vw;
   text-align: center;
}
#shop .shop-lists {
   margin-bottom: 5.5vw;
}
#shop .shop-list {
   display: grid;
   gap: 3.5vw;
}
#shop .shop-list h3 {
   font-size: 4.2vw;
   font-weight: 700;
   text-align: center;
}
}