/* タブレット用　 */
@media (max-width: 1024px) {
  /* 共通設定 */
  .wrapper {
    padding: 0 24px;
  }

  .section {
    padding: 60px 0;
  }

  /* TOPファーストビュー */
  #fv {
    height: 70vh;
    min-height: 560px;
    background-position: center;

    header {
      padding: 32px 24px;

      ul {
        gap: 28px;
      }
    }

    .fv-catch {
      h1 {
        font-size: 3rem;
      }

      p {
        letter-spacing: 0.3rem;
      }
    }
  }

  /* TOPワークスのセクション */
  #works.section {
    padding-bottom: 48px;
  }

  .works-list {
    gap: 24px;

    li {
      width: calc((100% - 48px) / 3);

      .works-box {
        padding: 20px;
      }
    }
  }

  /* TOPアバウトのセクション */
  #about.section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #contact.section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .about-more {
    margin-top: 32px;
  }

  .about-flex {
    gap: 48px;
  }

  .about-visual {
    flex: 0 0 280px;
    height: 360px;

    .about-visual-bg {
      width: 260px;
    }

    .about-visual-main {
      width: 220px;

      .visual-caption {
        left: -18px;
        font-size: 0.8rem;
        letter-spacing: 0.25em;
      }
    }
  }

  .about-profile {
    .about-text {
      font-size: 0.9rem;
      line-height: 2;
    }

    .about-history {
      padding-left: 24px;
    }
  }

  /* TOPコンタクトのセクション */
  #contact {
    .contact-btn.email {
      margin: 0 auto 12px;
    }

    .sns-list {
      gap: 24px;
    }
  }

  /* タブレット用ワークス詳細ページ */
  .works-header {
    padding: 10px 24px;

    .header-inner {
      min-height: 48px;
    }
  }

  #works-page {
    padding: 80px 24px;

    .works-banner-block {
      margin-bottom: 80px;
    }

    .sub-title {
      margin-bottom: 32px;
    }

    .banner-grid {
      gap: 40px 24px;

      .banner-item {
        width: calc((100% - 24px) / 2);

        .banner-text-v3 {
          padding: 18px 0 0;

          .works-title {
            margin-bottom: 18px;
            font-size: 1rem;
          }

          .works-desc-container {
            width: 92%;

            .works-desc {
              font-size: 0.8rem;
              line-height: 1.75;
            }
          }
        }
      }
    }

    .works-web-block {
      margin-bottom: 80px;
    }

    .web-item {
      gap: 28px;
      align-items: flex-start;
    }

    .web-img-v3 {
      width: 56%;
      padding: 6px;
    }

    .web-fv {
      margin-bottom: 8px;
    }

    .web-works {
      width: 94%;
    }

    .web-sp {
      right: -3%;
      bottom: 5%;
      width: 22%;
      border-radius: 10px;
    }

    .web-item {
      .banner-text-v3 {
        width: 44%;
        padding: 4px 24px 0 12px;
        text-align: center;
        box-sizing: border-box;

        .works-title {
          font-size: 1rem;
          margin-bottom: 18px;
          line-height: 1.7;
        }

        .works-desc-container {
          width: 100%;

          .works-desc {
            font-size: 0.8rem;
            line-height: 1.85;
            margin-bottom: 10px;

            & + .works-desc {
              margin-top: 14px;
            }
          }
        }
      }
    }

    .photo-gallery {
      column-count: 2;
      column-gap: 16px;
    }

    .photo-item {
      margin-bottom: 16px;
    }
  }

  .back-nav {
    margin-top: 64px;
    margin-bottom: 48px;
  }

  /* タブレット用フッター */
  footer {
    padding: 24px 0;
  }
}

/* 横長（Nest Hub系）用 */
@media (max-width: 1024px) and (max-height: 700px) {
  /* 横長系ワークス詳細ページ */
  #works-page {
    padding: 56px 24px;

    .works-banner-block {
      margin-bottom: 56px;
    }

    .banner-grid {
      gap: 28px 20px;
    }

    .banner-item {
      width: calc((100% - 20px) / 2);
      margin: 12px 0;
    }

    .banner-text-v3 {
      padding: 12px 0 0;

      .works-title {
        margin-bottom: 12px;
        font-size: 0.95rem;
      }

      .works-desc-container {
        width: 84%;
      }
    }

    .works-web-block {
      margin-bottom: 56px;
    }

    .web-img-v3 {
      width: calc((100% - 20px) / 2);
    }

    .web-item {
      gap: 20px;
      align-items: flex-start;
    }

    .web-img-v3 {
      width: 50%;
    }

    .web-item {
      .banner-text-v3 {
        width: 50%;
        padding: 4px 28px 0 14px;
        box-sizing: border-box;

        .works-title {
          font-size: 0.9rem;
          margin-bottom: 16px;
          line-height: 1.7;
        }

        .works-desc-container {
          width: 82%;
          margin: 0 auto;

          .works-desc {
            font-size: 0.74rem;
            line-height: 1.95;
            letter-spacing: 0.04em;

            & + .works-desc {
              margin-top: 16px;
            }
          }
        }
      }
    }

    .photo-gallery {
      column-count: 3;
      column-gap: 12px;
    }

    .photo-item {
      margin-bottom: 12px;
    }
  }

  footer {
    padding: 16px 0;
  }
}

