/* 2024/03/15 rename & add */
@charset "UTF-8";
.contractgate_top {
    position: relative;
}

.contractgate_top a {
    color: #004b8b; /* あざやかな青紫系の色 */
    text-decoration: none;
}

.contractgate_top .main .text_area {
    /* padding: 200px 0; */
    text-align: center;
}

@media screen and (max-width: 736px) {
    .contractgate_top .main .text_area {
        /* padding: 200px 15px; */
        text-align: center;
    }
}

.contractgate_top .main .text_area .heading {
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 2px 5px #1e1e1e;
}

@media screen and (max-width: 500px) {
    .contractgate_top .main .text_area .heading {
        font-size: 30px;
    }
}

.contractgate_top .main .text_area .catch {
    margin-top: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

@media screen and (max-width: 500px) {
    .contractgate_top .main .text_area .catch {
        font-size: 17px;
    }
}

@media screen and (max-width: 500px) {
    .contractgate_top .main .text_area .catch br {
        display: none;
    }
}

.contractgate_top .main .text_area .intro {
    width: 500px;
    margin: 40px auto 0;
    color: #ffffff;
}

@media screen and (max-width: 736px) {
  .contractgate_top .main .text_area .intro {
    width: 100%;
    margin: 40px auto 0;
    color: #ffffff;
  }
}
.contractgate_top .news {
  width: 100%;
  background-color: #ffffff;
  display: flex;
}

.contractgate_top .news .heading {
  padding: 15px;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contractgate_top .news .ticker {
  margin: 0 auto;
  width: 100%;
  text-align: left;
  position: relative;
  overflow: hidden;
  height: auto !important;
  padding: 15px;
}

.contractgate_top .news .ticker ul {
    width: 100%;
    position: relative;
    /* 2022/8/5 パディング設定 */
/*    padding-inline-start: 10px; */
}

.contractgate_top .news .ticker ul li {
    width: 100%;
    display: none;
    list-style: none; /* 2022/8/5 リストタグ中点非表示 */
}

.contractgate_top .news .date {
  margin-right: 20px;
}

.contractgate_top .first {
  padding: 60px 0 100px;
  background-image: url(../img/cg_bg_wt.png);
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 736px) { /* 2023/1/10 730 -> 736 */
  .contractgate_top .first {
    padding: 100px 0 60px;
  }
}
.contractgate_top .first:before {
  position: absolute;
  content: "First";
  top: 20px;
  right: 30px;
  font-size: 80px;
  color: rgba(23, 120, 176, 0.4);
  font-family: "DIN Next LT W01 Light";
}

@media screen and (max-width: 730px) {
  .contractgate_top .first:before {
    font-size: 60px;
  }
}
.contractgate_top .first .heading {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
}

@media screen and (max-width: 730px) {
  .contractgate_top .first .heading {
    font-size: 28px;
  }
}

.contractgate_top .first .catch {
  margin-top: 20px;
  padding: 0 15px;
  text-align: center;
  font-size: 20px;      /* 2023/7/31 add */
  font-weight: bold;    /* 2023/7/31 add */
}

.contractgate_top .slider {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  max-width: 1100px;
  margin: 40px auto 30px;
}

@media (max-width: 650px) {
    .contractgate_top .slider {
        width: calc(100% - 10px);
        margin-top: 20px;
    }
}
.contractgate_top .product .slider {
    margin-bottom: 20px;
}

.contractgate_top .slider img.slider_arrow {
    width: 35px;
    height: 60px;
    padding: 0 10px;
    display: none !important;
}

@media screen and (max-width: 900px) {
    .contractgate_top .slider img.slider_arrow {
        display: block !important;
    }
}

@media screen and (max-width: 700px) {
    .contractgate_top .slider img.slider_arrow {
        width: 20px;
        height: auto;
        padding: 0px;
    }
}
.contractgate_top .slider .slider_arrow:hover {
    cursor: pointer;
}

.contractgate_top .slider .slide {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

@media screen and (max-width: 630px) {
    .contractgate_top .slider .slide {
        height: 200px;
        margin: 0 5px;
    }
}
@media screen and (max-width: 470px) {
    .contractgate_top .slider .slide {
        height: 300px;
        margin: 0 10px;
    }
}
.contractgate_top .slider .slide:hover {
    cursor: pointer;
    text-decoration: none;
}

.contractgate_top .slider .slide:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -ms-background-size: cover;
    background-size: cover;
    transition: all 0.3s ease-out;
    z-index: -1;
}

.contractgate_top .slider .slide01:after {
    background: url(../img/cg_first01.png) no-repeat center center;
}

.contractgate_top .slider .slide02:after {
    background: url(../img/cg_first02.png) no-repeat center center;
}

.contractgate_top .slider .slide03:after {
    background: url(../img/cg_first03.png) no-repeat center center;
}

.contractgate_top .slider .slide04:after {
    background: url(../img/cg_first05.png) no-repeat center center;
}

.contractgate_top .slider .slide05:after {  /* 2024/03/15 chapter05 add */
  background: url(../img/cg_first01.png) no-repeat center center;
}

.contractgate_top .slider .slide06:after {  /* 2024/03/15 chapter05 add */
  background: url(../img/cg_first02.png) no-repeat center center;
}

.contractgate_top .slider .slide:hover:after {
    opacity: 0.8;
    transform: scale(1.2);
}

.contractgate_top .slider .slide .num {
    font-family: "DINNeuzeitGroteskLTW01-_812429";
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 0;
    color: #ffffff;
}

.contractgate_top .slider .slide .title {
  text-align: center;
  font-size: 26px;
  z-index: 0;
  color: #ffffff;
}

@media screen and (max-width: 900px) {
  .contractgate_top .slider .slide .title {
    font-size: 21px;
  }
}
@media screen and (max-width: 650px) {
  .contractgate_top .slider .slide .title {
    font-size: 18px;
  }
}
.contractgate_top .slider .slide .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}

.contractgate_top .comming {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: #c0c0c0;
  padding: 15px;
}

.contractgate_top .comming div {
  width: 100%;
  height: 100%;
  border: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DINNeuzeitGroteskLTW01-_812429";
  font-style: italic;
  font-size: 22px;
}

.contractgate_top .first .banner {
  width: calc(100% - 40px);
  max-width: calc(1100px - 20px);
  height: 150px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 900px) {
  .contractgate_top .first .banner {
    width: calc(100% - 150px);
  }
}
@media screen and (max-width: 700px) {
  .contractgate_top .first .banner {
    width: calc(100% - 75px);
  }
}
.contractgate_top .first .banner:hover {
  text-decoration: none;
  cursor: pointer;
}

.contractgate_top .first .banner:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/cg_first04.png) no-repeat center center;
  -ms-background-size: cover;
  background-size: cover;
  transition: all 0.3s ease-out;
  z-index: 0;
}

.contractgate_top .first .banner:hover:after {
  opacity: 0.8;
  transform: scale(1.2);
}

.contractgate_top .first .banner .title {
  font-size: 25px;
  color: #ffffff;
  z-index: 1;
  padding: 0 15px;
  text-align: center;
}

.contractgate_top .first .banner .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

/* --- 製品TOPページ事例ブロック用 start --- */
.contractgate_top .jirei {
    /*
    background: #FFFFFF;
    padding: 20px 15px 40px 15px;
    */
    padding: 60px 0 100px;
    background-image: url(../img/cg_bg_jirei.png);
    position: relative;
    z-index: 0;
}

@media screen and (max-width: 736px) { /* 2023/1/10 730 -> 736 */
    .contractgate_top .jirei {
        padding: 70px 0 40px; /* 2023/1/10 100 -> 70 60 -> 40 */
    }
}

.contractgate_top .jirei:before {
    position: absolute;
    content: "Case Study";
    top: 10px; /* 2023/1/10 20 -> 10 */
    right: 30px;
    font-size: 80px;
    color:#208dc0 /* rgba(23, 120, 176, 0.4)*/;
    font-family: "DIN Next LT W01 Light";
}

@media screen and (max-width: 730px) {
    .contractgate_top .jirei:before {
        font-size: 50px; /* 2023/1/10 60 -> 50 */
    }
}

.contractgate_top .jirei .heading {
    text-align: left;
    /* 2022/8/15 パディング修正
    padding: 20px; */
    padding: 50px 0px 20px 20px; /* 上下左右 */
    font-size: 34px;
    font-weight: bold;
}

@media screen and (max-width: 730px) {
    .contractgate_top .jirei .heading {
        font-size: 28px;
        padding: 10px 0px 10px 10px; /* 2022/8/15 パディング追加 */
    }
}

