div#work {
  max-width: 1280px;
  margin: auto;
}
@media screen and (max-width: 1280px) {
  div#work {
    overflow: hidden;
  }
}

.sec-work-info .work-info, .sec-work-info .work-info-2, .sec-work-info .work-info-3 {
  /*display: flex;*/
  position: relative;
  max-width: 1215px;
  margin-bottom: 64px;
}
.sec-work-info .work-info::before, .sec-work-info .work-info-2::before, .sec-work-info .work-info-3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #D0DAE7;
  transform: skewX(-22deg);
}
.sec-work-info .work-info img, .sec-work-info .work-info-2 img, .sec-work-info .work-info-3 img {
  max-width: 680px;
}
.sec-work-info .work-info .work-txt, .sec-work-info .work-info-2 .work-txt, .sec-work-info .work-info-3 .work-txt {
  position: relative;
  margin-top: 48px;
}
.sec-work-info .work-info .work-txt .work-ttl, .sec-work-info .work-info-2 .work-txt .work-ttl, .sec-work-info .work-info-3 .work-txt .work-ttl {
  font-size: 28px;
}
.sec-work-info .work-info .work-txt .txt-bg, .sec-work-info .work-info-2 .work-txt .txt-bg, .sec-work-info .work-info-3 .work-txt .txt-bg {
  position: absolute;
  top: 108px;
  bottom: 0;
  right: 0;
  z-index: -1;
  margin: 0;
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 300;
  font-size: 148px;
  color: #ffffff;
}
.sec-work-info .work-info::before, .sec-work-info .work-info-3::before {
  left: 65px;
  right: 0;
}
.sec-work-info .work-info .work-txt, .sec-work-info .work-info-3 .work-txt {
  margin-left: 64px;
}
.sec-work-info .work-info .work-txt .txt-bg, .sec-work-info .work-info-3 .work-txt .txt-bg {
  left: 50%;
}
.sec-work-info .work-info-2 {
  margin: 0 0 64px auto;
}
.sec-work-info .work-info-2 img {
  margin: 0 0 0 auto;
}
.sec-work-info .work-info-2::before {
  left: 0;
  right: 65px;
}
.sec-work-info .work-info-2 .work-txt {
  margin-left: 120px;
}
.sec-work-info .work-info-2 .work-txt .txt-bg {
  left: -30%;
}
@media screen and (max-width: 1280px) {
  .sec-work-info .work-info img, .sec-work-info .work-info-2 img, .sec-work-info .work-info-3 img {
    max-width: 100%;
    height: 320px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sec-work-info .work-info-3 img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: left top;
       object-position: left top;
  }
}
@media screen and (max-width: 1000px) {
  .sec-work-info .work-info .work-txt, .sec-work-info .work-info-3 .work-txt {
    margin-left: 0;
  }
  .sec-work-info .work-info .work-txt .txt-bg, .sec-work-info .work-info-3 .work-txt .txt-bg {
    left: 20%;
  }
  .sec-work-info .work-info-2 .work-txt {
    margin-left: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .sec-work-info .work-info, .sec-work-info .work-info-2, .sec-work-info .work-info-3 {
    display: block;
  }
  .sec-work-info .work-info::before, .sec-work-info .work-info-2::before, .sec-work-info .work-info-3::before {
    content: none;
  }
  .sec-work-info .work-info img, .sec-work-info .work-info-2 img, .sec-work-info .work-info-3 img {
    height: auto;
  }
  .sec-work-info .work-info .work-txt, .sec-work-info .work-info-2 .work-txt, .sec-work-info .work-info-3 .work-txt {
    background-color: #D0DAE7;
    margin-top: 0;
    margin-left: 0;
    padding: 7.5% 0 20px 20px;
    width: auto;
    -webkit-clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }
  .sec-work-info .work-info .work-txt .txt-bg, .sec-work-info .work-info-2 .work-txt .txt-bg, .sec-work-info .work-info-3 .work-txt .txt-bg {
    font-size: 108px;
    top: 33%;
    left: 65%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 960px) {
  .work-info-2.for-pc {
    display: grid !important;
  }
}
@media only screen and (max-width: 480px) {
  .work-txt .txt-bg {
    font-size: 0 !important;
  }
  .work-txt p {
    width: 85%;
  }
}/*# sourceMappingURL=style.css.map */