@charset "UTF-8";

/*--------------------------------------------
  Service 共通
---------------------------------------------*/
.service_title {
  padding: 0;
  background-position: bottom center;
  background-repeat: no-repeat;

  .inner {
    height: clamp(285px, 37vw, 480px);
    @media (width <= 767px) {
      height: 240px;
    }
  }

  .service_ttl {
    bottom: 6%;

    .title {
      @media (width <= 1024px) {
        font-size: 4.6rem;
      }
    }
  }
}

/* 各サービスキャッチコピー＋テキスト部分 */ 
.intro {
  .catch {
    margin-bottom: clamp(20px, 5vw, 35px);

    @media (width <= 1024px) {
      margin-top: clamp(20px, 13vw, 80px);
      margin-bottom: clamp(15px, 5vw, 50px);
      margin-bottom: 20px;
    }
    @media (width <= 767px) {
      margin-top: 8%;
    }
  }
}

/* 各サービスコンテンツ（背景色グレーの箇所） */ 
.construction {
  margin-top: clamp(30px, 7vw, 80px);
  background-color: #F2F2F2;

  @media (768px <= width <= 1024px) {
    margin-top: clamp(60px, 14vw, 140px);
    margin-top: 100px;
  }

  @media (width <= 767px) {
    margin-top: clamp(50px, 20vw, 180px);
  }

  .sub_ttl {
    font-size: 5.4rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: clamp(30px, 7vw, 80px);
    position: relative;
    z-index: 2;

    @media (width >= 768px) and (width <= 1024px) {
      font-size: 4.5rem;
    }
    @media (width <= 1024px) {
      font-size: 3.6rem;
      line-height: 1.25;
    }

    &::before {
      position: absolute;
      display: block;
      color: #C8D6E3;
      font-size: 8rem;
      font-weight: 500;
      line-height: 0.9;
      z-index: -1;
      width: 100%;
      min-width: 350px;
      max-width: 1400px;
      top: -0.6em;
      left: -2vw;

      @media (768px <= width <= 1024px) {
        font-size: 4.5rem;
      }
      @media (width <= 767px) {
        font-size: 3.75rem;
        font-weight: 400;
        min-width: 350px;
        max-width: 350px;
      }
    }
  }

  /* コンテンツ内 メイン画像とテキスト */ 
  .wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    @media (width <= 767px) {
      flex-direction: column;
    }

    .img_area {
      width: 55%;
      @media (width <= 767px) {
        width: 100%;
      }
      img {
        max-width: 110%;
        @media (width <= 767px) {
          max-width: 100%;
        }
      }
    }

    .txt_area {
      background-color: #FFF;
      padding: clamp(20px, 3.5vw, 50px) clamp(16px, 4vw, 64px) clamp(24px, 4vw, 64px);
      /*max-width: 800px;
      min-width: 600px;
      width: 44vw;
      min-height: 387px;
      *position: absolute;
      right: 0;*/
      position: relative;
      z-index: 2;
      width: 50%;
      margin-left: -5%;
      margin-top: 5%;

      @media (width <= 1024px) {
      }
      @media (width <= 767px) {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
      }

      .txt_box:not(:last-of-type) {
        padding-bottom: 20px;
      }
    }
  }

  /* 主な施工実績 */ 
  .wrap_btm {
    justify-content: space-between;
    align-items: flex-start;

    @media (width <= 1024px) {
      display: block;
      padding: clamp(30px, 16vw, 160px) 0 clamp(50px, 52vw, 250px);
    }

    .item_ttl {
      font-size: 3.4rem;
      font-weight: bold;
      max-width: 450px;
      width: clamp(8em, 36vw, 9em);

      @media (768px <= width <= 1024px) {
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin-bottom: 4vw;
        font-size: 3rem;
      }
      @media (width <= 767px) {
        font-size: 2.4rem;
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: clamp(20px, 13vw, 100px);
        margin-bottom: 30px;
      }
    }

    .menu {
      width: 68%;
      gap: 30px;
      grid-column: 1;
      justify-items: stretch;
      align-items: stretch;

      @media (768px <= width <= 1024px) {
        width: 100%;
      }
      @media (width <= 767px) {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: 1fr;
      }
    }

    .grid_item {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      height: 100%;

      &:not(:last-child) {
        @media (width <= 767px) {
          margin-bottom: clamp(20px, 6.5vw, 80px);
          margin-bottom: 18px;
        }
      }
    }

    .txt {
      width: 100%;
      height: clamp(60px, 7.7vw, 77px);
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.4;
      color: #0F5CA8;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      background-color: #FFF;
      filter: drop-shadow(0px 0px 10px #ccc);

      @media (width <= 1024px) {
        font-size: 1.6rem;
        filter: none;
        box-shadow: 0px 0px 10px #ccc;
      }
    }
  }
}