/* 2022/8/15 レスポンシブ対応追加 start */
@media screen and (max-width: 374px) {
    .contractgate_top .jirei:before {
        font-size: 34px;
    }

    .contractgate_top .jirei .heading {
        font-size: 22px;
        padding: 0px 10px; /* 2022/8/15 パディング追加 上下/左右 */
    }
}
/* 2022/8/15 レスポンシブ対応追加 end */

.contractgate_top .jirei .catch {
    margin-top: 20px;
    padding: 0 15px;
    text-align: center;
    font-size: 20px;      /* 2023/7/31 フォントサイズ */
    font-weight: bold;    /* 2023/7/31 フォト太字 */
}
/* --- 製品TOPページ事例ブロック用 end --- */

/* --- 2023/1/10 製品TOPページ ウェビナーブロック用 start --- */
.contractgate_top .webinar {
  padding: 40px 0 40px; /* 上横下 */
  /* background-image: url(../img/cg_webinar_00.jpg); */
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 736px) { /* 2023/1/10 730 -> 736 */
  .contractgate_top .webinar {
      padding: 30px 0 30px;
  }
}

.contractgate_top .webinar:before {
  position: absolute;
  content: "Webinar";
  top: 0px;
  right: 30px;
  font-size: 50px;
  color:#208dc0 /* rgba(23, 120, 176, 0.4)*/;
  font-family: "DIN Next LT W01 Light";
}

@media screen and (max-width: 736px) { /* 2023/1/10 730 -> 736 */
  .contractgate_top .webinar:before {
      font-size: 30px;
  }
}

.contractgate_top .webinar .heading {
  text-align: left;
  padding: 50px 0px 20px 20px; /* 上下左右 */
  font-size: 34px;
  font-weight: bold;
}

@media screen and (max-width: 736px) { /* 2023/1/10 730 -> 736 */
  .contractgate_top .webinar .heading {
      font-size: 28px;
      padding: 10px 0px 10px 10px;
  }
}

@media screen and (max-width: 374px) {
  .contractgate_top .webinar:before {
      font-size: 34px;
  }

  .contractgate_top .webinar .heading {
      font-size: 22px;
      padding: 0px 10px; /* 上下/左右 */
  }
}

.contractgate_top .webinar .catch {
  text-align: center;
  margin-top: 20px;
  padding: 0 15px;
}
/* --- 2023/1/10 製品TOPページ ウェビナーブロック用 end --- */

.contractgate_top .slider {
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    max-width: 1100px;
    margin: 20px auto 30px;     /* 2023/7/31 40 auto 30 -> 20 auto 30 */
}

@media (max-width: 650px) {
  .contractgate_top .slider {
    width: calc(100% - 10px);
    margin-top: 20px;
  }
}
.contractgate_top .product .slider {
  margin-bottom: 20px;
}

.contractgate_top .slider img.slider_arrow {
  width: 35px;
  height: 60px;
  padding: 0 10px;
  display: none !important;
}

@media screen and (max-width: 900px) {
  .contractgate_top .slider img.slider_arrow {
    display: block !important;
  }
}
@media screen and (max-width: 700px) {
  .contractgate_top .slider img.slider_arrow {
    width: 20px;
    height: auto;
    padding: 0px;
  }
}
.contractgate_top .slider .slider_arrow:hover {
  cursor: pointer;
}

.contractgate_top .slider .slide {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

@media screen and (max-width: 630px) {
  .contractgate_top .slider .slide {
    height: 200px;
    margin: 0 5px;
  }
}
@media screen and (max-width: 470px) {
  .contractgate_top .slider .slide {
    height: 300px;
    margin: 0 10px;
  }
}
.contractgate_top .slider .slide:hover {
  cursor: pointer;
  text-decoration: none;
}

.contractgate_top .slider .slide:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -ms-background-size: cover;
  background-size: cover;
  transition: all 0.3s ease-out;
  z-index: -1;
}

.contractgate_top .slider .slide01:after {
  background: url(../img/cg_first01.png) no-repeat center center;
}

.contractgate_top .slider .slide02:after {
  background: url(../img/cg_first02.png) no-repeat center center;
}

.contractgate_top .slider .slide03:after {
  background: url(../img/cg_first03.png) no-repeat center center;
}

.contractgate_top .slider .slide04:after {
  background: url(../img/cg_first05.png) no-repeat center center;
}

.contractgate_top .slider .slide05:after {  /* 2024/03/15 chapter05 add */
  background: url(../img/cg_first01.png) no-repeat center center;
}

.contractgate_top .slider .slide06:after {  /* 2024/03/15 chapter05 add */
  background: url(../img/cg_first02.png) no-repeat center center;
}

.contractgate_top .slider .slide:hover:after {
  opacity: 0.8;
  transform: scale(1.2);
}

.contractgate_top .slider .slide .num {
  font-family: "DINNeuzeitGroteskLTW01-_812429";
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 0;
  color: #ffffff;
}

.contractgate_top .slider .slide .title {
  text-align: center;
  font-size: 26px;
  z-index: 0;
  color: #ffffff;
}

/* 2023/6/6 レスポンシブ対応修正 */
/* @media screen and (max-width: 650px) { */
  @media screen and (max-width: 650px) {
    .contractgate_top .slider .slide .title {
    font-size: 14px;
  }
}

/* 2022/8/15 レスポンシブ対応修正 */
/* @media screen and (max-width: 900px) { */
@media screen and (max-width: 960px) {
    .contractgate_top .slider .slide .title {
    font-size: 21px;
  }
}

/* 2022/8/15 レスポンシブ対応追加 */
@media screen and (max-width: 810px) {
    .contractgate_top .slider .slide .title {
    font-size: 18px;
  }
}

/* 2022/8/15 レスポンシブ対応修正 */
/* @media screen and (max-width: 650px) { */
@media screen and (max-width: 720px) {
  .contractgate_top .slider .slide .title {
    font-size: 14px;
  }
}

.contractgate_top .slider .slide .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}

.contractgate_top .comming {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: #c0c0c0;
  padding: 15px;
}

.contractgate_top .comming div {
  width: 100%;
  height: 100%;
  border: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DINNeuzeitGroteskLTW01-_812429";
  font-style: italic;
  font-size: 22px;
}

/* --- 製品TOPページ事例ブロック用 start --- */
.contractgate_top .jirei .banner {
  width: calc(100% - 40px);
  max-width: calc(1100px - 20px);
  height: 150px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 900px) {
  .contractgate_top .jirei .banner {
    width: calc(100% - 150px);
  }
}
@media screen and (max-width: 700px) {
  .contractgate_top .jirei .banner {
    width: calc(100% - 75px);
  }
}
.contractgate_top .jirei .banner:hover {
  text-decoration: none;
  cursor: pointer;
}

.contractgate_top .jirei .banner:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/cg_jirei_00.png) no-repeat center center;
  -ms-background-size: cover;
  background-size: cover;
  transition: all 0.3s ease-out;
  z-index: 0;
}

.contractgate_top .jirei .banner:hover:after {
  opacity: 0.8;
  transform: scale(1.2);
}

.contractgate_top .jirei .banner .title {
  font-size: 28px;
  color: yellow;
  text-shadow: 1px 2px 3px #101010;
  z-index: 1;
  padding: 0 15px;
  text-align: center;
}

.contractgate_top .jirei .banner .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
/* --- 製品TOPページ事例ブロック用 end --- */

/* --- 2023/1/10 製品TOPページ ウェビナーブロック用 start --- */
.contractgate_top .webinar .banner {
  width: calc(100% - 40px);
  max-width: calc(1100px - 20px);
  height: 200px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 900px) {
  .contractgate_top .webinar .banner {
    width: calc(100% - 150px);
  }
}

@media screen and (max-width: 736px) { /* 2023/1/10 700 -> 736 */
  .contractgate_top .webinar .banner {
    width: calc(100% - 30px);
    height: 90px;
  }
}

.contractgate_top .webinar .banner:hover {
  text-decoration: none;
  cursor: pointer;
}

.contractgate_top .webinar .banner:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/cg_webinar_00.jpg) no-repeat center center;
  -ms-background-size: cover;
  background-size: cover;
  transition: all 0.3s ease-out;
  z-index: 0;
}

.contractgate_top .webinar .banner:hover:after {
  opacity: 0.8;
  transform: scale(1.2);
}

.contractgate_top .webinar .banner .title {
  font-size: 28px;
  color: yellow;
  text-shadow: 1px 2px 3px #101010;
  z-index: 1;
  padding: 0 15px;
  text-align: center;
}

.contractgate_top .webinar .banner .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
/* --- 2023/1/10 製品TOPページ事例ブロック用 end --- */

