@media screen and (max-width: 1200px) {

  /* top */
  #top-main-visual-area video {
    margin-top: 50px;
    width: 100%;
    height: auto;
  }

  /* recruit */
  .recruit-content {
    flex-direction: column;
    gap: 20px;
  }

  #recruit-catch-copy h2 {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  #background {
    display: none;
  }

  /* top */
  #top-main-visual-area video {
    margin-top: 40px;
    width: 100%;
    height: auto;
  }

  /* news */
  .news-card-area {
    gap: 10px;
  }

  .news-card {
    border: 2px dashed #ccc;
  }

  .news-card-link-area {
    border: 2px dashed #ccc;
  }

  .news-card-link-area:hover {
    border: 2px dashed #555;
  }

  /* about us */
  #about-us-scroll-contents h2 {
    text-align: center;
    font-size: large;
  }

  .about-us-image {
    display: none;
  }

  #about-us-scroll-content {
    width: calc(100vw - 40px);
  }

  .about-us-text {
    border: 2px dashed #ccc;
  }

  /* service */
  .top-service-contents {
    flex-direction: column;
    gap: 30px;
  }

  .top-service-contents>div {
    flex: none;
    width: 100%;
  }

  .service-dev-content-text {
    border: 2px dashed #ccc;
  }

  /* recruit */
  .recruit-content {
    flex-direction: column;
    gap: 25px;
  }

  #recruit-catch-copy {
    border: 2px dashed #ccc;
  }

  #recruit-catch-copy h2 {
    text-align: center;
    font-size: large;
  }

  .recruit-text {
    border: 2px dashed #ccc;
  }

  .custom-link {
    border: 2px dashed #ccc;
  }

  .custom-link:hover {
    border: 2px dashed #ccc;
  }
}