/* components/footer.css — グローバルフッター（Figma: SiteFooter 17:3714）
   イエロー地。左=ロゴ＋事業名、右=SNS行＋リンク3列、下=コピーライト（茶帯なし）。 */

.c-footer {
  position: relative;
  /* Figma: 背景色_イエロー地のクレヨン紙テクスチャ（テクスチャ付きの黄色／346.8×327.8px タイル）。
     上端の footer-wave も同じ黄色テクスチャなので継ぎ目なく繋がる。 */
  background-color: var(--color-bg-yellow);
  background-image: url("../../images/common/tex-yellow-deep.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  color: var(--color-brown-text);
  padding: var(--space-80) 0 var(--space-24);
}
/* フッター上端の区切りウェーブ（Figma 76:18922）。イエローの波形がページ側へ
   上にはみ出す。透過部から上のセクションの地色が見え、下端の黄色が footer 地と連続する。 */
.c-footer__wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.c-footer__inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: 0 var(--space-24);
  display: flex;
  justify-content: space-between;
  gap: var(--space-48);
  flex-wrap: wrap;
}

/* 左：ロゴ＋事業名 */
.c-footer__brand-name {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown);
  margin: 0;
}
.c-footer__logo { display: block; width: 184px; height: auto; margin-top: var(--space-16); }

/* 右：SNS行＋リンク列（リンク3列ブロックの左端に揃える） */
.c-footer__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-64);
}
.c-footer__social {
  display: flex;
  gap: var(--space-40);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-footer__social a { display: inline-flex; align-items: center; justify-content: center; }
.c-footer__social img { display: block; width: 40px; height: 40px; object-fit: contain; }

.c-footer__cols { display: flex; gap: var(--space-80); }
.c-footer__col h2 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-black);
  color: var(--color-brown-text);
  margin: 0 0 var(--space-12);
}
.c-footer__col ul { list-style: none; margin: 0; padding: 0 0 0 var(--space-16); display: grid; gap: var(--space-8); }
.c-footer__col a {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown-text);
  text-decoration: none;
}
/* Figma: 各リンクに「ー」のダッシュ接頭辞（長音記号＋スペース） */
.c-footer__col a::before { content: "ー\00a0\00a0"; }
.c-footer__col a:hover { text-decoration: underline; }

/* コピーライト（茶帯なし・右寄せ） */
.c-footer__copyright {
  max-width: var(--layout-max);
  margin: var(--space-40) auto 0;
  padding: 0 var(--space-24);
  text-align: center;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown);
}

/* ===== SP（Figma 76:15964）====================================================
   1カラム。順序＝リンク群 → SNS(中央) → ロゴ(中央) → コピーライト(中央)。
   リンクは縦リスト（ー接頭辞）ではなく、横並び折り返し＋縦バー区切りにする。 */
@media (max-width: 768px) {
  .c-footer { padding-top: var(--space-40); }
  .c-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);             /* body gap-40（メニュー↔ロゴ）*/
    padding-inline: var(--space-24);  /* menu px-24 */
  }
  /* 順序の入れ替え：メニュー→ロゴ */
  .c-footer__menu  { order: 1; gap: var(--space-64); align-items: stretch; width: 100%; }
  .c-footer__brand { order: 2; align-items: center; text-align: center; }

  /* メニュー内：リンク群（上）→ SNS（下・中央） */
  .c-footer__cols   { order: 1; flex-direction: column; gap: var(--space-40); flex-wrap: nowrap; }
  .c-footer__social { order: 2; justify-content: center; width: 100%; gap: var(--space-40); }

  /* リンクを横並び折り返し＋縦バー区切りに */
  .c-footer__col ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-12);
    column-gap: var(--space-16);
    padding-left: 0;
  }
  .c-footer__col li { display: inline-flex; align-items: center; }
  .c-footer__col a::before { content: none; }   /* SPはー接頭辞なし */
  .c-footer__col li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 16px;
    margin-left: var(--space-16);
    background: var(--color-brown-text);
  }

  /* ロゴ（フルカラー版）を中央に。事業名テキストはロゴ画像に内包されるため非表示 */
  .c-footer__brand-name { display: none; }
  .c-footer__logo { width: 120px; margin: 0 auto; }

  .c-footer__copyright { text-align: center; }
}