#contents_01 {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(2,minmax(calc(100vw / 16), auto)) repeat(6,calc(100vw / 16)) repeat(2,minmax(calc(100vw / 16), auto));
  margin-top: calc(calc(calc(100vw / 16) * 0.6) + 2rem);
}
@media screen and (max-width: 896px) {
  #contents_01 {
    grid-template-rows: repeat(8,minmax(calc(100vw / 16), auto));
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01 {
  }
}

h1 {
  position: relative;
  grid-column: 3 / 16;
  grid-row: 2 / 3;
  margin-top: calc(calc(100vw / 16) * -0.5);
  margin-left: calc(calc(100vw / 16) * -0.1);
  padding-bottom: calc(calc(100vw / 16) * 0.75);
  font-size: calc(calc(calc(100vw / 16) * 0.3) + 1.7rem);
  line-height: calc(calc(calc(calc(100vw / 16) * 0.3) + 1.7rem) * 1.4);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (max-width: 896px) {
  h1 {
    grid-column: 2 / 16;
    padding-top: 1em;
    padding-bottom: 1em;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  h1 {
  }
}

h1::after {
  display: block;
  content: "Capability of Coil Winding";
  font-size: 1.1em;
  font-weight: 200;
  font-family: 'Noto Sans', sans-serif;
  color:rgba(165, 194, 234, 0.8);
}

#contents_01-01 {
  grid-column: 3 / 9;
  grid-row: 3 / 11;
  margin-right: calc(calc(100vw / 16) * 0.8);
}
@media screen and (max-width: 896px) {
  #contents_01-01 {
    grid-column: 2 / 16;
    grid-row: 3 / 4;
    margin-right: 0;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01-01 {
  }
}

#contents_01-01 p {
  line-height: 1.5em;
  margin-bottom: 2em;
}
@media screen and (max-width: 896px) {
  #contents_01-01 p {
    margin-bottom: 1em;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01-01 p {
  }
}

#contents_01-02 {
  grid-column: 9 / 13;
  grid-row: 3 / 6;
  background-image: url(../img/capability_01.jpg);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 calc(calc(100vw / 16) * 0.25)  0 calc(calc(100vw / 16) * -0.25);
  z-index: 10;
}
@media screen and (max-width: 896px) {
  #contents_01-02 {
    grid-column: 2 / 16;
    grid-row: 5 / 6;
    height: calc(calc(calc(100vw / 16) * 14) * 0.75);
    margin: 0;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01-03 {
  }
}

#contents_01-03 {
  grid-column: 12 / 16;
  grid-row: 4 / 7;
  background-image: url(../img/capability_02.jpg);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: calc(calc(100vw / 16) * -0.5) calc(calc(100vw / 16) * -0.25) calc(calc(100vw / 16) * 0.5) calc(calc(100vw / 16) * 0.25);
  z-index: 9;
}
@media screen and (max-width: 896px) {
  #contents_01-03 {
    grid-column: 2 / 16;
    grid-row: 7 / 8;
    height: calc(calc(calc(100vw / 16) * 14) * 0.75);
    margin: 0;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01-03 {
  }
}

#contents_01-04 {
  grid-column: 10 / 14;
  grid-row: 6 / 9;
  background-image: url(../img/capability_03.jpg);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: calc(calc(100vw / 16) * -0.5) 0 calc(calc(100vw / 16) * 0.5) 0;
  z-index: 8;
}
@media screen and (max-width: 896px) {
  #contents_01-04 {
    display: none;
  }
}
@media screen and (min-width: 897px) and (max-width: 1024px) {
  #contents_01-04 {
  }
}