#instruction {
  padding: 40px 6vw;
}
@media screen and (min-width: 768px) {
  #instruction {
    padding: 40px 40px;
  }
}
@media screen and (min-width: 980px) {
  #instruction {
    padding: 40px 60px 80px;
  }
}

@media screen and (min-width: 768px) {
  .contents_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0 40px;
  }
}
.contents_flex + .contents_flex {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
@media screen and (min-width: 768px) {
  .contents_flex + .contents_flex {
    -webkit-margin-before: 75px;
            margin-block-start: 75px;
  }
}
@media screen and (min-width: 980px) {
  .contents_flex + .contents_flex {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
  }
}

.contents_right {
  max-width: 790px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .contents_right {
    margin-top: 0;
  }
}

.instruction_head {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (min-width: 980px) {
  .instruction_head {
    font-size: 1.8rem;
  }
}

.parent_list {
  -webkit-margin-before: 30px;
          margin-block-start: 30px;
}

.parent_list_item {
  position: relative;
  counter-increment: parent;
  font-size: 1.5rem;
  line-height: 1.8;
  -webkit-padding-start: 1.2em;
          padding-inline-start: 1.2em;
}
.parent_list_item a {
  color: #cc0000;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  text-decoration: underline;
}
@media (hover: hover) {
  .parent_list_item a:hover {
    opacity: 0.7;
  }
}
.parent_list_item::before {
  content: counter(parent) ".";
  position: absolute;
  top: 0;
  left: 0;
}
.parent_list_item + .parent_list_item {
  -webkit-margin-before: 25px;
          margin-block-start: 25px;
}

.child_list {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
}

.child_list_item {
  position: relative;
  counter-increment: child;
  font-size: 1.5rem;
  line-height: 1.8;
  -webkit-padding-start: 2.5em;
          padding-inline-start: 2.5em;
}
.child_list_item a {
  color: #cc0000;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  text-decoration: underline;
}
@media (hover: hover) {
  .child_list_item a:hover {
    opacity: 0.7;
  }
}
.child_list_item::before {
  content: "( " counter(child) " )";
  position: absolute;
  top: 0;
  left: 0;
}
.child_list_item + .child_list_item {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
}