@charset "UTF-8";

header {
  z-index: 10;
}

section {
    width: 55vw;
    margin: 0 auto 200px;
    position: relative;
    padding-top: 8vw;
}

section > h1 {
  position: relative;
  display: block;
  width: 17vw;
  font-size: 2.8vw;
  left: 0vw;
  top: -2vw;
  z-index: 1;
  padding: 3.5vw 0;
  line-height: 3.5vw;
}

section > h1::after {
  display: block;
  content: "";
  width: 17vw;
  height: 17vw;
  position: absolute;
  z-index: -1;
  background-color: deepskyblue;
  transform: rotate(35deg);
  bottom: -1vw;
  right: 1vw;
  overflow: hidden;
  opacity: 0.2;
}

h1 + p {
  position: absolute;
  left: 0.5vw;
  top: 16.5vw;
  z-index: 1;
  font-size: 1vw;
}

section > h2:first-of-type, section > p {
  width: 27vw;
}

section > p {
  margin-bottom: 1vw;
  width: 26.5vw;
  margin-right: 0.5vw;
}

section > p:nth-of-type(2) {
    margin-bottom: 2vw;
}

section > img {
  float: right;
  width: 25vw;
}

section > ol {
  clear: both;
}

section a {
  color: deepskyblue;
}

ol ul li {
  font-size: 14px;
  margin-left: 2em;
  list-style-type: upper-alpha;
}

span.p {
  margin-left: -2em;
}

ol {
    list-style-type: none;
    counter-reset: item;
}

ol h2::before {
  counter-increment: item;
  content: counter(item)'. ';
  font-weight: bold;
}

ol h2 {
  text-indent: -1em
}

@media screen and (max-width:1024px) {
  section {
    width: 80vw;
    padding-top: 13vw;
  }

  section > h1 {
    width: 24vw;
    font-size: 3.8vw;
    line-height: 4.5vw;
    top: -4vw;
  }

  section > h1::after {
    width: 23vw;
    height: 23vw;
    bottom: -3vw;
    right: 3vw;
  }

  section > img {
    width: 32vw;
  }

  h1 + p {
    top: 21.5vw;
  }

  section > h2:first-of-type, section > p {
    width: 40vw;
    margin-bottom: 0;
  }

  section > p {
    width: 42.5vw;
  }
}

@media screen and (max-width:768px) {
  section {
    padding-top: 6vw;
    margin-bottom: 50px;
  }

  section > img {
      float: none;
      display: block;
      margin-left: auto;
      width: 39vw;
  }

  section > h2:first-of-type, section > p {
    width: 100%;
  }

  h1 + p {
    left: 1.5vw;
    top: 27vw;
    font-size: 2vw;
  }

  h2 {
    font-size: 3.5vw;
    padding-bottom: 5vw;
  }

  section > h1 {
    width: 29vw;
    font-size: 4.8vw;
    left: 1vw;
    top: 12vw;
    line-height: 5.5vw;
    position: absolute;
  }

  section > h1::after{
    width: 30vw;
    height: 30vw;
    bottom: -7vw;
    right: 2vw;
  }
}