/* ==========================================================================
   Responsive — SP専用スタイル（max-width: 767px）
   ========================================================================== */

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

  /* Fluid Typography SP基準: デザイン幅 400px */
  html {
    font-size: calc(var(--vw, 100vw) / 40);
  }

  /* 形状変数（SPインナー） */
  :root {
    --border-radius-inner: 0.6rem;
  }

  /* コンテナ */
  .l-container {
    padding: 0 2rem;
  }

  /* ヘッダー */
  .l-header {
    height: 6rem;
    padding: 0 2rem;
  }

  .l-nav {
    display: none;
  }

  .l-header__cta-pc {
    display: none;
  }

  .l-header__logo img {
    height: 4.4rem;
  }

  .l-header-burger {
    display: flex;
  }

  .l-sp-nav {
    display: flex;
  }

  /* セクションタイトル */
  .section-title-svg {
    height: 7.6rem;
  }

  .section-title-ja {
    font-size: 1.2rem;
  }

  /* --------------------------------------------------------------------------
     #mv SP
     -------------------------------------------------------------------------- */
  .section-mv {
    padding: 12rem 0 8rem;
    text-align: left;
  }

  .mv__content {
    max-width: 100%;
  }

  .mv__main-copy {
    font-size: 2.6rem;
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.8;
    letter-spacing: 0.06em;
  }

  .mv__sub-copy {
    font-size: 1.4rem;
  }

  .mv__cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .mv-illust-pc {
    display: none;
  }

  .mv-illust-sp {
    display: block;
  }

  /* SP イラスト配置（10体） */
  .mv-illust-sp .c-illust:nth-child(1)  { left: 5%;  top: 8%;  width: 22%; }
  .mv-illust-sp .c-illust:nth-child(2)  { left: 70%; top: 5%;  width: 25%; }
  .mv-illust-sp .c-illust:nth-child(3)  { left: 40%; top: 3%;  width: 18%; }
  .mv-illust-sp .c-illust:nth-child(4)  { left: -5%; top: 35%; width: 20%; }
  .mv-illust-sp .c-illust:nth-child(5)  { left: 75%; top: 30%; width: 22%; }
  .mv-illust-sp .c-illust:nth-child(6)  { left: 10%; top: 60%; width: 18%; }
  .mv-illust-sp .c-illust:nth-child(7)  { left: 65%; top: 55%; width: 20%; }
  .mv-illust-sp .c-illust:nth-child(8)  { left: 35%; top: 75%; width: 22%; }
  .mv-illust-sp .c-illust:nth-child(9)  { left: 80%; top: 75%; width: 16%; }
  .mv-illust-sp .c-illust:nth-child(10) { left: 0%;  top: 85%; width: 18%; }

  /* --------------------------------------------------------------------------
     #service SP
     -------------------------------------------------------------------------- */
  .section-service {
    padding: 8rem 0 10rem;
  }

  .service-item-link {
    height: auto;
    min-height: 36.8rem;
    padding: 3.2rem 3rem 12rem;
  }

  .service-item__heading {
    font-size: 2.2rem;
  }

  .service-item__icon {
    bottom: 3rem;
    left: 3rem;
  }

  .service-item__illust {
    right: -1rem;
    bottom: -1rem;
    width: 18rem;
  }

  /* --------------------------------------------------------------------------
     #strength SP
     -------------------------------------------------------------------------- */
  .section-strength {
    padding: 8rem 0;
  }

  .strength-item {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .strength-item__heading {
    font-size: 2.4rem;
  }

  .strength-item__text {
    font-size: 1.4rem;
  }

  .strength-item__image {
    border-radius: 1.6rem;
  }

  /* --------------------------------------------------------------------------
     #company SP
     -------------------------------------------------------------------------- */
  .section-company {
    padding: 8rem 0;
  }

  .company-table__row {
    flex-direction: column;
    gap: 0.4rem;
  }

  .company-table__label {
    width: 100%;
    font-size: 1.4rem;
  }

  .company-table__value {
    width: 100%;
    font-size: 1.4rem;
  }

  /* --------------------------------------------------------------------------
     #message SP
     -------------------------------------------------------------------------- */
  .section-message {
    padding: 8rem 0;
  }

  .message__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .message__image {
    margin-bottom: 2.4rem;
    border-radius: 0.8rem;
  }

  .message__heading {
    font-size: 2.4rem;
  }

  .message__text {
    font-size: 1.4rem;
    line-height: var(--leading-loose);
  }

  /* --------------------------------------------------------------------------
     #contact SP
     -------------------------------------------------------------------------- */
  .section-contact {
    padding: 8rem 0;
  }

  .contact__heading {
    font-size: 2.4rem;
  }

  .contact__cta-group {
    flex-direction: column;
    align-items: center;
  }

  .contact-form-wrapper {
    padding: 3.2rem;
  }

  .form-group__input,
  .form-group__textarea {
    font-size: 1.6rem;
  }

  .form-radio-group {
    flex-direction: column;
  }

  /* --------------------------------------------------------------------------
     フッター SP
     -------------------------------------------------------------------------- */
  .l-footer {
    padding: 6rem 0;
  }

  .l-footer__wow-text {
    font-size: 5rem;
  }

  .l-footer__nav {
    flex-direction: column;
    gap: 0.8rem;
  }
}