/* 大きめタブレット用 */
@media (max-width: 1024px) and (min-width: 951px) {
  /* アバウト詳細ページ */
  #about-detail {
    padding-top: 50px;

    .wrapper {
      padding: 0 32px;
    }

    .vertical-copy-wrapper {
      margin-bottom: 56px;
    }

    .vertical-copy {
      writing-mode: vertical-rl;
      font-size: 2rem;
      height: 320px;
      line-height: 1.5;
      letter-spacing: 0.28em;
      text-align: left;
    }

    .about-modern-layout {
      gap: 40px;
      margin-bottom: 72px;
    }

    .profile-photo-container {
      flex: 0 0 42%;
    }

    .about-main-text {
      flex: 1;

      .intro-block {
        p {
          margin-bottom: 20px;
        }
      }
    }

    .story-block {
      padding-top: 56px;
    }

    .value-block {
      margin-top: 72px;

      .value-grid {
        gap: 16px;
      }

      .value-item {
        padding: 28px 24px;

        .item-title {
          font-size: 0.95rem;
          line-height: 1.7;
        }

        .item-text {
          font-size: 0.88rem;
          line-height: 1.9;
        }
      }
    }

    .skill-block {
      margin-top: 72px;

      .skill-list {
        gap: 40px;
      }
    }
  }
}

/* 小さめタブレット用 */
@media (max-width: 950px) {
  /* アバウト詳細ページ */
  #about-detail {
    padding-top: 50px;

    .wrapper {
      padding: 0 28px;
    }

    .vertical-copy-wrapper {
      margin-bottom: 28px;
    }

    .vertical-copy {
      writing-mode: vertical-rl;
      font-size: 1.55rem;
      line-height: 1.9;
      letter-spacing: 0.12em;
      text-align: left;
      height: 260px;
      margin: 0 auto;
    }

    .about-modern-layout {
      display: block;
      margin-bottom: 56px;
    }

    .profile-photo-container {
      width: 100%;
      max-width: 360px;
      margin: 0 auto 28px;
      flex: none;

      img {
        display: block;
        margin: 0 auto;
      }
    }

    .about-main-text {
      width: 100%;
      max-width: 520px;
      margin: 0 auto;

      .intro-block {
        max-width: none;
        margin: 0;

        p {
          text-align: left;
          line-height: 2.1;
          margin-bottom: 18px;
        }
      }
    }

    .story-block {
      max-width: 520px;
      margin: 0 auto;
      padding-top: 36px;

      .story-title {
        margin-bottom: 24px;
      }

      .highlight-text {
        max-width: none;
        margin: 24px 0 32px;
        font-size: 1rem;
        line-height: 2;
        text-align: center;
      }

      @media (min-width: 768px) {
        .highlight-text {
          margin: 24px auto 32px;
          font-size: 0.94rem;
          line-height: 1.85;
          letter-spacing: 0;
          text-wrap: balance;
        }
      }

      p {
        max-width: none;
        margin: 0 0 20px;
        line-height: 2.1;
        text-align: left;
      }
    }

    .value-block {
      margin-top: 64px;

      .value-grid {
        display: flex;
        gap: 20px;
      }

      .value-item {
        flex: 1;
        padding: 32px 28px;

        .item-title {
          font-size: 0.78rem;
          margin-bottom: 14px;
          white-space: nowrap;
          line-height: 1.5;
          text-align: center;
          letter-spacing: 0;
        }

        .item-text {
          font-size: 0.82rem;
          line-height: 2;
          max-width: 24em;
          margin: 0 auto;
        }
      }
    }

    .skill-block {
      margin-top: 64px;

      .skill-list {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
      }

      .skill-category {
        flex: 1;
        min-width: 220px;
        max-width: 320px;
        margin: 0;
      }
    }
  }

  /* ワークス詳細ページ */
  #works-page {
    .works-web-block {
      margin-bottom: 64px;
    }

    .web-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .web-img-v3 {
      width: calc((100% - 20px) / 2);
    }

    .web-item {
      .banner-text-v3 {
        width: calc((100% - 20px) / 2);
        padding: 6px 16px 0 10px;
        .works-title {
          font-size: 0.9rem;
          margin-bottom: 14px;
        }

        .works-desc {
          font-size: 0.75rem;
          line-height: 1.8;
        }
      }
    }
  }

  /* フッター */
  footer {
    padding: 20px 0;
  }
}

