/**
 * Tablet (Medium) Breakpoint Styles
 * style-md.css
 * タブレット用 CSS（768px ～ 1024px 想定）
 */

@media (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 2vw;
  }

  .container {
    width: 90%;
    max-width: 90%;
    margin: auto;
  }

  .hero-bg-shape-1 {
    left: -5rem;
    top: -1rem;
    width: 21.4rem;
  }

  .hero-bg-shape-2 {
    right: -1rem;
    top: 4rem;
    width: 12rem;
  }

  .hero__mb-logo {
    margin: auto;
  }

  .strengths.strengths--with-circles.shape-split {
    background-position: left -0.5rem top 42.55rem, top 17.2rem right 0.5rem, bottom 3.25rem right 23.35rem;
  }

  .strengths__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .apply-flow__inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  .apply-flow__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }

  .apply-flow__card {
    aspect-ratio: auto;
    flex: 0 0 calc((100% - 2rem) / 2);
    min-width: 0;
  }

  .apply-flow__card:not(:first-child)::before {
    left: calc(-3.75rem / 2 + 1rem);
  }

  /* case / solutions：タブレットでも SP と同じ構造（style.css 767px以下を参考） */
  section.case,
  section.solutions {
    padding-top: 0 !important;
  }

  .case .case_container,
  .solutions .solutions_container {
    flex-direction: column;
  }

  .case .case_container > * {
    flex: 0 0 auto;
  }

  .case .catch__content,
  .case .case_slider-wrap,
  .solutions .catch__content,
  .solutions .solutions_slider-wrap {
    flex: 0 0 100%;
  }

  .case_header,
  .solutions_header {
    padding-bottom: 11rem;
  }

  .case .case_header,
  .solutions .solutions_header {
    background-size: 40% auto;
  }

  .case .case_container .catch__label,
  .solutions .solutions_container .catch__label {
    font-size: 3rem;
  }

  .case_slider-wrap,
  .solutions_slider-wrap {
    margin-left: auto;
    margin-right: auto;
    margin-top: -12rem;
    max-width: 100%;
    width: 90%;
  }

  .case_card-wrap {
    padding: 3rem 0 0 0;
  }

  .case_card {
    padding: 1.5rem 2rem;
  }

  .slick-track {
    padding-top: 0;
  }

  .solutions_card-wrap {
    flex-wrap: wrap;
  }

  .solutions_card-wrap .solutions_card {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* .solutions_card__block は PC と同じ（style-md では上書きしない） */

  .case_slider .slick-list,
  .solutions_slider .slick-list {
    max-width: 100%;
  }

  .schools {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .schools__item {
    flex: 0 0 calc((100% - 1rem) / 2);
    min-width: 0;
    max-width: none;
    width: auto;
  }

  .problems__columns > * {
    flex: 0 0 calc(100% / 2);
  }

  .problems__columns > *:nth-child(4),
  .problems__columns > *:nth-child(5),
  .problems__columns > *:nth-child(6) {
    order: unset;
  }

  /* problems アイコン（832px基準・2vw換算、コンテンツ幅90%のため座標・幅を0.9倍） */
  .problems__item:nth-child(1) .problems__icon { top: 2.27rem; width: 24.71rem; }
  .problems__item:nth-child(2) .problems__icon { left: 1.65rem; top: 1.52rem; width: 11.2rem; }
  .problems__item:nth-child(3) .problems__icon { left: 2.9rem; top: 0.7rem; width: 15.47rem; }
  .problems__item:nth-child(4) .problems__icon { right: 0; top: 1.91rem; width: 19.74rem; }
  .problems__item:nth-child(5) .problems__icon { left: 2rem; top: 2.24rem; width: 23.29rem; }
  .problems__item:nth-child(6) .problems__icon { left: 1.95rem; top: 1.74rem; width: 19.25rem; }

  /* problems テキスト位置（SP と同じ） */
  .problems__item:nth-child(1) .problems__text { transform: translate(4rem, 0); }
  .problems__item:nth-child(2) .problems__text { transform: translate(1.85rem, 0); }
  .problems__item:nth-child(3) .problems__text { transform: translate(2.5rem, 1.5rem); }
  .problems__item:nth-child(4) .problems__text { transform: translate(-4rem, -0.5rem); }
  .problems__item:nth-child(5) .problems__text { transform: translate(-0.5rem, 0rem); }
  .problems__item:nth-child(6) .problems__text { transform: translate(-3rem, 0.9rem); }
}