/* ベースのフォントやリセット（環境に合わせて調整してください） */
.custom-footer {
  --text-color: #ffffff;
  --title-color: #454343; /* Item Category などの薄い文字色 */

  position: relative;
  width: 100%;
  color: var(--text-color);
  font-family: var(--astra-source-code-pro), sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding-top: 60px;
  overflow: hidden; /* 巨大テキストのはみ出しを防ぐ */

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.6;
    }
  }

  /* --- メインコンテンツのレイアウト --- */

  @media screen and (max-width: 768px) {
    .pc {
      display: none !important;
    }
  }

  @media screen and (min-width: 768px) {
    .sp {
      display: none !important;
    }
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    /* デスクトップ用レイアウト */
    @media (min-width: 1024px) {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 60px;
      padding: 0 40px;
    }
  }

  /* 1. 幾何学アイコン */

  .site-footer__graphics {
    display: flex;
    gap: 20px;
    max-width: 320px;

    @media (min-width: 1024px) {
      margin-top: 40px; /* リンク行との高さ調整 */
    }

    .site-footer__graphics--image {
      width: 100%;
      display: block;
    }
  }

  /* 2. リンクエリア */

  .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;

    @media (min-width: 1024px) {
      flex-direction: row;
      justify-content: center;
      flex: 1;
    }

    .link-group {
      flex: 1;

      .link-title {
        color: var(--title-color);
        font-family: var(--astra-source-code-pro), sans-serif;
        font-size: 14px;
        font-weight: var(--astra-font-weight-medium);
        margin-bottom: 20px;
      }

      .link-list {
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 2;
        font-size: 16px;
        font-family: var(--astra-source-code-pro), sans-serif;

        @media screen and (max-width: 768px) {
          font-size: 14px;
        }

        &.two-cols {
          container-type: inline-size;
          display: grid;
          grid-template-columns: 1fr 1fr;
          column-gap: 20px;

          @container (width < 280px) {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }

  /* 3. コピーライト＆SNS */

  .site-footer__meta {
    display: flex;
    justify-content: space-between; /* モバイル: 左コピーライト、右SNS */
    align-items: center;
    font-family: var(--astra-source-code-pro), sans-serif;

    @media (min-width: 1024px) {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 40px;
    }

    .social-icons {
      display: flex;
      gap: 15px;
      justify-content: center;

      .icon-social {
        width: 32px;

        @media screen and (max-width: 768px) {
          width: 24px;
        }

        .svg-wrapper {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .copyright {
      font-size: 16px;
      margin: 0;
    }
  }

  .site-footer__sp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .site-footer__graphics {
      width: 130px;

      .site-footer__graphics--image {
        width: 100%;
        display: block;
      }
    }

    .social-icons {
      display: flex;
      gap: 15px;
      justify-content: center;

      .icon-social {
        width: 24px;

        .svg-wrapper {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .copyright {
      color: #CBCBCB;
      width: 100%;
    }
  }

  /* --- Back To Top ボタン --- */

  .site-footer__back-to-top {
    position: absolute;
    right: 20px;
    bottom: 250px; /* モバイル時の ASTRA テキストの上の位置 */
    z-index: 10;

    @media (min-width: 1024px) {
      right: 40px;
      bottom: 150px; /* デスクトップ時の位置 */
    }

    .btn-back-to-top {
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      border: 1px solid #4EC3E1;
      border-radius: 30px;
      font-size: 12px;
      backdrop-filter: blur(5px);
      color: #4EC3E1;
    }
  }

  /* --- 巨大テキスト (ASTRA) --- */

  .site-footer__huge-text {
    opacity: 0.4;
    margin-top: 120px;
    margin-bottom: 80px; /* ティッカー用の余白 */
    user-select: none;

    @media (min-width: 1024px) {
      margin-bottom: 60px;
    }

    .site-footer__huge-text--image {
      display: block;
      width: 100%;
    }
  }
}