@charset "utf-8";
/*===================================================== 
 * Last Up Date: 2022/02/24
=====================================================*/
/**----- contents -------
1:common
2:事業案内
3:エネルギーインフラ
4:エンジニアリング
5:ソリューション
----------------------*/
/*== 1:common ==================*/
#products h2{
 font-size: 3.2rem;
 padding-bottom: 10px;
 margin-bottom: 40px;
 border-bottom: #0050a4 1px solid;
}
#products h3{
 font-size: 2.8rem;
 margin-bottom: 30px;
}
#products .wrapper.low p{
 font-size: 1.6rem;
}
#products .wrapper .cont_inner{
 padding: 0 70px 0;
}
@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 750px) {
 #products h2{
  font-size: 2.0rem;
  padding-bottom: 3vw;
  margin-bottom: 5vw;
 }
 #products h3{
  font-size: 1.8rem;
  margin-bottom: 5vw;
 }
 #products p{
  font-size: 1.4rem;
 }
 #products .wrapper .cont_inner{
  padding: 0;
 }
}
/*==============================*/
/*== 2:事業案内 index===========*/
#products #index h2{
 width: 1200px;
 font-size: 3.6rem;
 padding-bottom: 0;
 margin:0 auto 30px; 
 border: none;
}
#products #index h3{
 font-size: 3.6rem;
 padding-bottom: 10px;
 margin:30px 0 25px;
 border-bottom: #0050a4 1px solid;
}
#products #index p{
 padding-bottom: 80px;
}
#products #index .products_list{
 padding-bottom: 50px; 
 text-align: center;
}
#products #index .products_list a img, #products #index .products_list a .products_detail_btn{
 transition: 0.4s ease-in-out;
}
#products #index .products_list a:hover img, #products #index .products_list a:hover .products_detail_btn{
 opacity: 0.7;
}
#products #index .products_list .products_detail_btn{
 display: inline-block;
 color: #fff;
 font-size: 3.2rem;
 padding: 8px 80px 8px 60px;
 margin-top: 20px;
}
#products #index .products_list a[href$="/products/energy.html"]  .products_detail_btn{
 background: #ed6e00 url("../images/btn_icon_02.svg") top 22px right 45px no-repeat;
 background-size: 30px auto;
}
#products #index .products_list a[href$="/products/pipe.html"]  .products_detail_btn{
 background: #009c7c url("../images/btn_icon_02.svg") top 22px right 45px no-repeat;
 background-size: 30px auto;
}
#products #index .products_list a[href$="/products/solution.html"]  .products_detail_btn{
 background: #0050a4 url("../images/btn_icon_02.svg") top 22px right 45px no-repeat;
 background-size: 30px auto;
}
@media screen and (max-width: 750px) {
 #products #index h2{
  width: 95vw;
  font-size: 2.2rem;
  margin:0 auto 3vw;
 }
 #products #index h3{
  font-size: 2.0rem;
  padding-bottom: 3vw;
  margin:5vw 0 7vw;
 }
 #products #index p{
  padding-bottom: 10vw;
 }
 #products #index .products_list{
  padding-bottom: 15vw;
 } 
 #products #index .products_list:last-child{
  padding-bottom: 0;
 }
 #products #index .products_list .products_detail_btn{
  font-size: 1.8rem;
  padding: 2vw 14vw 2vw 10vw;
  margin-top: 2.6vw;
 }
 #products #index .products_list a[href$="/products/energy.html"]  .products_detail_btn{
  background: #ed6e00 url("../images/btn_icon_02.svg") top 55% right 15% no-repeat;
  background-size: 20px auto;
 }
 #products #index .products_list a[href$="/products/pipe.html"]  .products_detail_btn{
  background: #009c7c url("../images/btn_icon_02.svg") top 55% right 15% no-repeat;
  background-size: 20px auto;
 }
 #products #index .products_list a[href$="/products/solution.html"]  .products_detail_btn{
  background: #0050a4 url("../images/btn_icon_02.svg") top 55% right 15% no-repeat;
  background-size: 20px auto;
 }
}
/*==============================*/
/*== 3:エネルギーインフラ
 energy=========================*/
