/* 2025-08-30 18:12(UTC+09:00) */
/* === payments.css  ============================================= */

/* 1. 変数 */
:root { --payment-icon-size: 250px; }

/* 2. レイアウト */
.payment-item {
  display: flex; flex-direction: column; /* SP：縦並び */
  gap: 0; margin: 2.4rem 0;
}
/* PC：768px 以上（769→768 に統一） */
@media (min-width: 768px) {
  .payment-item { flex-direction: row; align-items: flex-start; gap: 1rem; }
}

/* 3. アイコンブロック */
.payment-icon {
  flex: 0 0 var(--payment-icon-size); width: var(--payment-icon-size);
  display: flex; justify-content: center; align-items: center;
  margin: 0 auto; padding: 0; /* SP は中央寄せ＆内側余白なし */
}
@media (min-width: 768px) {
  .payment-icon { order: 2; margin: 0 0 0 1.6rem; padding: 1rem; }
}

/* 4. 画像 */
.payment-icon img { width: 100%; height: auto; object-fit: contain; display: block; pointer-events: none; }

/* 5. テキスト */
.payment-text { flex: 1 1 0%; }
.payment-text h3 { font-size: 2rem; margin: 0 0 0.8rem; color: #0057a4; }

/* 6. 箇条書き */
.payment-list { list-style: disc outside; margin: 0.6rem 0 0 1.6rem; padding: 0; }

/* 7. ラベル */
.card-label, .pay-place-label { font-weight: 700; margin: 1.2rem 0 0.4rem; }
.card-brands { margin: 0 0 1.2rem; }

/* 8. SP時：アイコンをテキストの下に（800→767へ整理） */
@media (max-width: 767px) {
  .payment-text { order: 1; }
  .payment-icon { order: 2; flex: 0 0 auto; align-items: flex-start; }
  .payment-icon img { object-position: top center; margin-top: 2rem; }
}