@charset "utf-8";

/* CSS Document */
.supportpage .contentheader{background-image: url(../images/support-bg-01.jpg);}

.supportlineup{
  padding-top: 100px;
  padding-bottom: 80px;
  background-color: rgba(246,247,249,1);
  }

.support-list{
  display: flex;
  flex-wrap: wrap;
  }
  .support-item{
    width: calc((100% - 20px) / 2);
    margin-bottom: 20px;
    }
    .support-item:not(:nth-of-type(2n+2)){margin-right: 20px;}
      .support-item_link{
        display: flex;
        width: 100%;
        border-radius: 4px;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
        transition: .3s;
        position: relative;
        overflow: hidden;
        }
        .support-item_link:hover{box-shadow: 0 3px 8px 0 rgb(0 0 0 / 30%);}
        .support-item_link::after{
          content: "";
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,.6);
          /* background-color: rgba(255,255,255,.6); */
          position: absolute;
          top: 0;
          left: 0;
          transition: .3s;
          }
          .support-item_link:hover::after{background-color: rgba(0,0,0,.1);}
        .support-item_fig{
          width: 100%;
          padding-top: 100%;
          background-position: center;
          background-size: cover;
          transform: scale(1.01);
          transition: .3s;
          position: relative;
          }
          .faq .support-item_fig{background-image: url(../images/support-fig-01.jpg);}
          .releasenote .support-item_fig{background-image: url(../images/support-fig-02.jpg);}
          .maintenance .support-item_fig{background-image: url(../images/support-fig-03.jpg);}
          .lfcmaintenance .support-item_fig{background-image: url(../images/support-fig-04.jpg);}
          .support-item_link:hover .support-item_fig{transform: scale(1.05);}
        .support-item_detail{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          padding-top: 10px;
          padding-right: 20px;
          padding-bottom: 10px;
          padding-left: 20px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          z-index: 100;
          }
          .support-item_ttl{
            margin-bottom: 10px;
            font-size: 28px;
            font-weight: 500;
            color: rgba(255,255,255,1);
            }
          .support-item_summary{color: rgba(255,255,255,1);}

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

.supportlineup{
  padding-top: 80px;
  padding-bottom: 60px;
  }
  .support-item_ttl{font-size: 24px;}

}/* max-width: 991px */

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

.supportlineup{
  padding-top: 50px;
  padding-bottom: 35px;
  }
  .support-item{
    width: calc((100% - 15px) / 2);
    margin-bottom: 15px;
    }
    .support-item:not(:nth-of-type(2n+2)){margin-right: 15px;}
  .support-item_ttl{font-size: 20px;}

}/* max-width: 767px */

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

.support-item{
  width: 100%;
  margin-bottom: 15px;
  }
  .support-item:not(:nth-of-type(2n+2)){margin-right: 0;}
  .support-item_fig{padding-top: 50%;}

}/* max-width: 575px */