/****** Service各ページ ******/ 
/*--------------------------------------------
  1 情報通信設備
---------------------------------------------*/
.service01 {
  margin-top: clamp(60px, 14vw, 180px);
  @media (width <= 767px) {
    margin-top: 29%;
    margin-top: 80px;
  }

  .service_title {
    background-image: url("/assets/img/service/service_bg01.jpg");
    background-size: cover;

    @media (width <= 1024px) {
      background-image: url("/assets/img/service/service_bg01_sp.jpg");
    }
    @media (width <= 767px) {
      height: 240px;
    }
  }

  /* マルチメディアエンジニアリングの「情報通信設備」施工 */ 
  .construction {
    padding: clamp(50px, 4.8em, 100px) 0 clamp(60px, 10vw, 140px);

    @media (768px <= width <= 1024px) {
      padding: clamp(30px, 4vw, 90px) 0 100px;
    }
    @media (width <= 767px) {
      padding: clamp(60px, 8vw, 160px) 0 100px;
      padding-top: 80px;
      margin-top: 80px;
    }

    .sub_ttl::before {
      content: "INFORMATION AND COMMUNICATION EQUIPMENT";
      top: -1.3em;

      @media (768px <= width <= 1024px) {
        top: -7vw;
      }
      @media (width <= 767px) {
        top: -100px;
      }
    }

    /* コンテンツ内 メイン画像とテキスト */ 
    .wrap {
      .txt_area {

        @media (width <= 1024px) {
        }
        @media (width <= 767) {
          margin-top: 50%;
        }
      }
    }

    /* 主な施工実績 */ 
    .wrap_btm {
      /*padding: clamp(60px, 15.5vw, 180px) 0 0;*/
      padding-top: 6%;

      @media (768px <= width <= 1024px) {
        padding: 0;
        margin-top: 6%;
      }
      @media (width <= 767px) {
        /*padding: clamp(100px, 71vw, 300px) 0 0;
        margin-top: clamp(100px, 82vw, 300px);*/
        padding: 0;
        margin-top: 10%;
      }
    }
  }
}

/*--------------------------------------------
  2 電気設備
---------------------------------------------*/
.service02 {

  .service_title {
    background-image: url("/assets/img/service/service_bg02.jpg");
    background-size: cover;

  @media (width <= 1024px) { 	
    /* background-image: url("/assets/img/service/service_bg02_sp.jpg"); */ 	
    } 
  }

  /* マルチメディアエンジニアリングの「電気設備」施工 */
  .construction {
    padding: clamp(50px, 4.8em, 100px) 0 clamp(60px, 10vw, 140px);

    @media (768px <= width <= 1024px) {
      padding: clamp(30px, 4vw, 90px) 0 100px;
    }
    @media (width <= 767px) {
      padding: clamp(36px, 4.5vw, 90px) 0 100px;
    }

    .sub_ttl::before {
      content: "ELECTRICAL EQUIPMENT";

      @media (768px <= width <= 1024px) {
        top: -7vw;
      }
      @media (width <= 767px) {
        top: -15vw;
      }
    }

    /* コンテンツ内 メイン画像とテキスト */ 
    .wrap {
      .txt_area {

        @media (width <= 1024px) {
        }
      }
    }

    /* 主な施工実績 */ 
    .wrap_btm {
      padding: clamp(40px, 11vw, 140px) 0 0;
      padding-top: 6%;

      @media (768px <= width <= 1024px) {
        padding: 0;
        margin-top: 6%;
      }

      @media (width <= 767px) {
        padding: 0;
        margin-top: 10%;
      }

      .txt {
        padding: clamp(8px, 1vw, 12px) 0;
      }
    }
  }
}

/*--------------------------------------------
  3 保守メンテナンス
---------------------------------------------*/
.service03 {

  .service_title {
    background-image: url("/assets/img/service/service_bg03.jpg");
    background-size: cover;

    @media (width <= 1024px) { 	
    /* background-image: url("/assets/img/service/service_bg03_sp.jpg"); */ 	
    }

    .title {
      @media (width <= 767px) {
        font-size: 3.7rem;
      }
    }
  }

  /* マルチメディアエンジニアリングの「保守・メンテナンス」 */
  .construction {
    padding: clamp(10px, 0.2vw, 20px) 0 clamp(80px, 15vw, 200px);

    @media (768px <= width <= 1024px) {
      padding: clamp(30px, 4vw, 90px) 0 200px;
    }
    @media (width <= 767px) {
      margin-top: clamp(120px, 35vw, 250px);
      margin-top: 80px;
      padding: 0 0 120px;
    }

    .sub_ttl::before {
      content: "MAINTENANCE";

      @media (768px <= width <= 1024px) {
        top: -7vw;
      }
      @media (width <= 767px) {
        top: -4vw;
      }
    }

    /* コンテンツ内 メイン画像とテキスト */ 
    .wrap {
      .txt_area {

        @media (width <= 1024px) {
        }
      }
    }

    /* 主な施工実績 */ 
    .wrap_btm {
      padding: clamp(40px, 9.5vw, 120px) 0 0;

      @media (768px <= width <= 1024px) {
        padding: 0;
        margin-top: 6%;
      }
      @media (width <= 767px) {
        padding: 0;
        margin-top: 10%;
      }

      .grid_item:first-child {
        margin-bottom: clamp(20px, 30px, 40px);
        
        @media (768px <= width <= 1024px) {
          padding: 0;
        }
        @media (width <= 102767px4px) {
          margin-bottom: clamp(20px, 6.5vw, 80px);
        }
      }
    }
  }
}