@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　equipment
 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
/* scroll-margin-top: 80px; */	



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* section
-----------------------------------------------------------------*/

.equipment .tab{
   display: grid;
   grid-column-gap: 3px;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   place-content: center;
   place-self: center;
   padding: 60px 40px 0;
}
.equipment .tab li{
   text-align: center;
   display: flex;
   flex-direction: column;
   border: 1px solid #2e72af;
   border-bottom: none;
   border-radius: 2px 2px 0 0;
}
.equipment .tab li a{
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   background: #fff;
   color: #2e72af;
   padding: 15px 2%;
   line-height: 1.4;
   transition: .5s;
}
.equipment .tab li a:hover{
   background: #2e72af;
   color: #fff;
}
.equipment .tab li.active a{
   background: #2e72af;
   color: #fff;
}

.equipment .tab li.comingsoon:before{
   content: "coming soon";
   display: block;
   color: #2e72af;
   font-size: 13px;
   padding: 10px 0 0;
}
.equipment .tab li.comingsoon a{
   pointer-events: none;
   color: #999;
   padding: 0 2% 15px;
}


.equipment .area-box{
   background: #e2f7ff;
   padding: 90px 0 100px;
}
.equipment .txt-area h2{
   width: 150px;
   margin: 0 auto 52px;
   text-align: center;
}

.equipment .usplus .txt-area h2{
   width: 125px;
}
.equipment .usplus .txt-area h2.kv{
   width: 100%;
}
.equipment .txt-area.str h2{
   width: 200px;
}
.equipment .txt-area.des h2{
   width: 285px;
}
.equipment .txt-area.secu h2{
   width: 168px;
}
.equipment .txt-area.sup h2{
   width: 165px;
}
.equipment .txt-area.eco h2{
   width: 162px;
}

.equipment .txt-area .txt-lead{
   font-size: 30px;
   margin-bottom: 52px;
   text-align: center;
}

.equipment .wrap{
   border: 8px solid #1f50a2;
   background: #fff;
   box-shadow: 0 6px 30px #dee5f1 inset;
   padding: 70px 90px;
}

.equipment .usplus .wrap{
   border: 8px solid #ba6582;
   background: #f8f1f3;
   box-shadow: none;
   padding: 30px 90px 70px;
}

.equipment .wrap .eq-box:not(:last-child){
   margin: 0 0 80px;
}
.equipment .wrap .eq-box h3{
   margin: 0 auto 40px;
}

.equipment .wrap .eq-box .list{
   display: grid;
   gap: 40px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto;
}

.equipment .wrap .eq-box .list.sto_1{
   grid-template-rows: 1fr;
}

.equipment .wrap .eq-box .list.ba_1{
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
}

.equipment .wrap .eq-box .list.us_1{
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
}

.equipment .wrap .eq-box .list.de_1{
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
}

.equipment .wrap .eq-box .list.eco_1{
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
}


.equipment .wrap .eq-box .clm1{
   grid-column: 1 / 1;
   grid-column-end: none;

}
.equipment .wrap .eq-box .list.ot_1{
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
}




/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

   .equipment .tab{
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr;
      place-content: center;
      place-self: center;
      padding: 35px 2.5%;
   }
   .equipment .tab li{
      border-bottom: 1px solid #2e72af;
      border-radius: 2px;
   }
   .equipment .tab li a{
      padding: 15px 2%;
   }
   .equipment .tab li.comingsoon:before{
      padding: 10px 0 0;
   }
   .equipment .tab li.comingsoon a{
      padding: 0 2% 15px;
   }
   
   
   .equipment .area-box{
      padding: 60px 0 100px;
   }
   .equipment .txt-area h2{
      width: 140px;
      margin: 0 auto 40px;
      text-align: center;
   }
   .equipment .usplus .txt-area h2{
      width: 120px;
   }
   .equipment .usplus .txt-area h2.kv{
      width: 100%;
   }

   .equipment .txt-area.str h2{
      width: 190px;
   }

   .equipment .txt-area .txt-lead{
      font-size: 24px;
      margin-bottom: 60px;
   }
   
   .equipment .wrap{
      border-width: 5px;
      box-shadow: 0 6px 30px #dee5f1 inset;
      padding: 40px 16px;
   }
   
   .equipment .usplus .wrap{
      border-width: 5px;
      padding: 30px 16px 45px;
   }
   
   .equipment .wrap .eq-box:not(:last-child){
      margin: 0 0 60px;
   }
   .equipment .wrap .eq-box h3{
      margin: 0 auto 40px;
   }
   
   .equipment .wrap .eq-box .list{
      max-width: 500px;
      margin: 0 auto;
      display: grid;
      gap: 35px;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
   }
   
   .equipment .wrap .eq-box .list.sto_1{
      grid-template-rows: 1fr;
   }
   
   .equipment .wrap .eq-box .list.ba_1{
      grid-template-columns: 1fr;
      grid-template-rows: auto;
   }
   
   
   .equipment .wrap .eq-box .clm1{
      grid-column: 1;
      grid-column-end: auto;
   }
   .equipment .wrap .eq-box .list.ot_1{
      grid-template-columns: 1fr;
      grid-template-rows: auto;
   }
   
   
}