#products #energy h3{
 margin-top: 50px;
}
#products #energy h4{
 color: #fff;
 font-size: 2.2rem;
 padding:5px 20px;
 margin-bottom: 15px;
 background: #ed6e00;
}
#products #energy h4::before{
 content: "●"; 
 color: #f5b08c;
 padding-right: 10px;
}
#products #energy figure{
 width: 535px;
 margin-bottom: 10px;
}
#products #energy .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
/*grid-template-rows: repeat(3, 1fr);*/
grid-template-rows: repeat(1fr,0.5fr,1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
#products #energy .grid .products_list{
 width: 535px;
 font-size: 1.6rem;
 margin-bottom: 50px;
}
 /*#products #energy .grid .products_list:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
#products #energy .grid .products_list:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
#products #energy .grid .products_list:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
#products #energy .grid .products_list:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
#products #energy .grid .products_list:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }*/

 /*20220310 satou edit*/
#products #energy .grid .products_list:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
#products #energy .grid .products_list:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
#products #energy .grid .products_list:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
#products #energy .grid .products_list:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
#products #energy .grid .products_list:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
#products #energy .grid .products_list:nth-child(6) { grid-area: 3 / 2 / 4 / 3; } 

@media screen and (max-width: 750px) {
 #products #energy h3 {
  margin-top: 8vw;
 }
 #products #energy h4 {
  font-size: 1.8rem;
  padding: 2vw 4vw;
  margin-bottom: 5vw;
 }
 #products #energy h4::before {
  padding-right: 5vw;
 }
 #products #energy figure {
  width: 100%;
  margin-bottom: 3vw;
 }
#products #energy .grid {
display: block;
 }
 #products #energy .grid .products_list{
  width: 100%;
  font-size: 1.4rem;
  margin-bottom: 10vw;
 }
 #products #energy .grid .products_list:last-child{
  margin-bottom: 0;
 }
}
/*==============================*/
/*== 4:エンジニアリング
 pipe===========================*/
#products #pipe h3{
 margin-top: 50px;
}
#products #pipe h4{
 color: #fff;
 font-size: 2.2rem;
 padding:5px 20px;
 margin-bottom: 15px;
 background: #009c7c;
}
#products #pipe h4::before{
 content: "●"; 
 color: #d6eace;
 padding-right: 10px;
}
#products #pipe figure{
 width: 535px;
 margin-bottom: 10px;
}
#products #pipe .mt20{
 margin-top: 20px;
}
#products #pipe .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
#products #pipe .grid .products_list{
 width: 535px;
 font-size: 1.6rem;
 margin-bottom: 50px;
}
@media screen and (max-width: 750px) {
 #products #pipe h3 {
  margin-top: 8vw;
 }
 #products #pipe h4 {
  font-size: 1.8rem;
  padding: 2vw 4vw;
  margin-bottom: 5vw;
 }
 #products #pipe h4::before {
  padding-right: 5vw;
 }
 #products #pipe figure {
  width: 100%;
  margin-bottom: 3vw;
 }
#products #pipe .grid {
display: block;
 }
 #products #pipe .grid .products_list{
  width: 100%;
  font-size: 1.4rem;
  margin-bottom: 10vw;
 }
 #products #pipe .grid .products_list:last-child{
  margin-bottom: 0;
 }
}

/*==============================*/
/*== 5:ソリューション
 sol===========================*/
#products #sol h3{
 margin-top: 50px;
}

#products #sol h3 small{
 font-size: 2.2rem;
 }

#products #sol h4{
 color: #fff;
 font-size: 2.2rem;
 padding:5px 20px;
 margin-bottom: 15px;
 background: #0050a4;
}

#products #sol h4 small{
 color: #fff;
 font-size: 1.20rem;
 font-weight: normal;
 padding:5px 0px 5px 0px;
 margin-bottom: 15px;
 /*background: #0050a4;*/
}


#products #sol h4::before{
 content: "●"; 
 color: #45b5ff;
 padding-right: 10px;
}
#products #sol figure{
 width: 535px;
 margin-bottom: 10px;
}
#products #sol .mt20{
 margin-top: 20px;
}
#products #sol .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
#products #sol .grid .products_list{
 width: 535px;
 font-size: 1.6rem;
 margin-bottom: 50px;
}
@media screen and (max-width: 750px) {
 #products #sol h3 {
  margin-top: 8vw;
 }
 #products #sol h4 {
  font-size: 1.8rem;
  padding: 2vw 4vw;
  margin-bottom: 5vw;
 }
 #products #sol h4::before {
  padding-right: 5vw;
 }
 #products #sol figure {
  width: 100%;
  margin-bottom: 3vw;
 }
#products #sol .grid {
display: block;
 }
 #products #sol .grid .products_list{
  width: 100%;
  font-size: 1.4rem;
  margin-bottom: 10vw;
 }
 #products #sol .grid .products_list:last-child{
  margin-bottom: 0;
 }
}

/*==============================*/