@charset "UTF-8";

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


#case .system-contents {
   width: min(95%, 1280px);
   padding: 7.5rem 0 0;
}
#case .system-contents-inner {
   width: min(95%, 1280px);
   margin-inline: auto;
}
#case .num-bx {
   width: min(95%, 1280px);
   margin-inline: auto;
}
#case .search-box {
   width: min(95%, 1200px);
   margin-inline: auto;
   background: #fff;
   border: 2px solid #53b0c1;
   margin-top: -2.4rem;
   position: relative;
   z-index: 2;
   margin-bottom: 4.95rem;
}
#case .search-box .inner {
   display: grid;
   grid-template-columns: 10% 1fr;
   gap: 1.85rem;
   padding: 2.125rem 4rem 2rem 3.5rem;
   align-items: flex-start;
}
#case .search-box .icon-box {
   display: grid;
   margin: 0.35rem 0 0;
   gap: 1.4rem;
}
#case .search-box .icon-box img {
    margin: 0 0 0 1.25rem;
}
#case .search-box .icon-box .txt {
   font-weight: bold;
   font-size: 20px;
   letter-spacing: 0.1em;
   line-height: 1;
}
#case .search-box .item {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1.25rem;
}
#case .search-box .item li a{
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   display: block;
   padding: 0.8rem 0 1.0125rem;
}
#case .search-box .item li:nth-child(1) {background-color: #6C6B6B;}
#case .search-box .item li:nth-child(2) {background-color: #D54238;}
#case .search-box .item li:nth-child(3) {background-color: #F07E31;}
#case .search-box .item li:nth-child(4) {background-color: #EAA73B;}
#case .search-box .item li:nth-child(5) {background-color: #8AAB3B;}
#case .search-box .item li:nth-child(6) {background-color: #4C8228;}
#case .search-box .item li:nth-child(7) {background-color: #549BEB;}
#case .search-box .item li:nth-child(8) {background-color: #3173BE;}
#case .search-box .item li:nth-child(9) {background-color: #9C6AA5;}
#case .search-box .item li:nth-child(10) {background-color: #DC64BB;}
#case .system-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0 2.5rem;
}
#case .system-list li {
   display: contents;
}
#case .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
   margin-bottom: 3.75rem;
}
#case .system-pic {
   margin-bottom: 0;
}
#case .system-pic img {
   height: 17.5rem;
}
#case .system-category span {
   display: block;
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   padding: 0.6rem 0;
   margin-bottom: 0.25rem;
}
#case .system-category span.icon01 {
   background-color: #D54238;
}
#case .system-category span.icon02 {
   background-color: #F07E31;
}
#case .system-category span.icon03 {
   background-color: #EAA73B;
}
#case .system-category span.icon04 {
   background-color: #8AAB3B;
}
#case .system-category span.icon05 {
   background-color: #4C8228;
}
#case .system-category span.icon06 {
   background-color: #549BEB;
}
#case .system-category span.icon07 {
   background-color: #3173BE;
}
#case .system-category span.icon08 {
   background-color: #9C6AA5;
}
#case .system-category span.icon09 {
   background-color: #DC64BB;
}
#case .system-category span.icon10 {
   background-color: #534741;
}
#case .system-ttl-01 {
   font-weight: 400;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.875;
   text-align: left;
   border-bottom: 1px solid #707070;
   padding: 0 0 0.5rem;
   margin-bottom: 0.5rem;
}
#case .system-name {
   font-weight: 400;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.71428;
   text-align: left;
   color: #1c1c1c;
}

#case .system-contents-inner{}
#case .system-contents-inner .system-area{
font-size: 20px; line-height: 1.6; letter-spacing: 1px; 
}

#case .system-contents-inner .system-name {
border-bottom: 1px solid #707070;
padding: 8px 0px 8px 0px;
   font-weight: 400;
   font-size: 22px;
   letter-spacing: 0.05em;
   line-height: 1.71428;
   text-align: left;
   color: #1c1c1c;
}


