@charset "UTF-8";

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

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

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

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