/* it_creation */
/* common class
---------------------------------------------------------------------------- */
main.it_creation {
  background: #F1F1F1;
}
main.it_creation .eff-rollUp::before {
  background: #1085FF;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  opacity: 1;
  pointer-events: none;
  width: 100%;
  z-index: 9999;
}
main.it_creation .eff-rollUp.up::before {
  height: 100%;
  opacity: 1;
  transition: .5s ease;
}
main.it_creation .eff-rollUp.hide::before {
  top: 0;
  bottom: auto;
  height: 0;
}
main.it_creation .cont-outer {
  opacity: 0;
}
main.it_creation .cont-outer.show {
  opacity: 1;
}
main.it_creation .block01.show, main.it_creation .block02.show, main.it_creation .block03.show, main.it_creation .block04.show {
  opacity: 1;
}
main.it_creation .block01 {
  margin-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 767px) {
  main.it_creation .block01 {
    margin-bottom: calc(50 / 3.75 * 1vw);
  }
  main.it_creation .block01 .box01 img {
    height: auto;
    width: calc(99 / 3.75 * 1vw);
  }
  main.it_creation .block01 .box02 img {
    height: auto;
    width: calc(99 / 3.75 * 1vw);
  }
  main.it_creation .block01 .box03 img {
    height: auto;
    width: calc(99 / 3.75 * 1vw);
  }
  main.it_creation .block01 .box04 img {
    height: auto;
    width: calc(99 / 3.75 * 1vw);
  }
}
main.it_creation .block01 .cont-outer {
  background: url("../it_creation/img/block01_bg.png") center top no-repeat;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .block01 .cont-outer {
    background: url("../it_creation/img/block01_bg_sp.png") center top no-repeat;
  }
}
main.it_creation .block02 {
  margin-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 767px) {
  main.it_creation .block02 {
    margin-bottom: calc(50 / 3.75 * 1vw);
  }
  main.it_creation .block02 .box01 img {
    height: auto;
    width: calc(92 / 3.75 * 1vw);
  }
  main.it_creation .block02 .box02 img {
    height: auto;
    width: calc(107 / 3.75 * 1vw);
  }
  main.it_creation .block02 .box03 img {
    height: auto;
    width: calc(102 / 3.75 * 1vw);
  }
  main.it_creation .block02 .box04 img {
    height: auto;
    width: calc(91 / 3.75 * 1vw);
  }
}
main.it_creation .block02 .cont-outer {
  background: url("../it_creation/img/block02_bg.png") center top no-repeat;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .block02 .cont-outer {
    background: url("../it_creation/img/block02_bg_sp.png") center top no-repeat;
  }
}
main.it_creation .block03 {
  margin-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 767px) {
  main.it_creation .block03 {
    margin-bottom: calc(50 / 3.75 * 1vw);
  }
  main.it_creation .block03 .box01 img {
    height: auto;
    width: calc(80 / 3.75 * 1vw);
  }
  main.it_creation .block03 .box02 img {
    height: auto;
    width: calc(81 / 3.75 * 1vw);
  }
  main.it_creation .block03 .box03 img {
    height: auto;
    width: calc(60 / 3.75 * 1vw);
  }
  main.it_creation .block03 .box04 img {
    height: auto;
    width: calc(70 / 3.75 * 1vw);
  }
}
main.it_creation .block03 .cont-outer {
  background: url("../it_creation/img/block03_bg.png") center top no-repeat;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .block03 .cont-outer {
    background: url("../it_creation/img/block03_bg_sp.png") center top no-repeat;
  }
}
main.it_creation .block04 {
  margin-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 767px) {
  main.it_creation .block04 {
    margin-bottom: calc(50 / 3.75 * 1vw);
  }
  main.it_creation .block04 .box01 img {
    height: auto;
    width: calc(84 / 3.75 * 1vw);
  }
  main.it_creation .block04 .box02 img {
    height: auto;
    width: calc(119 / 3.75 * 1vw);
  }
  main.it_creation .block04 .box03 img {
    height: auto;
    width: calc(109 / 3.75 * 1vw);
  }
  main.it_creation .block04 .box04 img {
    height: auto;
    width: calc(110 / 3.75 * 1vw);
  }
}
main.it_creation .block04 .cont-outer {
  background: url("../it_creation/img/block04_bg.png") center top no-repeat;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .block04 .cont-outer {
    background: url("../it_creation/img/block04_bg_sp.png") center top no-repeat;
  }
}
main.it_creation h3 {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.83;
  height: 500px;
  justify-content: center;
  letter-spacing: -.02em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  main.it_creation h3 {
    font-size: calc(24 / 3.75 * 1vw);
    line-height: 1.75;
    height: calc(200 / 3.75 * 1vw);
  }
}
main.it_creation .title-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  padding: 50px 90px;
  height: 450px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .title-box {
    box-shadow: 0px calc(10 / 3.75 * 1vw) calc(20 / 3.75 * 1vw) rgba(0, 0, 0, 0.25);
    border-radius: calc(10 / 3.75 * 1vw);
    padding: calc(20 / 3.75 * 1vw) calc(14 / 3.75 * 1vw);
    height: calc(415 / 3.75 * 1vw);
  }
}
main.it_creation .title-box h4 {
  color: #1085FF;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 36px;
  font-weight: 700;
  display: flex;
  height: 114px;
  justify-content: center;
  line-height: 1.66;
  text-align: center;
}
@media screen and (max-width: 767px) {
  main.it_creation .title-box h4 {
    font-size: calc(22 / 3.75 * 1vw);
    height: calc(73 / 3.75 * 1vw);
    line-height: 1.81;
  }
  main.it_creation .title-box h4.fnt-s {
    font-size: calc(18 / 3.75 * 1vw);
  }
}
main.it_creation .title-box .sub-lead {
  font-size: 20px;
  line-height: 2;
  letter-spacing: -.018em;
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  main.it_creation .title-box .sub-lead {
    font-size: calc(16 / 3.75 * 1vw);
    line-height: 1.75;
    letter-spacing: -.01em;
    margin-top: calc(20 / 3.75 * 1vw);
  }
}
main.it_creation .flx-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  row-gap: 20px;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box {
    margin-top: calc(7 / 3.75 * 1vw);
    row-gap: calc(7 / 3.75 * 1vw);
  }
}
main.it_creation .flx-box .cont-box-outer {
  background: linear-gradient(to top, #95FF47 0%, #288EFF 100%);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  height: 330px;
  padding: 4px;
  width: 490px;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box .cont-box-outer {
    box-shadow: 0px calc(10 / 3.75 * 1vw) calc(20 / 3.75 * 1vw) rgba(0, 0, 0, 0.25);
    height: calc(206 / 3.75 * 1vw);
    padding: calc(4 / 3.75 * 1vw);
    width: calc(170 / 3.75 * 1vw);
  }
}
main.it_creation .flx-box .cont-box-outer .cont-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 40px 44px;
  background: #fff;
  width: 100%;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box .cont-box-outer .cont-box {
    justify-content: space-between;
    padding: calc(10 / 3.75 * 1vw) calc(8 / 3.75 * 1vw);
  }
}
main.it_creation .flx-box .cont-box-outer .cont-box p {
  align-items: center;
  display: flex;
  font-size: 22px;
  height: 70px;
  line-height: 36px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box .cont-box-outer .cont-box p {
    font-size: calc(16 / 3.75 * 1vw);
    height: auto;
    line-height: calc(28 / 3.75 * 1vw);
  }
}
main.it_creation .flx-box .cont-box-outer .cont-box figure {
  align-items: center;
  display: flex;
  height: 164px;
  margin-top: 30px;
  height: auto;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box .cont-box-outer .cont-box figure {
    margin-top: 0;
  }
}
main.it_creation .flx-box .cont-box-outer .cont-box figure.size-l {
  margin-top: 0;
  height: 185px;
}
@media screen and (max-width: 767px) {
  main.it_creation .flx-box .cont-box-outer .cont-box figure.size-l {
    height: 100%;
  }
}
main.it_creation .navi-box {
  align-items: center;
  display: flex;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  justify-content: center;
  padding-top: 50px;
}
@media screen and (max-width: 767px) {
  main.it_creation .navi-box {
    font-size: calc(16 / 3.75 * 1vw);
    padding-top: calc(50 / 3.75 * 1vw);
  }
}
main.it_creation .navi-box .link-box {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 200px;
  width: 50%;
}
@media screen and (max-width: 767px) {
  main.it_creation .navi-box .link-box {
    height: calc(75 / 3.75 * 1vw);
  }
}
main.it_creation .navi-box a {
  text-align: center;
}
main.it_creation .navi-box a::before {
  background: url("../it_creation/img/arrow.png") center center no-repeat;
  content: "";
  display: inline-block;
  height: 12px;
  margin-right: 10px;
  width: 12px;
}
@media screen and (max-width: 767px) {
  main.it_creation .navi-box a::before {
    height: calc(11.5 / 3.75 * 1vw);
    margin-right: calc(10 / 3.75 * 1vw);
    width: calc(11.5 / 3.75 * 1vw);
  }
}
main.it_creation .navi-box span {
  position: relative;
  text-align: center;
}
main.it_creation .navi-box span::before {
  background: url("../it_creation/img/arrow.png") center center/contain no-repeat;
  content: "";
  display: block;
  transform: rotate(-90deg);
  height: 12px;
  position: absolute;
  bottom: -20px;
  left: 30px;
  width: 12px;
}
@media screen and (max-width: 767px) {
  main.it_creation .navi-box span::before {
    height: calc(11.5 / 3.75 * 1vw);
    bottom: calc(-20 / 3.75 * 1vw);
    left: calc(25 / 3.75 * 1vw);
    width: calc(11.5 / 3.75 * 1vw);
  }
}
main.it_creation .navi-box span.to-page-top {
  cursor: pointer;
  transition: .2s ease;
}
main.it_creation .navi-box span.to-page-top::before {
  left: 13px;
  transform: rotate(90deg);
  top: -20px;
  bottom: auto;
}
@media screen and (max-width: 767px) {
  main.it_creation .navi-box span.to-page-top::before {
    left: calc(11 / 3.75 * 1vw);
    top: calc(-20 / 3.75 * 1vw);
  }
}
main.it_creation .navi-box span.to-page-top:hover {
  opacity: .7;
}