.contractgate_top .product {
  position: relative;
  padding: 100px 0;
}

@media screen and (max-width: 900px) {
  .contractgate_top .product {
    padding: 120px 0 30px; /* 2023/1/10 50 -> 30, 2023/7/31 150 0 30 -> 120 0 30 */
  }
}
.contractgate_top .product:before {
  position: absolute;
  content: "Product";
  top: 10px;
  left: 30px;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "DIN Next LT W01 Light";
}

@media screen and (max-width: 650px) {
  .contractgate_top .product {
    padding-top: 80px;
  }

  .contractgate_top .product:before {
    left: 10px;
    font-size: 40px;
  }
}
.contractgate_top .product .catch {
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  padding: 0 15px;
}

@media screen and (max-width: 430px) {
  .contractgate_top .product .catch {
    font-size: 16px;
  }
}
@media screen and (max-width: 430px) {
  .contractgate_top .product .catch br {
    display: none;
  }
}
.contractgate_top .product .slider .slide {
  height: 445px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px 15px 15px 15px;             /* 2023/7/31 30 15 15 -> 15 15 15 15 */
  display: block;
  transition: all 0.3s ease-out;
}

.contractgate_top .product div.slide {
  cursor: default !important;
}

@media (max-width: 650px) {
  .contractgate_top .product .slider .slide {
    height: 380px;
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 10px;
  }
}
.contractgate_top .product .slider .slide .p_comming {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-style: italic;
}

.contractgate_top .product .slider .slide .graph img {
  width: 90%;
  margin: 0 auto;
  transition: all 0.3s ease-out;
}

/*
-------------------------------------------------------- */
.contractgate_top .product .slider a.slide:hover {
  opacity: 0.8;
}

.contractgate_top .product .slider .slide:hover .graph img {
  transform: scale(1.1);
}

/*
-------------------------------------------------------- */
.contractgate_top .slide-pass img {
  max-width: 100% !important;
  width: 100% !important;
}

.contractgate_top .slide-pass .header {
  position: relative;
  padding: 0 20px;
}

@media screen and (max-width: 430px) {
  .contractgate_top .slide-pass .header {
    padding-right: 5px;
    padding-left: 5px;
  }
}
.contractgate_top .slide-pass .header .title,
.contractgate_top .slide-pass .header small {
  text-align: left;
}

.contractgate_top .slide-pass .header .name {
  text-align: left !important;
}

/*
-------------------------------------------------------- */
.label-new {
  box-sizing: border-box;
  position: absolute;
  bottom: 25px;
  right: 30px;
  display: inline-block;
  width: 64px;
  height: 64px;
  padding-top: 15px;
  color: #f7931e;
  font-size: 21px;
  font-weight: normal;
  border: 1px solid #f7931e;
  border-radius: 50%;
  text-align: center;
}

@media screen and (max-width: 430px) {
  .label-new {
    right: 0;
    bottom: 0;
  }
}
/*
-------------------------------------------------------- */
.contractgate_top .product .slider .title {
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}

.contractgate_top .product .slider .title small {
  display: block;
  margin-top: 5px;
  color: rgb(202, 221, 236);
  font-size: 16px;
  font-weight: normal;
  line-height: 1.2;
}

/* 2022/8/15 レスポンシブ対応追加 */
@media screen and (max-width: 810px) {
  .contractgate_top .product .slider .title small {
    font-size: 14px;
  }
}

/* 2022/8/15 レスポンシブ対応追加 */
@media screen and (max-width: 650px) {
  .contractgate_top .product .slider .title small {
    font-size: 12px;
  }
}

.contractgate_top .product .slider .name {
  margin-top:    10px;
  margin-bottom: 25px;
  color: #ffffff;
  font-size: 20px;      /* 2023/7/31 22 -> 20 */
  font-weight: bold;    /* 太字指定 */
  line-height: 1.636;
  text-align: left;     /* 2022/10/25 center->left */
}

.contractgate_top .product .closing {
  padding: 0 15px;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
}

@media screen and (max-width: 430px) {
  .contractgate_top .product .slider .name {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 12px; /* 2022/10/25 16->12 */
  }

  .contractgate_top .product .closing {
    padding: 0 15px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
  }
}
/*
-------------------------------------------------------- */
.contractgate_top .product .banner {
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px 40px 20px;  /* 2023/7/31 40 40 35 -> 20 40 20 */
  max-width: calc(1100px - 20px);
  width: calc(100% - 40px);
  line-height: 1.636;
  align-items: center;
  font-size: 22px;
  color:            #fff;
  background-color: #0000004d;
  transition: all 0.3s ease-out;
}

.contractgate_top .product .banner img {
  transition: all 0.3s ease-out;
}

@media screen and (max-width: 900px) {
  .contractgate_top .product .banner {
    width: calc(100% - 150px);
  }
}
@media screen and (max-width: 700px) {
  .contractgate_top .product .banner {
    width: calc(100% - 75px);
  }
}
.contractgate_top .product .banner:hover {
  text-decoration: none;
  opacity: 0.8;
}

.contractgate_top .product .banner:hover .graph img {
  transform: scale(1.1);
}

.contractgate_top .product .banner .title {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;
  font-size: 25px;
  z-index: 1;
}

.contractgate_top .product .banner .title small {
  display: block;
  margin-top: 2px;
  color: rgb(202, 221, 236);
  font-size: 16px;
  line-height: 1.2;
}

.contractgate_top .product .banner .label-new {
  bottom: -93px;
  right: -4px;
}

.contractgate_top .product .banner .lead {
  margin-top: 0;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .contractgate_top .product .banner .left {
    float: left;
  }

  .contractgate_top .product .banner .img {
    float: right;
  }
}
@media screen and (max-width: 767px) {
  .contractgate_top .product .banner {
    padding: 35px 15px 35px;
    font-size: 4vw;
  }

  .contractgate_top .product .banner .title {
    font-size: 5vw;
  }

  .contractgate_top .product .banner .title small {
    font-size: 3vw;
  }

  .contractgate_top .product .banner .img {
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
  }

  .contractgate_top .product .banner .label-new {
    top: -15px;
    bottom: auto;
    right: -15px;
    width: 55px;
    height: 55px;
    padding-top: 13px;
    font-size: 18px;
  }
}
.contractgate_top .product .banner .arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

/*
-------------------------------------------------------- */
.contractgate_top .event {
  padding: 50px 0 80px;
  position: relative;
}

/* 2023/1/10 レスポンシブ対応 start */
@media screen and (max-width: 650px) {
  .contractgate_top .event {
    padding: 20px 0 20px;
    position: relative;
  }
}
/* 2023/1/10 レスポンシブ対応 end */

.contractgate_top .event .heading {
  font-size: 80px;
  color: rgba(23, 120, 176, 0.4);
  font-family: "DIN Next LT W01 Light";
  max-width: 1200px;
  padding: 15px;
  text-align: right;
  margin: 0 auto;
  line-height: 0.8;
}

@media screen and (max-width: 650px) {
  .contractgate_top .event .heading {
    font-size: 35px;
  }
}
.contractgate_top .event .heading span {
  font-size: 40px;
  margin: 0 10px;
}

@media screen and (max-width: 650px) {
  .contractgate_top .event .heading span {
    font-size: 20px;
  }
}
.contractgate_top .event .newslist {
  width: calc(100% - 30px);
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contractgate_top .event .newslist .newsitem {
  width: calc(50% - 40px);
  /* height: 80px; 2022/8/30 高さ変更 */
  height: 130px; /* 2022/10/25 110 -> 130 */
  background-color: #ffffff;
  margin-bottom: 20px;
  /* padding: 15px; 2022/8/30 パディング修正 */
  padding: 10px;
  display: block;
  overflow: hidden;
  font-size: 16px;
}

@media screen and (max-width: 800px) {
  .contractgate_top .event .newslist .newsitem {
    width: 100%;
    font-size: 14px;
    height: auto;
  }
}
.contractgate_top .event .newslist .newsitem:hover {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s;
  opacity: 0.8;
}

.contractgate_top .event .newslist .newsitem .subheading {
  color: #9a9a9a;
}

.contractgate_top .event .newslist .newsitem .cat {
  display: inline-block;
  width: 100px;
  padding: 2px 0;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  margin-right: 15px;
}

.contractgate_top .event .newslist .newsitem .cat.cat_news {
  background-color: #228dc0;
}

.contractgate_top .event .newslist .newsitem .cat.cat_event {
  background-color: #d64923;
}

.contractgate_top .event .newslist .newsitem .title {
  margin-top: 10px;
}

.contractgate_top .contact {
  padding: 40px 0 60px;
  color: #ffffff;
  position: relative;
}

.contractgate_top .contact .inner {
  padding: 0 15px;
}

.contractgate_top .contact p {
  text-align: center;
  font-size: 16px;
}

.contractgate_top .contact p span {
  font-size: 24px;
}

.contractgate_top .contact .btn {
  display: block;
  max-width: 400px;
  height: 70px;
  line-height: 70px;
  margin: 30px auto 0;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  background-color: #f66634;
  box-shadow: 0 6px 0 #d64923;
  position: relative;
  top: 0;
}

.contractgate_top .contact .btn:hover {
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
  top: 6px;
}

.contractgate_top .contact .btn span {
  position: relative;
  padding-left: 30px;
}

.contractgate_top .contact .btn span:before {
    /* 2022/8/5 バグ修正(ディレクトリ指定誤り) 
    content: url(../img/cg_contact_icon.png); */
    content: url(./img/cg_contact_icon.png);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -30px;
}

/* kgsi edit */
#globalHead {
  background: #ffffff;
}

