@charset "UTF-8";

/*-------------------------------------------
メインタイトル
-------------------------------------------*/
.TtlBox {
  margin-bottom: 100px;
  margin-left: 5%;
}

.mainTtlBox {
  display: flex;
  justify-content: center;
  margin-bottom: 150px;
  position: relative;
}
.mainTtlBox h2 {
  text-align: center;
  writing-mode: horizontal-tb;
  font-family: source-sans-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 7rem;
  background: linear-gradient(0deg, #027319 0%, #5f996a 100%);
  background: -webkit-linear-gradient(0deg, #027319 0%, #5f996a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainTtlBox h2 span {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 599px) {
  .TtlBox {
    margin-bottom: 30px;
    display: block;
    margin-left: 0%;
  }
  .mainTtlBox {
    margin-bottom: 30px;
  }

  .mainTtlBox h2 {
    text-align: center;
    font-size: 5.2rem;
  }
}

/*-------------------------------------------
背景色
-------------------------------------------*/

.GrBg {
  background: linear-gradient(90deg, #027319 0%, #5f996a 100%);
  color: #fff;
  padding: 100px 0 200px;
  margin-bottom: 320px;
}

@media screen and (max-width: 1024px) {
  .GrBg {
    background: linear-gradient(90deg, #027319 0%, #5f996a 100%);
    color: #fff;
    padding: 100px 0 0;
    margin-bottom: 320px;
  }
}

/*-------------------------------------------
CAD
-------------------------------------------*/

.cadBox {
  max-width: 1280px;
  margin: 0 auto;
}

.cadBox p {
  margin-bottom: 100px;
  line-height: 1.8;
  text-align: center;
}

.cadList ul {
  height: 2400px;
  position: relative;
  max-width: 1340px;
  margin: 0 auto;
}

.cadList ul li {
  position: absolute;
}

/*-------------------------------------------
画像フェード
-------------------------------------------*/

.img-fade {
  opacity: 0;
}

.img-fade.active {
  opacity: 1;
  transition: opacity 2s;
}

.cadList ul li:nth-child(1) {
  width: 400px;
  top: 3%;
  left: 0%;
}

.cadList ul li:nth-child(2) {
  width: 765px;
  top: 0%;
  right: 0%;
}

.cadList ul li:nth-child(3) {
  width: 625px;
  top: 26%;
  left: 5%;
}

.cadList ul li:nth-child(4) {
  width: 300px;
  top: 23%;
  left: 60%;
}

.cadList ul li:nth-child(5) {
  width: 310px;
  top: 36%;
  right: 5%;
}

.cadList ul li:nth-child(6) {
  width: 535px;
  top: 45%;
  left: 0%;
}

.cadList ul li:nth-child(7) {
  width: 510px;
  top: 52%;
  right: 10%;
}

.cadList ul li:nth-child(8) {
  width: 365px;
  top: 69%;
  left: 8%;
}

.cadList ul li:nth-child(9) {
  width: 745px;
  top: 80%;
  right: 0%;
}

.cadList ul li:nth-child(10) {
  width: 504px;
  top: 90%;
  left: 0%;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

.modaal-container {
  border-radius: 10px !important;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #027ca6 !important;
}

.modaal-gallery-control:focus:after,
.modaal-gallery-control:focus:before,
.modaal-gallery-control:hover:after,
.modaal-gallery-control:hover:before {
  background: #027ca6 !important;
}

.modaal-overlay {
  opacity: 0.7 !important;
}

@media screen and (max-width: 1024px) {
  .cadList ul {
    height: 2400px;
    width: 95%;
  }
  .cadList ul li:nth-child(1) {
    width: 300px;
    top: 3%;
    left: 0%;
  }

  .cadList ul li:nth-child(2) {
    width: 615px;
    top: 0%;
    right: 0%;
  }

  .cadList ul li:nth-child(3) {
    width: 525px;
    top: 21%;
    left: 3%;
  }

  .cadList ul li:nth-child(4) {
    width: 300px;
    top: 19%;
    left: 60%;
  }

  .cadList ul li:nth-child(5) {
    width: 310px;
    top: 32%;
    right: 0%;
  }

  .cadList ul li:nth-child(6) {
    width: 485px;
    top: 38%;
    left: 0%;
  }

  .cadList ul li:nth-child(7) {
    width: 420px;
    top: 48%;
    right: 3%;
  }

  .cadList ul li:nth-child(8) {
    width: 365px;
    top: 59%;
    left: 8%;
  }

  .cadList ul li:nth-child(9) {
    width: 595px;
    top: 76%;
    right: 0%;
  }

  .cadList ul li:nth-child(10) {
    width: 354px;
    top: 79%;
    left: 0%;
  }
}

@media screen and (max-width: 599px) {
  .cadBox {
    width: 95%;
    margin: 0 auto;
  }

  .cadBox p {
    margin-bottom: 50px;
    line-height: 1.8;
    text-align: center;
  }

  .cadList ul {
    height: 900px;
  }

  .cadList ul li:nth-child(1) {
    width: 140px;
    top: 3%;
    left: 0%;
  }

  .cadList ul li:nth-child(2) {
    width: 220px;
    top: 0%;
    right: 0%;
  }

  .cadList ul li:nth-child(3) {
    width: 195px;
    top: 25%;
    left: 3%;
  }

  .cadList ul li:nth-child(4) {
    width: 130px;
    top: 18%;
    left: 60%;
  }

  .cadList ul li:nth-child(5) {
    width: 130px;
    top: 33%;
    right: 0%;
  }

  .cadList ul li:nth-child(6) {
    width: 175px;
    top: 41%;
    left: 0%;
  }

  .cadList ul li:nth-child(7) {
    width: 170px;
    top: 50%;
    right: 2%;
  }

  .cadList ul li:nth-child(8) {
    width: 125px;
    top: 61%;
    left: 4%;
  }

  .cadList ul li:nth-child(9) {
    width: 230px;
    top: 77%;
    right: 0%;
  }

  .cadList ul li:nth-child(10) {
    width: 125px;
    top: 80%;
    left: 0%;
  }
}