@layer media-sp {
  @media (max-width: 745px) {

    @layer base {
      :root {
        --section-container-spacing: 24px;
      }

      /* SPグローバルナビゲーション用の余白 */
      body {
        padding-bottom: 115px;
      }
    }

    @layer layout {
      .site-title {
        font-size: 1.5rem;
      }

      /* SP用グローバルナビゲーション */
      .global-nav {
        display: block;
      }

      /* SP表示の場合、上に戻るボタンを非表示 */
      .scroll-to-top {
        display: none;
      }

      @layer header {

        .ai-guide-header {
          padding-left: 8px;
          top: 0;
          transition: 0.2s ease-in-out;
        }

        .ai-guide-header-logo {
          width: 140px;
          height: 32px;
        }

        /* ヘッダーを上に引っ込める */
        .ai-guide-header.is-hidden {
          top: -60px;
        }

        .ai-guide-header-inner {
          grid-template-columns: 1fr max-content;
        }

        .ai-guide-header-menu {
          display: inline-block;
          line-height: 1;
          padding: 10px 8px;
        }

        .ai-guide-header-links {
          display: none;
        }

        /* メニューの開閉 */
        .ai-guide-header-menu-toggle:checked+.ai-guide-header-links {
          display: block;
        }

        .ai-guide-header-links {
          grid-column: 1 / 3;
          padding-bottom: 16px;
        }

        .ai-guide-header-list {
          display: grid;
          grid-auto-rows: 42px;
          grid-row-gap: 8px;
          color: #2E3542;
          font-size: 16px;
          font-weight: bold;
          line-height: 1;
          padding-top: 12px;
        }

        .ai-guide-header-item,
        .ai-guide-header-link {
          height: 100%;
        }

        .ai-guide-header-link {
          display: block;
          align-content: center;
          padding-left: 24px;
        }

        .social-links {
          justify-content: center;
          margin: 20px 0 0;
          padding-top: 26px;
        }
      }

      @layer section {
        .ai-guide-section {
          padding-block: var(--section-container-spacing);
        }

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

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

        .section-heading {
          font-size: 1.5rem;
          grid-column-gap: 12px;
        }

        .section-heading.icon-video {
          font-size: 1.4rem;
        }

        .section-heading-text {
          display: inline-block;
        }

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

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

        /* ニュースの見出しだけ左寄せにする */
        .section-heading.icon-news {
          text-align: left;
        }

        .icon-video::before,
        .icon-news::before {
          align-self: start;
        }

        .icon-video::before {
          width: 36px;
          height: 36px;
        }

        .icon-news::before {
          background-position-y: 6px;
          width: 42px;
          height: 42px;
        }
      }
    }

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

        .announcement-title {
          text-wrap: auto;
        }
      }

      @layer video {
        .ai-guide-section-video {
          padding-left: 12px;
          padding-right: 12px;
        }

        .ai-video-list {
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 8px;
        }

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

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

      @layer manual {
        .ai-guide-section-manual {
          padding-left: 0;
          padding-right: 0;
        }

        .manual-service-tab-list {
          grid-template-columns: 1fr;
          grid-row-gap: 24px;
          padding: 0 45px 16px;
        }

        .manual-service-tab-button {
          font-size: 16px;
        }

        .manual-tab-content-footer {
          margin-top: var(--section-container-spacing);
        }

        /* PC用のタブコンテンツを非表示 */
        .manual-tab-list,
        .manual-tab-content {
          display: none;
        }
      }

      @layer popup {
        .image-popup-container {
          align-items: start;
          justify-content: start;
          overflow: scroll;
          padding: 60px 20px;
        }

        /* SPの場合、ポップアップ画像は実寸大で表示してスクロールさせる */
        .image-popup-img {
          max-width: initial;
        }

        /* ポップアップ共通 */
        .ai-video-close,
        .image-popup-close {
          top: 5px;
          right: 5px;
        }
      }

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

      @layer tab {
        .button-tabs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          padding-inline: 12px;
        }
      }

      @layer sample-answer {
        .sample-content {
          border-top: solid 1px #e5eaf1;
        }
      }

      @layer recommended-preset {
        .recommended-presets-tab-content {
          padding-inline: 12px;
        }
      }

      @layer ai-catalog {
        .search-ai-container {
          padding-inline: 12px;
        }

        .ai-catalog-table {
          min-width: 900px;
        }

        .ai-catalog-last-update {
          padding-right: 12px;
        }
      }

      @layer glossary {
        .ai-glossary-introduction {
          padding-inline: 12px;
          margin-bottom: 12px;
        }

        .ai-glossary-container {
          margin-inline: 12px;
        }

        .ai-glossary-container {
          max-height: 500px;
          overflow-y: scroll;
        }
      }

      @layer link-list {
        .ai-guide-links-container {
          padding-inline: 12px;
        }

        .ai-link-list {
          grid-auto-rows: auto;
          grid-row-gap: 16px;
        }

        .ai-link-item {
          grid-template-columns: 1fr 32px;
          /* 2列に変更 */
          grid-template-rows: auto;
          grid-column-gap: 0;
          grid-row-gap: 8px;
        }

        .ai-link-head,
        .ai-link-organization {
          /* 2列にまたがる */
          grid-column: 1 / 3;

        }

        .ai-link-description {
          /* 1列目に配置 */
          grid-column: 1 / 2;
        }
      }

      @layer tool-category {
        .ai-tool-category {
          border-top: solid 1px #e5eaf1;
          padding: 24px 12px 0;
        }
      }
    }
  }
}