@charset "utf-8";

/* ◆ イントロ ========== */

#sec01 .img {
  margin-bottom: 50px;
}
.trial .checkList .listItem {
  padding-left: 1.2em;
  padding-bottom: 1rem;
  background: url(../img/checkblue.png) no-repeat left top 10%;
  background-size: 1em;
  font-size: 1.9rem;
}
.pb100 {
  padding-bottom: 100px;
}

/* ◆ 導入の流れ ========== */
#flow .flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  gap: 10px;
  justify-content: center;
}
.parallelogram {
  transform: skewX(10deg);
  background: #5979A2;
  flex-basis: calc(50% - 15px);
  aspect-ratio: 8 / 7;
  color: #fff;
}
.parallelogram .item {
  transform: skewX(-10deg);
  text-align: center;
  border-bottom: 1px solid;
  padding-bottom: 5px;
  width: 10rem;
  margin: 10px auto 0;
  font-size: 1.5rem;
}
.parallelogram .num {
  transform: skewX(-10deg);
  text-align: right;
  opacity: 35%;
  font-size: 4rem;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* --- フロー図 --- */
.para2 {
  background: #4D6F9B;
}
.para3 {
  background: #406494;
}
.para4 {
  background: #335A8D;
}
.para5 {
  background: #265085;
}
.para6 {
  background: #1A467E;
}
.para7 {
  background: #0D3B77;
}
.para8 {
  background: #003170;
}

/* --- イラスト --- */
.parallelogram::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transform: skewX(-10deg);
}
.para1::after {
  background: url(../img/otoiawase1.svg) no-repeat center;
  background-size: 45%;
  bottom: -15px;
}
.para2::after {
  background: url(../img/utiawase2.svg) no-repeat center;
  background-size: 65%;
  bottom: -20px;
}
.para3::after {
  background: url(../img/test3.svg) no-repeat center;
  background-size: 40%;
  bottom: -20px;
}
.para4::after {
  background: url(../img/gokeiyaku4.svg) no-repeat center;
  background-size: 75%;
  bottom: -20px;
}
.para5::after {
  background: url(../img/seisaku5.svg) no-repeat center;
  background-size: 70%;
  bottom: -20px;
}
.para6::after {
  background: url(../img/kensa6.svg) no-repeat center;
  background-size: 65%;
  bottom: -20px;
}
.para7::after {
  background: url(../img/nouhin7.svg) no-repeat center;
  background-size: 50%;
  bottom: -20px;
}
.para8::after {
  background: url(../img/kenpin8.svg) no-repeat center;
  background-size: 28%;
  bottom: -25px;
}


/* ◆ RWD for PC ========== */

@media screen and ( min-width: 767px ) {

  .text1 {
    width: 60%;
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 30px;
  }
  .flex2 {
    flex-direction: row-reverse;
  }
  #sec01 .flex .img {
    margin-bottom: 0;
  }
  #sec01 .flex2 .img {
    flex-basis: 40%;
  }
  .trial .checkList {
    padding-top: 0;
    padding-left: 2rem;
  }
  #flow p {
    text-align: center;
  }
  .parallelogram {
    flex-basis: calc(25% - 15px);
  }
  .parallelogram .item {
    margin: 13px auto 0;
    font-size: 1.8rem;
    width: 11rem;
  }
  .parallelogram .num{
    font-size: 8rem;
    top: -10px;
    left: -8px;
  }
}