#pageHead {
  background: #f8f8f8;
}

.contractgate_top .main {
  width: 100%;
  height: 780px;
  top: 0;
  overflow: hidden;
  position: relative;
}

.scrollmagic-pin-spacer {
  background: #c7d9e8;
}

.contractgate_top .text_area {
  opacity: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 736px) {
  .contractgate_top .text_area_inner {
    padding: 15px;
  }
}
.contractgate_top .main_left {
  width: 2000px;
  height: 780px;
  background: url("../img/cg_gate_right.png") no-repeat left top;
  background-size: contain;
  position: absolute;
  left: 50%;
  margin-left: -345px;
  top: 0px;
  z-index: 80;
}

.contractgate_top .main_right {
  width: 2000px;
  height: 780px;
  background: url("../img/cg_gate_left.png") no-repeat left top;
  background-size: contain;
  position: absolute;
  right: 50%;
  margin-right: -415px;
  top: 0px;
  z-index: 80;
}

.contractgate_top .main_center {
  width: 176px;
  height: 120px;
  position: absolute;
  left: calc(50% - 88px);
  top: calc(50% - 22px);
  z-index: 80;
}

/* Font Family */
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
html {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-size:    16px;
    line-height:   1.3;     /* 2024/05/10 1.6->1.3 */
    color:      #343a40;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
    html {
        font-family: Verdana, Meiryo, sans-serif;
    }
}
@media all and (-ms-high-contrast: active) {
    html {
        font-family: Verdana, Meiryo, sans-serif;
    }
}
body {
    margin: 0;
    line-height: inherit; /* 行間：親要素継承 */
}

/*===== delete parts =====*/
.snsBlock {
  display: none;
}

.pagerMenu {
  display: none;
}

.linksBox01 {
  display: none;
}

.linksBlock01 {
  display: none;
}

.largeBtn01 {
  display: none;
}

/*===== delete parts =====*/
#contents {
  width: 100%;
}

@media screen and (max-width: 736px) {
  #contents {
    margin: 0;
  }
}
#contents > .freeEdit01 {
  margin-top: 0;
}

.contractgate {
  position: relative;
}

.contractgate a {
  color: #004b8b; /* あざやかな青紫系の色 */
  text-decoration: none;
}

.contractgate a:hover {
  color: #af0000;
  text-decoration: underline;
}

.contractgate p {
  margin-top: 25px;
}

@media screen and (max-width: 736px) {
  .contractgate p {
    margin-top: 12px;
  }
}
.contractgate table {
  margin-top: 30px;
  width: 100%;
}

.contractgate table th,
.contractgate table td {
  padding: 14px 18px 12px;
  border: 1px solid #d3d3d3;
  font-weight: normal;
  text-align: left;
}

.contractgate table th {
  background: #f5f5f5;
}

@media screen and (max-width: 736px) {
  .contractgate h2 {
    margin-bottom: 15px;
    padding: 0 0 9px;
  }

  .contractgate h2 *[class*=catIc] {
    min-width: 59px;
    height: auto;
    margin-bottom: 10px;
    font-size: 10px;
  }

  .contractgate h3 {
    margin-top: 15px;
  }

  .contractgate h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 3px 0 3px 8px;
    border-left: 4px solid #999999;
    font-size: 14px;
  }

  .contractgate figure {
    margin-top: 12px;
  }

  .contractgate img {
    max-width: 100%;
    width: auto;
  }

  table .contractgate img {
    width: 100%;
  }

  .contractgate img.blank {
    width: 11px;
  }

  .contractgate img.pdf {
    width: 10px;
  }

  .contractgate p {
    margin-top: 12px;
  }

  .contractgate th {
    background: #f5f5f5;
    font-weight: bold;
  }

  .contractgate table {
    margin-top: 15px;
  }

  .contractgate table th,
  .contractgate table td {
    padding: 5px 8px;
  }
}
/*===== reset =====*/
.menu > ul > li > ul {
  z-index: 1000 !important;
}

.contractgate h2 {
  margin:        0;
  padding:       0;
  font-size:   100%;
  border:      none;
  font-weight: normal;
}
/* 2024/01/05 add */
@media screen and (max-width: 736px) {
  .contractgate h2 {
    width:  100%;
  }
}
/* 2024/01/05 add */
.contractgate h3 {
    border: none;
    margin: 0;
    /* 2022/8/15 パディング修正
    padding: 0; */
    padding: 10px 0 10px 10px;
    font-size: 100%;
    font-weight: normal;
}

.contractgate h4 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
  font-weight: normal;
}

/*===== reset =====*/
/*===== header/ =====*/
.cg_header {
  width: 100%;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 100;
}

.cg_header a {
  text-decoration: none;
}

@media screen and (max-width: 736px) {
  .cg_header {
    height: 50px;
  }

  .cg_header img {
    height: 20px;
  }
}

.cg_header.fixed {
  position: fixed;
  top: 0;
}

.cg_header .wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cg_header .pc_menu {
  position: absolute;
  top: 0;
  left: 0;
}

.cg_header .qa_menu {
  position: absolute;
  top: 0;
  right: 0;
}

.cg_header .qa_menu .hover_contact_btn {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 30px;
  position: relative;
}

.cg_header .qa_menu .hover_contact_btn:after {
  content: none;
}

.cg_header .qa_menu .hover_contact_btn a {
  display: block;
  max-width: 400px;
  padding: 10px 0;
  background-color: #f66634;
  text-align: center;
  margin: 0 auto;
  color: #ffffff;
}

.cg_header .qa_menu .hover_contact_btn a span {
  position: relative;
  padding: 20px;
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
  .cg_header .pc_menu {
    display: none;
  }

  .cg_header .qa_menu .hover_contact_btn {
    display: none;
  }
}
.cg_header .pc_menu .pc_menu_area {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 30px;
  position: relative;
}

.cg_header .pc_menu_area .humb_icon:hover {
  cursor: pointer;
}

.cg_header .pc_menu_area .slidenav {
  width: 350px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: -400px;
  padding-top: 50px;
}

.cg_header .pc_menu_area .slidenav > li {
  padding: 20px 30px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
}

.cg_header a {
  color: #000000;
}

.cg_header a:hover {
  text-decoration: none;
  transition: all 0.5s;
  opacity: 0.6;
}

.cg_header .pc_menu_area .slidenav .slidenav2_area {
  color: #208dc0;
}

.cg_header .pc_menu_area .slidenav .slidenav2_area:hover {
  cursor: pointer;
}

.cg_header .pc_menu_area .slidenav > li:after {
  content: url(../img/cg_header_arrow.png);
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -10px;
}

.cg_header .pc_menu_area .slidenav .slidenav2_area:after {
  content: url(../img/cg_header_plus.png);
  top: 50%;
  right: 25px;
  margin-top: -15px;
}

.cg_header .pc_menu_area .slidenav > li:nth-of-type(4):after {
  content: none;
}

.cg_header .pc_menu_area .slidenav > li:nth-of-type(4) a {
  display: block;
  width: 95%;
  margin: 0 auto;
  color: #ffffff;
  padding: 15px 0;
  text-align: center;
  background-color: #f66634;
  box-shadow: 0 6px 0 #d64923;
  position: relative;
}

.cg_header .pc_menu_area .slidenav > li:nth-of-type(4) a span:before {
  content: url(../img/cg_contact_icon.png);
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
}

.cg_header .pc_menu_area .slidenav > li:nth-of-type(4) a:hover {
  transition: none;
  opacity: 1;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
  top: 6px;
}

.cg_header .pc_menu_area .slidenav > li > a {
  display: block;
  width: 100%;
  height: 100%;
}

