@media (width < 700px) {
    section {
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0;
        padding: 0 5%;

        &.bg {
            &::before {
                width:90%;
            }
        }
    }

  #about-hsct {
    margin-top: 18px;
  }

  .breadcrumbs {
    flex-direction: column;
    align-items: start;
    padding-left: 0;
  }

  .breadcrumbs_list_item {
    min-height: 20px;
    align-items: end;
  }

  .breadcrumbs .home_icon {
    height: 14px;
    margin: 3px 5px auto 0;
  }

  .breadcrumbs_link {
    color: #2e6aae;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 13px;
    box-sizing: border-box;
    min-height: 20px;
    margin-top: auto;
  }

  .breadcrumbs_link.root {
    border-bottom: 1px solid #2e6aae;
  }

  .breadcrumbs_link.first {
    padding-bottom: 6px;
  }

  .breadcrumbs_link.disable {
    color: #273c4b;
  }

  .breadcrumbs li:not(:first-child)::before {
    margin: 0 5px auto 3px;
    border-width: 3px;
    width: 5px;
    height: 5px;
    transform: translateY(5px) rotate(-45deg);
  }

    h1.article_heading {
      padding: 0 10px;

        &::before {
        content: "";
        position: absolute;
        width: calc(100% + 4%);
        left: auto;
        right: 0;
        display: inline-block;
        height: 80px;
        background-color: #2E6AAE;
        border-radius: 0 20px 20px 0;
    }

        &::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: -16px;
            bottom: -10px;
            width: 0px;
            height: 0px;
            border: none;
            border-bottom: 10px solid transparent;
            border-right: 15px solid #D41675;
        }

        span {
            font-size:20px;
            width: auto;
        }
    }


  h2.article_heading {
    font-size: 18px;
    padding-left: 12px;
    line-height: 1.5;
    margin: 18px 10px 0 10px;
  }

  h2.article_heading::before {
    width: 6px;
    height: 100%;
  }

  h3.article_heading {
    font-size: 16px;
    height: 32px;
    margin: 18px 10px 0 10px;
    text-indent: 18px;
  }

  h3.article_heading::before {
    width: 12px;
    height: 12px;
  }

  h4.article_heading {
    font-size: 16px;
    margin: 14px 10px 0 10px;
  }

  .article_container_with_image {
    display: flex;
    flex-direction: column-reverse;
  }

  .article_paragraph {
    padding: 16px 10px 0 10px;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 22px;
  }

  h1.article_heading + p.article_paragraph {
    margin-top: 0;
  }

  p.notice {
    font-size: 12px;
    margin: 0 10px 0 10px;
    line-height: 18px;
  }

  .notice + p {
    margin-top: 34px;
  }

  /* image */

  .img-right {
    float: none;
    margin: 3px 10px 0 10px;
  }

  .image_1 {
    width: 100%;
    margin-top: 24px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .hla-image {
    width: 100%;
    padding: 0 10px;
    margin: 3px 0 0 0;
    box-sizing: border-box;
  }

  /* table */

  .js-scrollable {
    margin: 0 -10px;
    padding: 0 10px;
  }

  .matrix_diagram_heading {
    font-size: 16px;
    color: #2e6aae;
    padding: 14px 10px 0 10px;
    box-sizing: border-box;
  }

  table.matrix_diagram {
    margin-top: 24px;
    width: 855px;
    z-index: 1;
  }

  table.matrix_diagram th {
    line-height: 36px;
  }

  .matrix_diagram_table_heading,
  .matrix_diagram_table_list_item {
    font-size: 14px;
  }

  .matrix_diagram_table_heading {
    text-indent: 10px;
  }

  .matrix_diagram_table_list {
    margin-top: 10px;
  }

  .matrix_diagram_table_list_item {
    margin: 0 8px 12px 20px;
  }

  .matrix_diagram_table_list_item::before {
    width: 8px;
    height: 8px;
    top: 12px;
    left: -14px;
  }

  #reference {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .reference_container {
    padding: 24px 10px 45px 10px;
  }

  #reference h4.reference {
    font-size: 13px;
  }

  #reference h4.reference + p.reference {
    margin-top: 8px;
  }

  #reference p.reference {
    word-break: break-all;
    font-size: 13px;
    line-height: 24px;
  }

  #reference a.reference {
    display: block;
    word-break: break-all;
    font-size: 13px;
    line-height: 24px;
  }

  .treatment_img {
    margin-top: 40px;

    ul {
      width: 70%;
      flex-direction: column;
      justify-content: center;
      padding: 25px 0;

      @media (width < 500px) {
        width: 90%;
      }

      li {
        width: 100%;

        &:last-child {
          margin-top: 30px;

          img {
            padding: 10px 0 0 25px;
          }

          &::after {
            top: -30px;
            border-left: none;
            border-top: #d41675 1px dashed;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
  }

  .tit01 {
    font-size: 16px;
    height: 34px;
  }

  .tit01_line {
    font-size: 16px;
  }
}