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

 * サポート内容

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

#support {

   padding-bottom: 160px;
   margin-top: 96px;
}



#support h2 {

   position: relative;

   padding-bottom: 20px;

}



#support h2:before {

   content: '';

   width: 100%;

   height: 4px;

   background: linear-gradient(to right, #3174e7 45px, #e2e2e2 45px);

   position: absolute;

   bottom: 0;

   left: 0;

}



#support .block-1 .box {

   background-color: #fff;

   border-radius: 26px;

   position: relative;

   margin-top: 60px;

   padding: 40px 40px 40px 110px;

   position: relative;

}



#support .block-1 .box+.box {

   margin-top: 15px;

}



#support .block-1 .box .icon {

   width: 55px;

   position: absolute;

   top: 50%;

   left: -70px;

   transform: translateY(-50%);

}



#support .block-1 .box h3 {

   position: relative;

}



#support .block-1 .box .txt {

   line-height: 34px;

   padding-top: 15px;

}



#support .block-2 {

   padding-top: 100px;

}



#support .block-2 .box {

   display: grid;

   grid-template-columns: 1fr 1fr 1fr;

   gap: 30px;

   padding-top: 60px;

}



#support .block-2 .box .col {

   background-color: #fff;

   position: relative;

}



#support .block-2 .box .col+.col:before {

   content: '';

   width: 13px;

   height: 23px;

   background: url("../images/common/arrow-right-grey.png") no-repeat center top/cover;

   position: absolute;

   top: 50%;

   left: -21px;

   transform: translateY(-50%);

}



#support .block-2 .box h3 {

   display: flex;

   align-items: center;

   gap: 25px;

   background-color: #3174e7;

   color: #fff;

   border-radius: 26px 26px 0 0;

   padding: 21px 15px;

}



#support .block-2 .box h3 span {

   display: inline-block;

   background-color: #fff;

   font-weight: 700;

   font-size: 16px;

   border-radius: 30px;

   padding: 3px 24px;

}



#support .block-2 .box .txt {

   padding: 40px 30px;

}



#support .block-2 .box .txt ul {

   padding-top: 20px;

}



#support .block-2 .box .txt ul li {

   text-indent: -16px;

   padding-left: 16px;

}



#support .block-3 {

   padding-top: 100px;

}



#support .block-3 .box {

   display: grid;

   grid-template-columns: 1fr 1fr 1fr;

   gap: 30px;

   padding-top: 60px;

}



#support .block-3 .box .col {

   background-color: #fff;

   position: relative;

}



#support .block-3 .box .text {

   padding: 30px;

}



#support .block-3 .box h3 {

   font-weight: bold;

}



#support .block-3 .box .txt {

   line-height: 36px;

   padding-top: 15px;

}



@media screen and (max-width: 1023px) {

   #support .block-2 .box h3 {

      flex-direction: column;

      align-items: center;

      gap: 10px;

   }

}



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

   #support {
      margin-top: 64px;
      padding-bottom: 50px;

   }



   #support .block-1 .box {

      margin-top: 30px;

      padding: 20px;

   }



   #support .block-1 .box h3 {

      text-align: center;

      padding-top: 50px;

   }



   #support .block-1 .box .icon {

      top: 0;

      left: 50%;

      transform: translateX(-50%);

   }



   #support .block-2 {

      padding-top: 50px;

   }



   #support .block-2 .box {

      grid-template-columns: 1fr;

      padding-top: 30px;

   }



   #support .block-2 .box .col+.col:before {

      top: -25px;

      left: 50%;

      transform: translate(-50%, 0) rotate(90deg);

   }



   #support .block-2 .box h3 {

      flex-direction: row;

      gap: 20px;

   }



   #support .block-2 .box h3 span {

      font-size: 14px;

   }



   #support .block-3 {

      padding-top: 50px;

   }



   #support .block-3 .box {

      grid-template-columns: 1fr;

      padding-top: 30px;

   }

}