/* ベースのフォントやリセット（環境に合わせて調整してください） */
.custom-footer {
  --text-color: #ffffff;
  /* Item Category / Customer Care の見出し色。
   * #454343 は黒地に対して約 2.1:1 しかなく読みづらかったため明るくした。
   * #8C8C8C は入力欄のプレースホルダでも使っている色で、黒地に約 6.2:1。 */
  --title-color: #8c8c8c;

  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;
    }
  }

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

  /* PC 版と SP 版の切り替え。境界を 768px と 768px で書くと、
   * ちょうど 768px のときに両方のメディアクエリが当たって
   * SNS アイコンもコピーライトも消えていた。片側を 767.98px にして塞ぐ。 */
  @media screen and (max-width: 767.98px) {
    .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;
      /* 60px だとメニュー欄に回る幅が足りず、1024〜1300px あたりで
       * 項目が細かく折り返していたので詰めている。 */
      gap: 40px;
      padding: 0 40px;
    }
  }

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

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

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

      /* 320px 固定だと、横並びになった直後（1024px 前後）に
       * メニュー欄の取り分が 150px ほどしか残らず項目がちぎれていた。
       * 装飾なので画面幅に応じて縮ませ、メニューの幅を優先する。 */
      width: clamp(160px, 20vw, 320px);
    }

    .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;

      /* 見出しが目立たず、リンクの塊の切れ目が分かりづらかったので
       * 文字を 15% 大きく（14px → 16.1px）し、太字にして色も明るくしている
       * （色は --title-color 側）。 */
      .link-title {
        color: var(--title-color);
        font-family: var(--astra-source-code-pro), sans-serif;
        font-size: 16.1px;
        font-weight: var(--astra-font-weight-bold);
        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;

        /* 「ASTRA POD Nicotine3％」のような長い項目名が増えても
         * 列からはみ出さないようにする保険。break-word は min-content の
         * 計算を変えないので、下の 2 列レイアウトの幅計算には影響しない。 */
        overflow-wrap: break-word;

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

        /* 2 列。ここで container-type: inline-size を使っていたが、
         * 1) コンテナクエリは自分自身を参照できないので @container が発火せず、
         * 2) inline-size の containment で自身の最小幅が 0 扱いになり、
         * flex の親から限界まで潰されて列同士が重なっていた。
         * 幅の判断は結局ビューポート依存なのでメディアクエリで書く。 */
        &.two-cols {
          display: grid;
          grid-template-columns: 1fr 1fr;
          column-gap: 20px;

          /* 横並びレイアウト（グラフィック｜メニュー｜SNS）に切り替わってから
           * 1400px までは、メニュー欄が 2 列を置ける幅に届かない。1 列にする。 */
          @media (min-width: 1024px) and (max-width: 1399.98px) {
            grid-template-columns: 1fr;
          }

          /* 375px 未満（360px の Android など）は 1 列 140px ほどしか取れず、
           * 「プライバシーポリシー」あたりが軒並み 2 行になるので縦一列へ。 */
          @media (max-width: 374.98px) {
            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;
        }

        &.icon-x svg {
          /* X アイコンのサイズ微調整（Instagram と見た目の大きさを揃える） */
          transform: scale(1.1);
        }
      }
    }

    .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;
        }

        &.icon-x svg {
          /* X アイコンのサイズ微調整（Instagram と見た目の大きさを揃える） */
          transform: scale(1.1);
        }
      }
    }

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

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

  .site-footer__back-to-top {
    position: absolute;
    right: 20px;
    bottom: 250px; /* モバイル時の ASTRA テキストの上の位置 */
    /* .custom-footer は position: relative だが z-index を持たないので
     * 独自のスタッキングコンテキストを作らない。ここで 10 を指定すると
     * SP ドロワー (.mobile-drawer, z-index: 9) より前面に出てしまうため、
     * 巨大テキストより上・ドロワーより下になる 2 に下げる。 */
    z-index: 2;

    @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: 14px;
      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%;
    }
  }
}