#case .cate-list {
   width: min(95%, 1600px);
   margin-inline: auto;
   background: #E5E5E5;
   padding: 20px 20px 0;
}
#case .cate-list .icon01 {
   background-color: #D54238;
}
#case .cate-list .icon02 {
   background-color: #F07E31;
}
#case .cate-list .icon03 {
   background-color: #EAA73B;
}
#case .cate-list .icon04 {
   background-color: #8AAB3B;
}
#case .cate-list .icon05 {
   background-color: #4C8228;
}
#case .cate-list .icon06 {
   background-color: #549BEB;
}
#case .cate-list .icon07 {
   background-color: #3173BE;
}
#case .cate-list .icon08 {
   background-color: #9C6AA5;
}
#case .cate-list .icon09 {
   background-color: #DC64BB;
}
#case .cate-list .icon10 {
   background-color: #534741;
}
#case .cate-list span a {
   color: #fff;
   font-weight: 700;
}
#case .system-contents.single .system-category {
   margin-top: 1rem;
}
#case .system-contents.single .system-category span {
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   display: inline-block;
   padding: 0.8rem 2.5rem 1.0125rem;
}
#case .case-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2rem 1.5rem;
}
#case .case-list {
   margin-bottom: 4rem;
}
#case .case-img h3 {
   text-align: center;
   font-size: 1rem;
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 700;
}

.case-img.after{ text-align: center;}
.case-img.before{ text-align: center;}

#case .case-img img {
   width: auto;
   max-height: 20rem;
}
#case .inner-gallery-case {
   margin-bottom: 4rem;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
   #case .system-list {
      gap: 0 3.125vw;
      margin-bottom: 6.25vw;
  }
   #case .search-box {
      margin-top: -3vw;
      margin-bottom: 6.188vw;
   }
   #case .search-box .inner {
      gap: 2.313vw;
      padding: 2.656vw 5vw 2.5vw 4.375vw;
      align-items: center;
   }
   #case .search-box .item {
      gap: 1.563vw;
   }
   #case .search-box .item li a {
      font-size: 1.25vw;
      padding: 1vw 0 1.266vw;
   }
   #case .search-box .icon-box {
      gap: 1.719vw;
   }
   #case .search-box .icon-box img {
      width:4.609vw;
   }
   #case .search-box .icon-box .txt {
      font-size: 1.563vw;
   }

}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#case .system-contents {
   padding: 19.3236714976vw 0 0;
}
#case .search-box {
   background: #fff;
   border: 0.5vw solid #53b0c1;
   margin-top: -2vw;
   position: relative;
   z-index: 2;
   margin-bottom: 12.5vw;
}
#case .search-box .inner {
   display: grid;
   gap: 1vw;
   padding: 7vw 0vw;
}
#case .search-box .icon-box {
   display: grid;
   margin: 0vw 0 4vw 25vw;
   gap: 2vw;
   grid-template-columns: 29% 1fr;
   justify-content: center;
   width: 29.8vw;
   align-items: center;
}
#case .search-box .icon-box .txt {
   font-weight: bold;
   font-size:4.348vw;
   letter-spacing: 0.1em;
   line-height: 1;
   margin: -1vw 0 0;
}
#case .search-box .item {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4.8vw 3.5vw;
   width: 83.6vw;
   margin-inline: auto;
}
#case .search-box .item li a{
   font-weight: bold;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   display: block;
   padding: 3.505vw 0;
}
#case .search-box .item li:nth-child(1) {background-color: #6C6B6B;}
#case .search-box .item li:nth-child(2) {background-color: #D54238;}
#case .search-box .item li:nth-child(3) {background-color: #F07E31;}
#case .search-box .item li:nth-child(4) {background-color: #EAA73B;}
#case .search-box .item li:nth-child(5) {background-color: #8AAB3B;}
#case .search-box .item li:nth-child(6) {background-color: #4C8228;}
#case .search-box .item li:nth-child(7) {background-color: #549BEB;}
#case .search-box .item li:nth-child(8) {background-color: #3173BE;}
#case .search-box .item li:nth-child(9) {background-color: #9C6AA5;}
#case .search-box .item li:nth-child(10) {background-color: #DC64BB;}
#case .system-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 9.67vw 4.8vw;
   margin-bottom: 12.1vw;
}
#case .system-pic {
   margin-bottom: 0;
}
#case .system-pic img {
   height: 31.404vw;
}
#case .system-category span {
   display: block;
   font-weight: bold;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   padding: 1.33vw 0;
   margin-bottom: 2vw;
}
#case .system-category span.icon01 {
   background-color: #D54238;
}
#case .system-category span.icon02 {
   background-color: #F07E31;
}
#case .system-category span.icon03 {
   background-color: #EAA73B;
}
#case .system-category span.icon04 {
   background-color: #8AAB3B;
}
#case .system-category span.icon05 {
   background-color: #4C8228;
}
#case .system-category span.icon06 {
   background-color: #549BEB;
}
#case .system-category span.icon07 {
   background-color: #3173BE;
}
#case .system-category span.icon08 {
   background-color: #9C6AA5;
}
#case .system-category span.icon09 {
   background-color: #DC64BB;
}
#case .system-category span.icon10 {
   background-color: #534741;
}
#case .system-ttl-01 {
   font-weight: 400;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.42857;
   text-align: left;
   border-bottom: 0.2vw solid #707070;
   padding: 0 0 2.4vw;
   margin-bottom: 3vw;
}
#case .system-name {
   font-weight: 400;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.71428;
   text-align: left;
   color: #1c1c1c;
}

