@layer media-pc {
  @media (width >=746px) {
    @layer layout {
      .site-title {
        font-size: 2.25rem;
      }

      @layer grid {

        .ai-glossary-container,
        .ai-tool-category-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @layer container {

        .ai-guide-links-container,
        .ai-tool-category {
          padding: 24px;
        }
      }

      @layer header {
        .ai-guide-header {
          padding: 16px;
          overflow-x: auto;
        }

        .ai-guide-header-inner {
          grid-template-columns: max-content 1fr;
          grid-column-gap: min(32px, 4vw);
        }

        .ai-guide-header-links {
          grid-template-columns: minmax(max-content, 1fr) max-content;
          justify-content: start;
          grid-column-gap: 20px;
        }

        .ai-guide-header-nav {
          justify-self: center;
        }

        .ai-guide-header-list {
          display: flex;
        }

        .ai-guide-header-item {
          padding: 0 12px;
        }

        .ai-guide-header-item+.ai-guide-header-item {
          border-left: solid 1px #e5e7eb;
        }

        .social-links {
          padding-right: 16px;
        }
      }

      @layer section {
        .ai-guide-section {
          border: solid 1px #e5eaf1;
          border-radius: 12px;
          padding: 32px;
        }

        .ai-guide-section-info {
          max-width: 960px;
          margin-inline: auto;
          padding-inline: 0;
        }

        .ai-guide-section:first-of-type {
          margin-top: 32px;
        }

        .ai-guide-section~.ai-guide-section {
          margin-top: 64px;
        }

        .ai-guide-anchor {
          margin-top: -50px;
          padding-top: 50px;
        }

        .ai-link-anchor {
          margin-top: -130px;
          padding-top: 130px;
        }

        .section-heading {
          font-size: 1.875rem;
          grid-column-gap: 20px;
        }
      }
    }

    @layer component {
      @layer announcement {
        .announcement-link {
          padding: 16px 24px;
        }

        .announcement-info {
          max-width: 800px;
          margin-inline: auto;
        }
      }

      @layer video {
        .ai-video-list {
          grid-template-columns: repeat(4, 1fr);
          grid-column-gap: 40px;
          padding-top: 8px;
        }

        .ai-video-item {
          box-shadow: 1px 2px 6px 2px rgba(50, 50, 50, 0.2);
        }

        .ai-video-footer {
          margin-top: 47px;
        }
      }

      @layer manual {
        .manual-service-tab-list {
          grid-template-columns: repeat(2, 300px);
          grid-column-gap: 40px;
        }

        .manual-tab-content-footer {
          margin-top: 20px;
        }

        /* SP用マニュアルを非表示 */
        .sp-manual-details {
          display: none;
        }
      }

      @layer news {
        .ai-news-list {
          grid-template-columns: repeat(3, minmax(min-content, 365px));
          grid-column-gap: 52px;
          justify-content: center;
        }
      }

      @layer popup {
        .image-popup-img {
          max-width: 90%;
          max-height: 90%;
        }

        .ai-video-close,
        .image-popup-close {
          top: 10px;
          right: 10px;
        }
      }

      @layer tab {
        .button-tabs {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      @layer card {

        .sample-content,
        .ai-guide-links-container,
        .ai-tool-category {
          border: solid 1px #e5eaf1;
          border-radius: 8px;
          box-shadow: var(--shadow-sm);
        }

        .sample-answers-content,
        .recommended-preset-cards {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @layer ai-catalog {
        .search-ai-container {
          flex-direction: row;
        }
      }

      @layer glossary {
        .ai-glossary-introduction {
          margin-bottom: 24px;
        }
      }
    }
  }

  @media (width >=1024px) {

    .ai-glossary-container,
    .ai-tool-category-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}