.cg_header .pc_menu_area .slidenav .slidenav2_area {
  position: relative;
}

.cg_header .pc_menu_area .slidenav .slidenav2 {
  width: 350px;
  background-color: #f2f2f2;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 50px;
  z-index: -10;
}

.cg_header .pc_menu_area .slidenav .slidenav2 > li {
  padding: 20px 15px;
  font-size: 13px;
  position: relative;
}

.cg_header .pc_menu_area .slidenav .slidenav2 > li:before {
  content: url(../img/cg_header_arrow.png);
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -10px;
}

.cg_header .sp_menu {
  display: none;
}

@media screen and (max-width: 736px) {
  .cg_header .sp_menu {
    display: block;
  }
}
.cg_header .sp_menu {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  padding: 0 15px;
}

.cg_header .sp_menu .open {
  display: block;
}

.cg_header .sp_menu .close {
  display: none;
}

.cg_header .sp_menu_list {
  position: absolute;
  top: 50px;
  width: 100%;
  background-color: #ffffff;
  border-top: 2px solid #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
  display: none;
}

.cg_header .sp_menu_list > li {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}

.cg_header .sp_menu_list > li:after {
  content: url(../img/cg_header_arrow.png);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -8px;
}

.cg_header .sp_menu_list .nyumon_area {
  padding: 0;
}

.cg_header .sp_menu_list .nyumon_area:after {
  content: none;
}

.cg_header .sp_menu_list .nyumon_area span {
  display: block;
  padding: 15px;
  font-size: 15px;
  position: relative;
}

.cg_header .sp_menu_list .nyumon_area span:after {
  content: url(../img/cg_header_plus.png);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -15px;
}

.cg_header .sp_menu_list .nyumon_area.minus span:after {
  content: url(../img/cg_header_minus.png);
  margin-top: -15px;
  right: 15px;
}

.cg_header .sp_menu_list > li > a {
  display: block;
  padding: 15px;
  font-size: 15px;
}

.cg_header .sp_menu_list .contact_area {
  padding: 20px;
}

.cg_header .sp_menu_list .contact_area:after {
  content: none;
}

.cg_header .sp_menu_list .contact_area a {
  display: block;
  width: 90%;
  max-width: 400px;
  padding: 10px 0;
  background-color: #f66634;
  box-shadow: 0 6px 0 #d64923;
  text-align: center;
  margin: 0 auto;
  color: #ffffff;
}

.cg_header .sp_menu_list .contact_area a:hover {
  text-decoration: none;
  box-shadow: none;
  top: 6px;
}

.cg_header .sp_menu_list .contact_area a span {
  position: relative;
  padding: 40px;
}

.cg_header .sp_menu_list .contact_area a span:before {
  content: url(../img/cg_contact_icon.png);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -12px;
}

.cg_header .sp_menu_list .sp_menu2_list {
  background-color: #f2f2f2;
  display: none;
}

.cg_header .sp_menu_list .sp_menu2_list > li {
  border-bottom: 1px solid #ffffff;
  position: relative;
}

.cg_header .sp_menu_list .sp_menu2_list > li:after {
  content: url(../img/cg_header_arrow.png);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -8px;
}

.cg_header .sp_menu_list .sp_menu2_list > li:last-child {
  border: none;
}

.cg_header .sp_menu_list .sp_menu2_list > li > a {
  display: block;
  font-size: 14px;
  padding: 15px;
}

.contractgate .open_bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 85;
  display: none;
}

/*===== /header =====*/
.contractgate .contact {
  padding: 40px 0 60px;
  color: #ffffff;
}

.contractgate .contact p {
  text-align: center;
  font-size: 16px;
  padding: 0 15px;
}

.contractgate .contact p span {
  font-size: 21px; /* 2023/1/10 24 -> 21 */
}

.contractgate .contact .btn {
    display: block;
    position: relative;
    top: 0;
    margin: 10px auto 0;      /* 2022/8/8 マージン 修正 30px auto 0 -> 10 auto 0 */
    max-width:  400px;
    width: calc(100% - 30px);
    height:      70px;
    line-height: 70px;
    text-align: center;
    font-size: 22px;  /* 2021/12/24 16 -> 22 */
    text-decoration: none;
    color:                #FFFFFF; /* 白 */
    background:           #F66634;
    box-shadow: 4px 4px 0 #FFC7AF;
}

.contractgate .contact .btn:hover {
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
  top: 6px;
}

.contractgate .contact .btn span {
  position: relative;
  padding-left: 30px;
}

.contractgate .contact .btn span:before {
  content: url(../img/cg_contact_icon.png);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -30px;
}

/* 2022/8/8 レスポンシブ表示(問合せボタン) start */
@media (max-width: 520px) { /* 2022/11/30 360px -> 520px */
    .contractgate .contact { /* 2022/11/30 add */
      padding: 20px 0 40px;
    }
    .contractgate .contact .btn {
        font-size: 18px;
    }
    .contractgate .contact .btn span:before {
        top: 30%;
    }
}
/* 2022/8/8 レスポンシブ表示(問合せボタン) end */

.contractgate .img_cg_wpp {
  border: 2px solid #ccc;
}

/*===== White Paper Download  original button setting add 2021/12/24 =====*/
.contractgate .contact .btn_wpdl {
    display: block;
    position: relative;
    top: 0;
    max-width:  400px;
    width: calc(100% - 30px);
    height:      70px;
    line-height: 70px;
    margin: 10px auto 0;          /* 2022/8/8 マージン 30 auto 0 -> 10 auto 0 */
    text-align:      center;
    text-decoration: none;
    font-size: 22px;
    color:                #ffffff;
    background:           #F7931E;
    box-shadow: 4px 4px 0 #ffd700;
}

.contractgate .contact .btn_wpdl:hover {
  top: 6px;
  color: #ffffff;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.contractgate .contact .btn_wpdl span {
  position: relative;
  padding-left: 30px;
}

.contractgate .contact .btn_wpdl span:before {
  content: url(../img/cg_contact_icon.png);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -30px;
}

/* 2022/8/8 レスポンシブ表示(ホワイトペーパーDLボタン) start */
@media (max-width: 384px) {
    .contractgate .contact .btn_wpdl {
        font-size: 16px;
    }
    .contractgate .contact .btn_wpdl span:before {
        top: 30%;
    }
}
/* 2022/8/8 レスポンシブ表示(ホワイトペーパーDLボタン) end */

/*===== White Paper Download  original button setting add 2021/12/24 =====*/

/*
#particles_bg {
    /* 2022/8/5 バグ修正 
    background-image: url(../img/cg_bg.png); */
/*
    background-image: url(./img/cg_bg.png);
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute; /* 親要素基準に絶対的な位置 */
/*
    top: 0;
    z-index: 0; /* ボックス重なり順序指定 */
/*
}
*/

#particles_bg_first {
  background-color: #c7d9e8;
  background-image: url(../img/cg_bg_wt_fix.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

/* --- 製品TOPページ事例ブロック用 start --- */
#particles_bg_jirei {
  background-color: #c7d9e8;
  background-image: url(../img/cg_bg_jirei.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
/* --- 製品TOPページ事例ブロック用 end --- */

/* --- 2023/1/10 製品TOPページ事例ブロック用 start --- */
#particles_bg_webinar {
  background-color: #c7d9e8;
  background-image: url(../img/cg_webinar_00.jpg);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
/* --- 2023/1/10 製品TOPページ事例ブロック用 end --- */

#particles_bg_product {
  background-image: url(../img/cg_bg_fix.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

#particles_bg_event {
  background-image: url(../img/cg_bg_wt_fix.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

#particles_bg_contact {
  background-image: url(../img/cg_bg_fix.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

#globalFooter {
  margin-top: 0;
}

/*
-------------------------------------------------------- */
.visible-xs {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}
/*
-------------------------------------------------------- */
.section-pass-contact {
  padding-top: 60px !important;
}

@media (max-width: 767px) {
  .section-pass-contact {
    padding-top: 50px !important;
  }
}
.section-pass-contact p {
  margin-top: 0;
  margin-bottom: 0.6em;
}

@media (min-width: 768px) {
  .section-pass-contact p {
    font-size: 18px !important;
  }
}
.section-pass-contact .text-2 {
  margin-bottom: 0.15em !important;
}

.section-pass-contact .title {
  margin-bottom: 0 !important;
}

/*------------------------------------*\
  Style of first and product, event
\*------------------------------------*/
/*------------------------------------*\
  Utils
\*------------------------------------*/
#globalHead {
  position: relative;
  z-index: 10;
}

#pageHead {
  position: relative;
  z-index: 9;
}

@media screen and (max-width: 736px) {
  #contents {
    margin: 0;
  }
}

#contents .contractgate_top .first {
                                /* 2023/1/10 250 60 100 0 -> 250 60 50 0 */
  padding: 110px 60px 50px 0px; /* 2023/7/31 250 60  50 0 -> 110 60 50 0 */
}
@media screen and (max-width: 736px) {
  #contents .contractgate_top .first {
                                  /* 2023/1/10 bottom 100 -> 20 */
    padding: 60px 0px 20px 0px;  /* 2023/7/31 top 658 -> 60 */
  }
}