#case .cate-list {
   width: min(95%, 94.2vw);
   margin-inline: auto;
   background: #E5E5E5;
   padding: 3.6vw 3.6vw 0;
}
#case .cate-list .icon01 {
   background-color: #D54238;
}
#case .cate-list .icon02 {
   background-color: #F07E31;
}
#case .cate-list .icon03 {
   background-color: #EAA73B;
}
#case .cate-list .icon04 {
   background-color: #8AAB3B;
}
#case .cate-list .icon05 {
   background-color: #4C8228;
}
#case .cate-list .icon06 {
   background-color: #549BEB;
}
#case .cate-list .icon07 {
   background-color: #3173BE;
}
#case .cate-list .icon08 {
   background-color: #9C6AA5;
}
#case .cate-list .icon09 {
   background-color: #DC64BB;
}
#case .cate-list .icon10 {
   background-color: #534741;
}
#case .cate-list span a {
   color: #fff;
   font-weight: 700;
}
#case .system-contents.single .system-category {
   margin-top: 1rem;
}
#case .system-contents.single .system-category span {
   font-weight: bold;
   font-size: 3.865vw;
   letter-spacing: 0.05em;
   line-height: 1;
   text-align: center;
   color: #fff;
   display: inline-block;
   padding: 3.505vw ;
}
#case .case-list {}
#case .case-list {
   margin-bottom: 4rem;
}
#case .case-img h3 {
   text-align: center;
   font-size: 1.4rem;
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 700;
}

.case-img.after{ text-align: center;}
.case-img.before{ text-align: center;}

#case .case-img img {
   width: auto;
   max-height: 20rem;
}
#case .inner-gallery-case {
   margin-bottom: 4rem;
}

#case .system-contents-inner{}
#case .system-contents-inner .system-area{
font-size:3.86vw; line-height: 1.6; letter-spacing: 1px; 
}

#case .system-contents-inner .system-name{
font-size:4.35vw; line-height: 1.6; letter-spacing: 1px; 
border-bottom: 1px solid #707070;
padding: 2vw 0px 3vw 0px;
margin: 0 0 3vw 0;
}


}