/* =============================================================================
   Footer Menu（フッターナビゲーション）
   Figma: node-id=56:468 / Footer Menu Button node-id=53:237
   ============================================================================= */

/* ナビゲーション */
.footer-menu {
  container-type: inline-size;
  width: 100%;
}

/* グリッド: PC = 3列 */
.footer-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   Footer Menu Button（各セル）
   ============================================================================= */

/* セル本体: 背景画像をCSS変数で受け取り、オーバーレイを重ねる */
.footer-menu__grid li {
  position: relative;
  height: 200px;
  overflow: hidden;
  font-family: var(--font-family-button);
  font-weight: bold;
  font-size: var(--text-footer-menu);
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;

  &:nth-child(1)::before {
    background-image: url('../images/footer-menu/01.jpg');
  }
  &:nth-child(2)::before {
    background-image: url('../images/footer-menu/02.jpg');
  }
  &:nth-child(3)::before {
    background-image: url('../images/footer-menu/03.jpg');  
  }
  &:nth-child(4)::before {
    background-image: url('../images/footer-menu/04.jpg');  
  }
  &:nth-child(5)::before {
    background-image: url('../images/footer-menu/05.jpg');  
  }
  &:nth-child(6)::before {
    background-image: url('../images/footer-menu/06.jpg');  
  }
}

/* 背景写真 */
.footer-menu__grid li::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease; 
}

/* 黒オーバーレイ */
.footer-menu__grid li::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: all 0.4s ease;
}

/* リンク: セル全体をクリック可能にする */
.footer-menu__grid li a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* ホバー: 写真を拡大 */
.footer-menu__grid li:hover::after {
  background-color: rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   Footer Menu（SP）
   ============================================================================= */

/* SP: 2列3行に切り替え */
@container (max-width: 640px) {
  .footer-menu__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-menu__grid li {
    height: 140px;
    white-space: normal;
  }
}