#contents .contractgate_top .first:before { /* 「First」表示位置 */
              /* 2022/8/15 218->120 */
  top: 0px;   /* 2023/7/31 120->0 */
}

@media screen and (max-width: 736px) {
    #contents .contractgate_top .first:before {
                  /* 2022/8/15 「First」表示位置修正 580->560 */
        top: 0px; /* 2023/7/31 560->0 */
    }
}

.display-pc {
  display: block;
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
  .display-pc {
    display: none;
  }
}

.display-sp {
  display: none;
}

@media screen and (max-width: 520px) {  /* 2023/7/31 736 -> 520 */
  .display-sp {
    display: block;
  }
}

.contractgate a.contractgate-button:hover {
  text-decoration: none;
}

.contractgate-image {
  max-width: 100%;
}

.contractgate-link {
  text-decoration: none;
}

.contractgate-overload.is-overload {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 8;
}

/*------------------------------------*\
  contractgate-header
\*------------------------------------*/
.contractgate-header__nav {
    background: #FFFFFF;
    height: 60px;
    width: 100%;
    position: relative;
    /* 2022/8/5 Z-index 重なり順序修正
    z-index: 9;
    z-index: 11;*/
    z-index: 9; /* 2022/8/19 全社共通ヘッダメニュー(z-index=10)よりも下位に変更 */
    border-bottom: 1px solid #EDEDED;
}

.contractgate-header__navInner {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    /* 2022/8/5 パディング修正：グローバルメニュー行両端
    padding: 0 30px; */
    padding: 0 10px;
}

@media screen and (max-width: 736px) {
  .contractgate-header__navInner {
    /* 2022/8/5 パディング修正：グローバルメニュー行両端
    padding: 0 15px; */
    padding: 0 10px;
    position: relative;
  }
}

.contractgate-header__nav--fixTop {
  position: fixed;
  top: 0;
}

.contractgate-header__logoBox {
  max-width: 204px;
}
@media screen and (max-width: 736px) {
  .contractgate-header__logoBox {
    width: 43px;
  }
}

.contractgate-header__menu {
    /* 2022/8/5 パディング修正：グローバルメニュー横 
    margin-right: 20px; */
    margin-right: 0px;
}

@media screen and (max-width: 736px) {
    .contractgate-header__menu {
        margin-right: 0;
    }
}

.contractgate-header__menuList {
    display: flex;
/*    padding: 5px; /* 2022/8/5 パディング設定 */
/*    padding:10px 2px 10px 2px; 2022/8/5 パディング設定 */
    padding:0px 2px 0px 2px; /* 2022/8/8 パディング設定 */
    list-style: none; /* 2022/8/5 中点非表示 */
}

.contractgate-header__menuItem {
    /* 2022/8/5 マージン変更
    margin: 0 45px; */
    margin: 0 1px;
    position: relative;
    /* 2022/8/5 パディング追加 a.contractgate-header__menuLinkに併せる */
    /* 2022/8/8 パディング修正
    padding: 15px 2px 15px 2px; */
    padding: 10px 1px 10px 1px;
    /* 2023/7/31 ボタン境界線削除 start */ 
    /* border-top: 1px solid #333;    /* 2022/8/5 境界線 重みを帯びたグレー */
    /* border-left: 1px solid #333;   /* 2022/8/5 境界線 重みを帯びたグレー */
    /* border-bottom: 1px solid #333; /* 2022/8/5 境界線 重みを帯びたグレー */
    /* border-right: 1px solid #333;  /* 2022/8/5 境界線 重みを帯びたグレー */
    /* 2023/7/31 ボタン境界線削除 end */ 
  }

@media screen and (max-width: 959px) {
    .contractgate-header__menuItem {
        /* 2022/8/5 マージン変更
        margin: 0 9px; */
        margin: 0 2px; /* マージン 上下, 左右 */
    }
}

@media screen and (max-width: 736px) {
    .contractgate-header__menuItem {
        margin: 0;
        position: static;
    }
}

a.contractgate-header__menuLink {
    color: #222222; /* 真っ暗なグレー */
    /* 2023/7/31 メニュー文字列背景色削除 */
    /*  background: #e0ffff; /* 2022/8/5 lightcyan */
    text-decoration: none;
    align-items: center; /* 2022/8/5 上下中央配置 */
    /* 2022/8/5 パディング修正：上右下左
    padding: 20px 0 20px 0; */
    /* 2022/8/8 パディング修正：上右下左
    padding: 15px 2px 15px 2px; */
    padding: 10px 1px 10px 1px; 
    position: relative;
    transition: 0.4s all;
    list-style: none; /* 2022/8/5 中点非表示 */
}

a.contractgate-header__menuLink:hover {
    /* 2022/8/5 ホバー時表示色変更
    color: #222222; */
    color: #EBEBEB; /* 2022/8/5 淡いグレー */
    /*    background: #CCF0FF; /* 弱い緑みの青色 */
    background: #0168B7; /* 2022/8/5 重厚な青 */
    text-decoration: none;
}

/* 2022/8/5 Gメニュー項目幅調整 */
@media screen and (min-width: 958px) {
    a.contractgate-header__menuLink {
        font-size: 16px;
        /* 2022/8/15 パディング修正
        padding: 15px 20px 15px 20px; /* パディング：上右下左 */
        padding: 10px 20px 10px 20px; /* パディング：上右下左 */
    }
}

@media screen and (max-width: 736px) {
    a.contractgate-header__menuLink {
        font-size: 15px;
        /* 2022/8/15 パディング修正 */
        /* padding: 20px 15px 20px 15px; */
        padding: 10px 10px 10px 10px; /* パディング：上右下左 */
    }
}

/* 2022/8/5 Gメニュー項目幅調整 */
@media screen and (max-width: 594px) {
    a.contractgate-header__menuLink {
        font-size: 14px;
        /* 2022/8/15 パディング修正
        padding: 15px 2px 15px 2px; /* パディング：上右下左 */
        padding: 10px 2px 10px 2px; /* パディング：上右下左 */
    }
}

.contractgate-header__menuLink:after {
    content: "";
    height: 4px;
    width: 100%;
    background: #CCCCCC; /* やや灰色い無彩色 Chinese silver */
    position: absolute;
    bottom: 0;
    left: 0;
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
    .contractgate-header__menuLink:after {
        display: none;
    }
}

.contractgate-header__menuLink:hover::after {
    color: #EBEBEB; /* 2022/8/5 淡いグレー */
    background: #0168B7; /* 重厚な青 */
}

.contractgate-header__menuSubWrap {
    position: absolute;
    left: -10px;
    top: 42px;
    width: 600px;
    z-index: 999;
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
    .contractgate-header__menuSubWrap {
        width: 100%;
        top: 61px;
        left: 0;
    }
}

.contractgate-header__menuSubList {
    display: none;
    width: auto;
    flex-direction: column;
    /*  2022/8/5 パディング修正 
    padding: 15px 0; */
    padding: 5px 0; /*  2022/8/5 上下/左右 */
    opacity: 95%; /* 不透明度 */
    position: relative;
    list-style: none; /* 2022/8/5 中点非表示 */
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
    .contractgate-header__menuSubList {
        width: 100%;
        padding: 10px 0 15px 0;
        opacity: 1;
    }
}

@media screen and (min-width: 737px) {
    .contractgate-header__menuItem:hover a.contractgate-    header__menuLink {
        /* 2022/8/5 表示色変更 
        color: #0168B7; /* 重厚な青 */
        color: #EBEBEB; /* 2022/8/5 淡いグレー */
        background: #0168B7; /* 2022/8/5 背景色追加 重厚な青 */
    }
}

@media screen and (max-width: 520px) { /* 2022/10/25 736 -> 520 */
  .contractgate-header__menuItem:hover a.contractgate-header__menuLink.is-toggleActive {
    color: #0168B7; /* 重厚な青 */
  }
}

.contractgate-header__menuItem:hover a.contractgate-header__menuLink::after {
    background: #0168B7; /* 重厚な青 */
}

.contractgate-header__menuItem:hover .contractgate-header__menuSubList::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: -10px;
  left: 0;
  background: transparent;
}

