/* 親コンテナ：横並び（スマホでは縦並び）の設定 */
.footer-app-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* バッジ同士の間隔（ガイドラインの余白確保） */
  padding: 20px;
  text-align: center;
  font-family: sans-serif;
}

.app-link-item a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333; /* 文字色 */
  transition: opacity 0.2s;
}

.app-link-item a:hover {
  opacity: 0.8;
}

/* バッジの高さ調整の肝 */
.app-link-item img {
  display: block;
  width: auto;
}

/* App Storeバッジ：標準の高さを40pxに設定 */
.badge-apple {
  height: 40px;
}

/* Google Playバッジ：
   透明な余白分を考慮して、Appleより少し大きく（46px前後）設定することで
   黒い枠の部分がAppleの40pxと視覚的に揃います */
.badge-google {
  height: 56px; /* 透明枠を含めた全体の高さ */
  margin-top: -8px; /* 透明枠による上下のズレを微調整 */
  margin-bottom: -8px;
}

.app-link-item p {
  margin-top: 8px;
  font-size: 12px;
  font-weight: bold;
}

/* スマホ表示の調整 */
@media (max-width: 480px) {
  .footer-app-links {
    flex-direction: column;
    gap: 20px;
  }
}