/* スマホ用 */
@media (max-width: 767px) {
  /* 共通 */
  .wrapper {
    padding: 0 16px;
  }

  .section {
    padding: 48px 0;
  }

  /* TOPファーストビュー */
  #fv {
    height: auto;
    min-height: 0;
    padding: 20px 0 32px;
    background-position: center;

    header {
      padding: 0 16px 18px;

      ul {
        gap: 18px;
        justify-content: center;
      }

      a {
        font-size: 0.88rem;
      }
    }

    .fv-catch {
      min-height: 0;
      padding: 120px 16px 80px;
      align-items: center;
      justify-content: center;
      text-align: center;

      h1 {
        font-size: 1.95rem;
        line-height: 1.45;
        letter-spacing: 0.1em;
      }

      p {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        margin-top: 10px;
      }
    }
  }

  /* h2見出し調整 */
  .section h2,
  .section .section-title {
    gap: 10px;
    margin-bottom: 24px;

    .main-title {
      font-size: 1.05rem;
      letter-spacing: 0.08em;
    }
  }

  /* TOPワークスのセクション */
  .works-list {
    display: block;

    li {
      width: 100%;

      & + li {
        margin-top: 24px;
      }

      .works-box {
        width: 82%;
        padding: 14px;
        margin: 0 auto 12px;
      }

      .works-info {
        text-align: center;
        .client-name {
          font-size: 0.66rem;
          margin-bottom: 4px;
        }

        .works-title {
          font-size: 0.82rem;
          line-height: 1.65;
          min-height: auto;
        }
      }
    }
  }

  /* TOPアバウトのセクション */
  .about-flex {
    display: block;
    margin-bottom: 32px;
  }

  .about-visual {
    width: 100%;
    max-width: 250px;
    height: 320px;
    margin: 0 auto 28px;
    flex: none;

    .about-visual-bg {
      width: 220px;
      top: 18px;
      left: 18px;
    }

    .about-visual-main {
      width: 190px;

      .visual-caption {
        left: -18px;
        font-size: 0.72rem;
        letter-spacing: 0.18em;
      }
    }
  }

  .about-profile {
    .about-text {
      font-size: 0.84rem;
      line-height: 2;
      text-align: left;
      padding: 0 20px;
      margin-bottom: 20px;
    }

    .about-text:nth-of-type(2) {
      margin-bottom: 36px;
    }

    .about-history {
      margin-bottom: 0;

      li {
        margin-bottom: 18px;

        .history-label {
          font-size: 0.66rem;
          margin-bottom: 4px;
          letter-spacing: 0.14em;
        }

        .history-desc {
          font-size: 0.84rem;
          line-height: 1.8;
        }
      }
    }
  }

  /* ボタン共通 */
  .works-more-btn,
  .about-link,
  #contact .contact-btn.email {
    width: auto;
    padding: 0;

    display: inline-block;
    width: 130px;
    padding: 10px 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  /* TOPコンタクトのセクション */
  #contact {
    .contact-text {
      margin: 0 auto 20px;
      font-size: 0.78rem;
      line-height: 1.9;
      text-align: center;
    }

    .contact-text span {
      display: block;
    }

    .contact-text span + span {
      margin-top: 4px;
    }

    .contact-btn.email {
      margin: 0 auto 16px;
    }

    .sns-list {
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;

      li a {
        font-size: 0.74rem;
      }
    }
  }

  .works-more,
  .about-more {
    margin-top: 24px;
    text-align: center;
  }

  /* スマホ用ワークス詳細ページ */
  .works-header {
    padding: 10px 16px;

    .header-inner {
      min-height: 44px;
      gap: 12px;
    }

    .header-logo a {
      font-size: 0.78rem;
      line-height: 1.4;
      white-space: nowrap;
    }

    .nav-list {
      gap: 14px;
      flex-wrap: nowrap;
    }

    .nav-list li a {
      font-size: 0.72rem;
      line-height: 1;
      white-space: nowrap;
    }
  }

  #works-page {
    padding: 48px 16px;

    .works-banner-block {
      margin-bottom: 44px;
    }

    .sub-title {
      font-size: 0.9rem;
      margin: 0 0 20px;
      text-align: left;
      letter-spacing: 0.06em;
    }

    .banner-grid {
      display: block;
      gap: 0;

      .banner-item {
        width: 100%;

        & + .banner-item {
          margin-top: 24px;
        }

        .banner-img-v3 {
          width: 100%;
          max-width: 220px;
          margin: 0 auto;
          padding: 6px;
          border-radius: 8px;
        }

        .banner-text-v3 {
          padding: 18px 0 0;
          text-align: center;

          .works-title {
            font-size: 0.9rem;
            line-height: 1.7;
            margin-bottom: 16px;
          }

          .works-desc-container {
            width: 100%;
            max-width: 18em;
            margin: 0 auto;
            align-items: flex-start;

            .works-desc {
              font-size: 0.76rem;
              line-height: 1.9;
              margin-bottom: 10px;
              text-align: left;
            }
          }
        }
      }
    }

    .works-web-block {
      margin-bottom: 44px;
    }

    .web-item {
      display: block;
      width: 100%;
    }

    .web-img-v3 {
      width: 100%;
      max-width: 220px;
      margin: 0 auto;
      padding: 6px;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .web-fv {
      margin-bottom: 8px;
    }

    .web-works {
      width: 94%;
      margin: 0 auto;
    }

    .web-sp {
      right: -3%;
      bottom: 5%;
      width: 22%;
      border-radius: 10px;
    }

    .web-item {
      .banner-text-v3 {
        width: 100%;
        max-width: 18em;
        margin: 0 auto;
        padding: 18px 0 0;
        text-align: center;
        box-sizing: border-box;

        .works-title {
          font-size: 0.9rem;
          line-height: 1.7;
          margin-bottom: 16px;
        }

        .works-desc-container {
          width: 100%;
          margin: 0 auto;
          align-items: flex-start;

          .works-desc {
            font-size: 0.76rem;
            line-height: 1.9;
            margin-bottom: 10px;
            text-align: left;

            & + .works-desc {
              margin-top: 16px;
            }
          }
        }
      }
    }

    .photo-gallery {
      column-count: 2;
      column-gap: 8px;
    }

    .photo-item {
      margin-bottom: 8px;

      img {
        border-radius: 6px;
      }
    }
  }

  .back-nav {
    margin-top: 40px;
    margin-bottom: 28px;
    text-align: center;
  }

  /* スマホ用アバウト詳細ページ */
  #about-detail {
    .about-catch {
      font-size: 1.2rem;
      line-height: 2.2;
      letter-spacing: 0.18em;
    }

    .about-main-text {
      p {
        font-size: 0.9rem;
        line-height: 2;
        margin: 0 16px 24px;
      }

      p + p {
        margin-top: 12px;
      }
    }

    .intro-block {
      p:last-child {
        margin-bottom: 40px;
      }
    }

    .story-block,
    .value-block,
    .skill-block {
      margin-top: 48px;
    }

    .story-block {
      .story-title {
        font-size: 0.9rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 24px;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        margin-left: auto;
        margin-right: auto;
      }

      p {
        font-size: 0.88rem;
        line-height: 2;
        margin: 0 16px 24px;

        br {
          display: none;
        }
      }

      .highlight-text {
        width: fit-content;
        max-width: calc(100% - 32px);
        margin: 28px auto;
        font-size: 0.9rem;
        line-height: 2;
        letter-spacing: 0.02em;
        text-align: center;
        white-space: normal;
        text-wrap: balance;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }

    .value-block {
      h3.sub-title {
        font-size: 1rem;
        letter-spacing: 0.06em;
      }

      .value-grid {
        display: block;
        margin-top: 24px;
      }

      .value-item {
        margin-bottom: 24px;
        padding: 24px 20px;
        &:last-child {
          margin-bottom: 0;
        }

        .item-title {
          font-size: 0.84rem;
          line-height: 1.7;
          margin-bottom: 10px;
          text-align: center;
          white-space: normal;
        }

        .item-text {
          font-size: 0.8rem;
          line-height: 1.9;
          text-align: left;
        }
      }
    }

    .skill-block {
      h3.sub-title {
        font-size: 1rem;
        letter-spacing: 0.06em;
      }

      .skill-list {
        display: block;
        max-width: 100%;
        margin: 24px auto 0;
        text-align: center;
      }

      .skill-category {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 28px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .skill-title {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        margin-bottom: 14px;
        line-height: 1.7;
        text-align: center;
        white-space: nowrap;
        opacity: 0.85;
      }

      li {
        width: 100%;
        font-size: 0.8rem;
        line-height: 1.9;
        text-align: center;
        margin: 0 auto 10px;
      }
    }
  }

  /* フッター */
  footer {
    padding: 12px 0;
  }
}