@media screen and (max-width: 736px) {
    .contractgate-header__menuItem:hover .contractgate-header__menuSubList::before {
        top: -15px;
    }
}

@media screen and (min-width: 737px) {
    .contractgate-header__menuItem:hover .contractgate-header__menuSubList {
        display: inline-block;
        background: #FFFFFF; /* 白 */
    }
}

@media screen and (max-width: 736px) {
  .contractgate-header__menuItem:hover .contractgate-header__menuSubList.is-active {
    display: inline-block;
    background: #FFFFFF; /* 白 */
  }
}

.contractgate-header__menuSubItem--button {
    display: none;
}

@media screen and (max-width: 736px) {
    .contractgate-header__menuSubItem--button {
        display: block;
        /* 2022/8/5 パディング変更 
        padding: 0 10px; */
        padding: 0 5px;
    }
}

a.contractgate-header__menuSubLink {
    color: #004B8B; /* あざやかな青紫系の色 */
    text-decoration: none;
    /* 2022/8/5 パディング変更(link矢印位置調整) 
    padding: 10px 30px 10px 10px; */
    padding: 5px 20px 5px 10px; /* パディング：上右下左 */
    position: relative;
    display: block;
}

a.contractgate-header__menuSubLink:hover {
    background: #004B8B; /* あざやかな青紫系の色 */
    color: #FFFFFF; /* 白 */
    text-decoration: none;
}
a.contractgate-header__menuSubLink:hover::after {
  border: 1px solid #FFFFFF; /* 白 */
  border-left: 0;
  border-bottom: 0;
}
@media screen and (max-width: 736px) {
  a.contractgate-header__menuSubLink {
    padding: 20px;
    font-size: 15px;
    display: block;
  }
}

.contractgate-header__menuSubLink::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  right: 15px;
  border: 1px solid #004B8B; /* あざやかな青紫系の色 */
  border-left: 0;
  border-bottom: 0;
  transform: translate(50%, -50%) rotate(45deg);
}

@media screen and (max-width: 736px) {
    .contractgate-header__menuSubLink::after {
        right: 25px;
    }
}

.contractgate-header__navButton {
    /* 2022/8/5 横幅修正
    width: 185px; */
    width: 120px;
}

/* 2022/8/5 メニュー見直しによる無料相談ボタン表示有無サイズ変更
@media screen and (max-width: 736px) { */
@media screen and (max-width: 768px) {
    .contractgate-header__navButton {
        /*  display: none; /* 2022/8/5 ボタン非表示CUT */
        width: 80px; /* 2022/8/5 */
    }
}
/* 2022/8/5 Gメニュー項目幅調整
@media screen and (max-width: 375px) { */
/* 2022/8/5 Gメニュー項目幅調整
@media screen and (max-width: 480px) { */
@media screen and (max-width: 500px) {
    a.contractgate-header__menuLink {
        font-size: 12px;
        /* 2022/8/15 パディング修正 */
        /* padding: 15px 2px 15px 2px; /* 2022/8/5 パディング追加 */
        padding: 12px 2px 12px 2px; /* 2022/8/5 パディング追加 */
    }

    .contractgate-header__navButton {     /* 2022/8/5 無料相談ボタン */
        width: 70px; /* 2022/8/5 */
        font-size: 12px;
    }

    .contractgate-header__navInner { /* 2022/8/5 グローバルメニュー行両端調整
        padding: 0 15px; */
        padding: 0 5px;
        position: relative;
    }
}

/* 2022/8/5 Gメニュー項目幅調整
@media screen and (max-width: 375px) { */
@media screen and (max-width: 450px) {
    a.contractgate-header__menuLink {
        font-size: 12px;
        /* 2022/08/08 パディング修正
        padding: 15px 1px 15px 1px; /* 2022/8/5 パディング追加 */
        padding: 5px 1px 5px 1px; /* 2022/8/8 パディング修正 */
    }

    .contractgate-header__navButton {     /* 2022/8/5 無料相談ボタン */
        width: 60px; /* 2022/8/5 */
        font-size: 12px;
    }

    .contractgate-header__navInner { /* 2022/8/5 グローバルメニュー行両端調整 */
        padding: 0px;
        position: relative;
    }
}

a.contractgate-header__button {
  background: #F66634;
  color: #FFFFFF; /* 白 */
  display: flex;
  justify-content: center;
  text-decoration: none;
  padding: 8px 0;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 4px 0 #D64923;
  position: relative;
  top: 0;
}
a.contractgate-header__button:hover {
  box-shadow: none;
  text-decoration: none;
  color: #FFFFFF; /* 白 */
  top: 4px;
}

.contractgate-header__button--sp {
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 22px;
  border-bottom: 6px solid #D64923;
  justify-content: center;
/* 2022/8/5 メニュー見直しによる無料相談ボタン表示有無サイズ変更 
  margin-top: 25px; */
  margin-top: 5px;
}

/* 2023/7/31 重複コメント化 */
/* 2022/12/26 header-top-bg.png -> cg_top_00.png */
/* 2023/11/30 重複コメント化 start
.contractgate-header__content {
  min-height: 580px;
  background: url("../img/cg_top_00.png") no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

@media screen and (max-width: 736px) {
  .contractgate-header__content {
    height: 375px;
  }
}
 2023/11/30 重複コメント化 end  */

.contractgate-header__textBox {
    text-align: center;
    color: #FFFFFF; /* 白 */
    /* 2021/6/18 パディング変更 
    padding-top: 87px; */
    /* 2022/8/15 パディング変更 
    padding-top: 30px; */
    padding-top: 10px; /* テキストボックス上方向移動 */
}

@media screen and (max-width: 736px) {
    .contractgate-header__textBox {
        padding-right: 15px;
        padding-left: 15px;
        /* 2021/6/18 パディング変更 
        padding-top: 58px; */
        padding-top: 28px;
    }
}

.contractgate-header__title {
    font-size: 46px;
    /* 2021/6/18 文字太さ変更
    font-weight: normal; */
    font-weight: bold;
    /* 2021/6/18 マージン変更 
    margin-top: 28px; */
    margin-top: 10px;
    margin-left: 20px;
    /* 2022/8/15 マージン修正
    margin-bottom: 30px; /* 2021/8/30 タイトルボトム指定 */
    margin-bottom: 20px; /* 2022/8/15 マージン下修正 */
    line-height: 1.1;    /* 2021/6/18 行高さ指定 */
}

@media screen and (max-width: 736px) {
    .contractgate-header__title {
        font-size: 36px;
        margin-top: 0px; /* 2022/8/15 マージン上修正 */
        margin-left: 0;
        /* 2022/8/15 行間修正
        line-height: 1.6; */
        line-height: 1.0;
    }
}

/* 2022/8/15 レスポンシブ対応追加 */
@media screen and (max-width: 374px) {
    .contractgate-header__title {
        font-size: 28px;
    }
}

/* ヘッダブロック：サブタイトル設定 */
p.contractgate-header__subTitle {
    color: yellow; /* 2021/6/18 行追加 色指定 */
    font-weight: bold; /* 2021/6/18 行追加 文字太さ 太 */
    /* 2021/6/18 フォントサイズ変更 
    font-size: 18px; */
    font-size: 22px; /* 2023/1/10 20 -> 22 */
    /* 2021/6/18 マージン変更 
    margin-top: 22px; */
    margin-top: 1px;
    margin-bottom: 1px; /* 2022/8/30 マージン修正 */
}

@media screen and (max-width: 736px) {
    p.contractgate-header__subTitle {
        margin-top: 16px;
        padding: 0 5px;
        line-height: 1.6;
        font-size: 18px; /* 2023/1/10 font siza add */
      }
}

/* 2022/8/30 ウェビナー案内追加 start */
p.contractgate-header__subTitle_2 {
  color: yellow; /* 色指定 */
  font-weight: bold; /* 文字太さ 太 */
  font-size: 10px; /* 行上部空白調整要 */
  margin-top: 0px;
  padding-top: 0px;
  margin-bottom: 0px;
}

.contractgate-header__subTitle_2 a {
  background: #c9dceb; /* 2022/12/26 背景 #022351 -> #c9dceb */
  color: #1628a3; /* 2022/12/26 文字列色：#FFFEF2パールホワイト -> #1628a3 */
  font-weight: bold; /* 文字太さ 太 */
  font-size: 30px;
  margin-top: 1px;
  padding: 5px;
}

.contractgate-header__subTitle_2 a:hover {
  color: #12008b; /* 2022/12/26 文字列色：黄色 -> #12008b */
}

