@charset "utf-8";
.technology-vision-under.is-tier4 .vision-mv {
  background: url(/jp/about/technology/img/vision1/tier4/mv_bg_pc.jpg)no-repeat center /cover;
  overflow: visible;
}
.summary {
  padding: 62px 40px 28px 60px;
}
.solution-sec-ttl {
  margin-top: 31px;
  margin-bottom: 14px;
}
.technology-ttl-label.is-solution {
  margin: -6px 0 27px;
}
.solution-sec.is-solution {
  margin: 0 0 138px;
}
.solution-sec.is-solution .image {
  min-width: 482px;
  margin: 0 calc(31.531531531532% - 482px) 0 0;
}
.solution-sec.is-result .solution-column {
  margin: 0 0 90px;
}
.solution-sec.is-result .image {
  min-width: 604px;
  margin: -185px 0 -150px calc(31.531531531532% - 604px);
}
.solution-sec.is-interview::before {
  top: 4.05%;
  left: -1.9%;
}
.interview-box__lead {
  margin: 65px 0 2px;
  margin-left: auto;
}
.interview-block .solution-sec-img {
  top: -56px;
  right: calc(66.2% + 30px);
}
.solution-sec.is-result {
  position: relative;
  padding: 0;
}
.solution-sec.is-result .solution-row {
  position: static;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.solution-sec.is-result .solution-sec-img {
  position: absolute;
  left: 0;
  bottom: -90px;
  max-width: 604px;
  width: 34%;
}
.solution-sec.is-result .solution-sec-img img {
  width: 100%;
}
@media screen and (min-width: 1631px) {
  .solution-sec.is-result .solution-column {
    min-width: 66.5%;
    margin: 0 0 116px;
  }
  .solution-sec.is-result .image {
    margin: -185px 18px -150px 0;
    width: auto;
    min-width: auto;
  }
  .solution-sec.is-result .image .is-normal {
    display: none;
  }
  .solution-sec.is-result .image .is-big {
    display: block;
    min-width: 1080px;
  }
}

@media screen and (max-width: 1630px) {
  .solution-sec.is-result .image {
    min-width: auto;
    width: calc(((100vw - 100%) / 2) + 31.531531531532%);
    margin: -6vw 0 -90px calc(((100% - 100vw) / 2));
  }
  .interview-block .solution-sec-img {
    width: 36.4vw;
    right: auto;
    left: calc((100% - 100vw) / 2);
  }
  .solution-sec.is-result .image .is-normal {
    display: block;
  }
  .solution-sec.is-result .image .is-big {
    display: none;
  }
}

@media screen and (max-width: 1420px) {
  .solution-sec.is-solution .solution-sec-img {
    position: relative;
    right: calc(((100% - 100vw) /2) + 30px);
    width: 51%;
  }
  .solution-sec.is-solution .solution-row {
    align-items: center;
  }
  .solution-sec.is-solution .image {
    max-width: 482px;
    min-width: auto;
    margin: 0 calc(((100% - 100vw) /2) + 30px) 0 20px;
    width: calc((((100vw - 100%) /2)) + 31.531531531532%);
  }
  .solution-sec.is-solution .solution-sec-img img {
    max-width: 100%;
    bottom: 0;
  }
  .solution-sec.is-result {
    max-height: 680px;
  }
  .solution-sec.is-result .image {
    position: static;
    margin: 0 0 -70px calc(((100% - 100vw) / 2));
  }
}

@media screen and (max-width: 1300px) {
  .interview-block .solution-sec-img {
    top: 0;
  }
  .solution-sec.is-result .solution-column {
    margin: 0;
  }
}

@media screen and (max-width: 1200px) {
  .solution-sec.is-result {
    max-height: none;
  }
  .solution-sec.is-result .solution-column {
    width: calc(100% - (395px - ((100% - 100vw) / 2)));
  }
  .solution-sec.is-result .image {
    position: static;
    margin: 0 0 -70px calc((100% - 100vw) / 2);
    width: calc(395px - ((100% - 100vw) / 2));
  }
}

@media screen and (max-width: 1100px) {
  .solution-sec-ttl {
    margin-top: 10px;
    margin-bottom: 14px;
  }
  .solution-sec.is-solution .solution-column {
    width: calc(100% - 355px);
    position: relative;
  }
  .solution-sec.is-solution .image {
    width: 355px;
  }
  .interview-block .solution-sec-img {
    width: 430px;
    margin-right: 2% !important;
    max-width: 50%;
  }
  .interview-box__lead {
    margin: 65px 0 25px;
    margin-left: auto;
  }
}

@media screen and (max-width: 940px) {
  .solution-sec.is-result .solution-sec-img {
    position: static;
    margin-left: -4.3%;
    width: 50%;
  }
  .solution-sec.is-result {
    padding: 0 0 1px;
  }
  .solution-sec.is-result .solution-column {
    max-width: none;
  }
  .solution-sec.is-solution .solution-sec-img {
    right: 0;
    left: 0;
    height: auto;
  }
  .solution-sec.is-solution .solution-sec-img {
    width: 75%;
    margin: -20px auto 0;
    max-width: 450px;
  }
  .solution-sec.is-result .solution-sec-img {
    width: 70%;
    margin-top: 20px;
    max-width: 440px;
  }
}

@media screen and (max-width: 900px) {
  .solution-sec.is-solution .solution-row {
    display: block;
  }
  .solution-sec.is-solution .solution-column {
    width: 100%;
    max-width: none;
  }
  .solution-sec.is-solution .image {
    max-width: 355px;
    width: 82%;
    margin: -50px auto 0;
  }
  .solution-sec.is-solution {
    margin: 0 0 60px;
  }
  .solution-sec.is-result .solution-row {
    display: block;
  }
  .solution-sec.is-result .solution-column {
    width: 100%;
  }
  .solution-sec.is-result .image {
    max-width: 550px;
    width: 100%;
    margin: 30px auto 0;
  }
  .solution-sec.is-result .image .is-normal {
    display: none;
  }
  .solution-sec.is-result .image .is-big {
    display: block;
  }
}

@media screen and (max-width: 660px) {
  .technology-vision-under.is-tier4 .vision-mv {
    background: url(/jp/about/technology/img/vision1/tier4/mv_bg_sp.jpg)no-repeat center /cover;
    overflow: visible;
  }
  .solution-sec.is-interview::before {
    top: 0;
    left: 0;
    width: 96%;
    height: 102%;
  }
  .is-solution .solution-row .solution-col {
    max-width: none;
    position: relative;
  }
  .solution-sec.is-solution {
    margin: 0 0 40px;
  }
  .technology-ttl-label.is-solution {
    margin: 20px 0 0;
  }
  .solution-sec-ttl {
    margin-top: 21px;
    margin-bottom: 14px;
  }
  .summary {
    padding: 50px 5.9% 15px 2%;
  }
  .solution-sec.is-result .solution-row .solution-col {
    max-width: none;
  }
  .interview-block .solution-sec-img {
    width: 90%;
    margin: -10px auto 0 !important;
    max-width: 400px;
  }
  .interview-box__lead {
    margin: 15px 0 2px;
    margin-left: auto;
  }
  .interview-block {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
  }
  .interview-block.is-reverse {
    flex-direction: column;
  }
  .interview-block.is-reverse .solution-col {
    width: 100%;
  }
  .interview-block.is-reverse .solution-sec-img {
    margin: -20px auto 0 !important;
    max-width: 400px;
    width: 90%;
  }
  .interview-block.is-reverse {
    margin: 30px 0 0;
  }
}