.plan .heading-component {
  @media (min-width: 769px) {
    padding-top: min(calc(100vw * (160 / 1280)), 160px);
  }
  .english {
    font-size: min(calc(100vw * (180 / 1280)), 180px);
    @media (max-width: 768px) {
      font-size: calc(100vw * (88 / 375));
    }
  }
}

#plan {
  width: 100%;
  background-color: #f2f4f7;
  padding-block: 80px;
  @media (max-width: 768px) {
    padding: calc(100vw * (48 / 375)) calc(100vw * (20 / 375));
  }

  .inner {
    max-width: 1200px;
    width: calc(100% - 80px);
    margin-inline: auto;
  }

  .plan-container {
    display: contents;

    @media (max-width: 768px) {
      display: block;
      padding: 24px 20px;
      width: 100%;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow: hidden;
    }

    .plan-courses {
      display: none;

      @media (max-width: 768px) {
        display: block;
        font-size: calc(100vw * (20 / 375));
        color: #333678;
        font-weight: bold;
        line-height: 1.4em;
        letter-spacing: 0;
        text-align: center;
      }

      &.hr {
        @media (max-width: 768px) {
          color: #992453;
        }
      }

      &.set {
        @media (max-width: 768px) {
          color: #333678;
        }
      }
    }

    .plan-text {
      display: none;

      @media (max-width: 768px) {
        display: block;
        font-size: calc(100vw * (16 / 375));
        font-weight: 400;
        line-height: 1.8em;
        letter-spacing: 0;
        color: #000000;
        text-align: center;
      }
    }

    .plan-image {
      overflow-x: auto;

      img {
        @media (max-width: 768px) {
          width: 920px;
          max-width: initial;
        }
      }
    }
  }

  .attention {
    .conditions {
      list-style: disc;
      padding-inline-start: 1.8em;
      margin-top: 0;

      .conditions-list {
        list-style: disc;
        padding-inline-start: 1.8em;
        margin-top: 0;
      }
    }

    .requirements {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 14px;

      p {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1em;
        letter-spacing: 0;
      }

      .requirements-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 0;

        li {
          font-size: 1rem;
          font-weight: 400;
          line-height: 1em;
          letter-spacing: 0;
        }
      }
    }
  }
}
.plan-image {
  width: 100%;
}
.note {
  font-size: 10px;
  line-height: 1.6;
  @media (max-width: 768px) {
    font-size: calc(100vw * (10 / 375));
  }
}
.attention h3 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  @media (max-width: 768px) {
    font-size: calc(100vw * (16 / 375));
  }
}
.attention ul {
  margin-top: 4px;
}
.attention ul li {
  font-size: 14px;
  line-height: 1.6;
  @media (max-width: 768px) {
    font-size: calc(100vw * (12 / 375));
  }
}
.attention ul li a {
  display: inline;
  text-decoration: underline;
}