@media screen and (max-width: 736px) {
    p.contractgate-header__subTitle_2 {
        margin-top: 10px;
        padding: 0 5px;
        line-height: 1.6;
    }

    .contractgate-header__subTitle_2 a {
        font-size: 23px; /* 2022/12/26 24px -> 23px */
    }
}
/* 2022/8/30 ウェビナー案内追加 end */

/* 2023/11/30 重複削除「ContractGateでできること」ブロックstart
.contractgate-header__service {
    background: url("../img/path_bg.png") no-repeat;
    background-size: contain;
    background-position: center;
    height: 412px;                ブロック上方向表示位置 
    min-height: 412px;
    width: 100%;
    max-width: 1230px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -210px;               ブロック下方向表示位置
    z-index: 2;
    transform: translateX(-50%);
}
2023/11/30 重複削除「ContractGateでできること」ブロックend
*/

@media screen and (max-width: 736px) {
  .contractgate-header__service {
    background: #FFFFFF;
    width: calc(100% - 30px);
    height: auto;
    position: relative;
    z-index: 7;
    bottom: -155px;
  }
}

.contractgate-header__serviceBox {
  max-width: 990px;
  width: calc(100% - 200px);
  margin: 0 auto;
  height: 100%;
  padding: 46px 0;
}

@media screen and (max-width: 959px) {
  .contractgate-header__serviceBox {
    padding: 80px 0;
  }
}

@media screen and (max-width: 736px) {
  .contractgate-header__serviceBox {
    display: flex;
    flex-direction: column;
    padding: 30px 0;
    width: 100%;
  }
}

.contractgate-header__serviceTop {
  display: inline-flex;
  align-items: center;
  margin-top: 10px; /* 2022/8/15 マージン上追加 */
}

@media screen and (max-width: 736px) {
  .contractgate-header__serviceTop {
    display: flex;
    flex-direction: column;
    order: 1;
  }
}

/* 2023/12/28 cg_style_top.cssに移動
.contractgate-header__serviceLogo {
  max-width: 202px;
}

.contractgate-header__textLogo {
  font-size:   30px;
  margin-left:  0px;
}

@media screen and (max-width: 736px) {
  .contractgate-header__textLogo {
    margin-left: 0;
  }
}
2023/12/28 end */

.contractgate-header__serviceCenter {
  display: flex;
  justify-content: space-around;
  padding: 0 30px;
  /* 2022/8/15 マージン上修正
    margin-top: 7px; */
  margin-top: -12px; /* 2022/8/15 マージン上修正 */
}

@media screen and (max-width: 736px) {
  .contractgate-header__serviceCenter {
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    align-items: center;
    order: 3;
  }
}

.contractgate-header__serviceItems {
  background: url("../img/service-item-bg.png") no-repeat;
  background-size: contain;
  background-position: center;
  height: 144px;
  width: 204px;
  position: relative;
  display: flex;
}
@media screen and (max-width: 959px) {
  .contractgate-header__serviceItems {
    height: 96px;
    width: 136px;
  }
}
@media screen and (max-width: 736px) {
  .contractgate-header__serviceItems {
    height: 111px;
    width: 204px;
    margin-bottom: 22px;
  }
}

@media screen and (max-width: 736px) {
  .contractgate-header__serviceItems--last {
    margin-bottom: 0;
  }
}

.contractgate-header__serviceItem {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.contractgate-header__serviceItemText {
  font-size: 18px;
  color: #222222;
}

@media screen and (max-width: 959px) {
  .contractgate-header__serviceItemText {
    font-size: 16px;
  }
}

@media screen and (max-width: 736px) {
  .contractgate-header__serviceItemText {
    /* 2022/8/15 フォントサイズ変更
    font-size: 18px; */
    font-size: 22px;
  }
}

.contractgate-header__serviceItemTitle {
  /* 2022/8/15 フォントサイズ変更
  font-size: 34px; */
  font-size: 32px;
  color: #012954;
  margin: 10px 0px; /* 2022/8/15 BC可能性ブロック幅調整 */
}

@media screen and (max-width: 959px) {
    .contractgate-header__serviceItemTitle {
        font-size: 18px;
        margin: 10px 0px; /* 2022/8/15 BC可能性ブロック幅調整 */
    }
}

@media screen and (max-width: 736px) {
    .contractgate-header__serviceItemTitle {
        font-size: 34px;
        width: max-content; /* 2022/8/15 BC可能性ブロック幅調整 */
    }
}

.contractgate-header__serviceBottom {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 959px) {
  .contractgate-header__serviceBottom {
    margin: 10px auto;
  }
}
@media screen and (max-width: 736px) {
    .contractgate-header__serviceBottom {
        width: 86%;
        margin: 13px auto 16px auto;
        flex-direction: column;
        order: 2;
    }
}

a.contractgate-header__serviceButton {
    display: flex;
    align-items: center;
    /* 2022/8/15 文字列表示位置修正
    justify-content: center; */
    justify-content: start;
    /* 2022/8/15 文字列表示位置修正
    text-align: center; */
    text-align: left;
    font-size: 22px;
    width: 46%;
    height: 62px;
    /* 2022/8/15 文字列表示位置修正
    padding: 10px 0; */
    padding: 10px 10px;
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    top: 0;
}
a.contractgate-header__serviceButton:hover {
  height: 58px;
  box-shadow: none;
  text-decoration: none;
  color: #FFFFFF;
  top: 6px;
}
@media screen and (max-width: 736px) {
  a.contractgate-header__serviceButton:hover {
    height: 36px;
  }
}
@media screen and (max-width: 959px) {
  a.contractgate-header__serviceButton {
    height: 52px;
  }
}
@media screen and (max-width: 736px) {
  a.contractgate-header__serviceButton {
    width: 100%;
    height: 42px;
  }
}

.contractgate-header__serviceButton--red {
  background: #F66634;
  margin-right: 10px;
  box-shadow: 0 6px 0 #D64923;
}
@media screen and (max-width: 736px) {
  .contractgate-header__serviceButton--red {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

.contractgate-header__serviceButton--orange {
  background: #F7931E;
  margin-left: 10px;
  box-shadow: 0 6px 0 #D37C16;
  position: relative;
}
@media screen and (max-width: 736px) {
  .contractgate-header__serviceButton--orange {
    margin-left: 0;
  }
}

.contractgate-header__serviceBook {
  width: 62px;
  position: absolute;
  right: 20px;
  bottom: 0;
}
@media screen and (max-width: 959px) {
  .contractgate-header__serviceBook {
    width: 52px;
    right: 10px;
  }
}
@media screen and (max-width: 736px) {
  .contractgate-header__serviceBook {
    width: 45px;
    right: 5px;
    bottom: 3px;
  }
}

.contractgate-header__serviceButton--orange:hover,
.contractgate-header__serviceButton--red:hover {
  border-bottom: 6px solid transparent;
}

/*------------------------------------*\
  contractgate-offer
\*------------------------------------*/
.contractgate-offer {
  background: #FFFFFF;
  padding: 10px 15px 40px 15px; /* 2023/1/10 top 20 -> 10 */
}

.contractgate-offer__content {
  text-align: center;
}

.contractgate-offer__title {
  font-size: 36px;
  font-weight: normal;
  color: #222222;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 736px) {
  .contractgate-offer__title {
    font-size: 28px;
  }
}

.contractgate-offer__title::after {
  content: "";
  width: 100%;
  min-height: 133px;
  background: url("../img/offer-arrow.png") no-repeat center;
  position: absolute;
  top: -20px;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 736px) {
  .contractgate-offer__title::after {
    background: url("../img/offer-arrow-sp.png") no-repeat center;
    top: -24px;
  }
}

.contractgate-offer__text {
  font-size: 24px;
  color: #012954;
  font-weight: normal;
}
@media screen and (max-width: 736px) {
  .contractgate-offer__text {
    font-size: 22px;
  }
}

.contractgate-offer__Subtext {
  font-size: 18px;
  margin-top: 4px;
  color: #012954;
}
@media screen and (max-width: 736px) {
  .contractgate-offer__Subtext {
    font-size: 16px;
  }
}

.contractgate-offer__allInOne {
  margin-top: 52px;
}
@media screen and (max-width: 736px) {
  .contractgate-offer__allInOne {
    margin-top: 65px;
  }
}

.contractgate-offer__buttonWrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

a.contractgate-offer__button {
  font-size: 22px;
  color: #F7931E;
  width: 445px;
  height: 82px;
  border: 3px solid #F7931E;
  box-shadow: 0 6px 0 #EBEBEB;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
}
a.contractgate-offer__button:hover {
  color: #F7931E;
  box-shadow: none;
  height: 76px;
  top: 6px;
}