/* Asia/Tokyo, 2025-10-15 11:30(UTC+09:00) - css/howtopay.css */
.pay {
  background: #fff;
  padding: 1rem 0 3rem;
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.pay-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #fff;
  border: 2px solid #bcd8ef;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.pay-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #e8f5ff;
  border-left: 6px solid var(--accent-green, #0075c9);
  padding: .6rem .8rem;
  border-radius: 12px;
}
.pay-head h3 {
  font-size: 2.1rem;
  line-height: 1.3;
  margin: 0;
}
.pay-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand, #117713);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
}

.pay-figure {
  margin: .2rem 0 .4rem;
}
.pay-figure img {
  display: block;
  width: 60%;
  height: auto;
  margin-inline: auto; /* これで左右中央寄せ */
}

.pay-text {
  margin: 0;
  line-height: 1.7;
}


@media (max-width: 900px) {
  .pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .pay-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .pay-head h3 {
    font-size: 1.9rem;
  }
}

/* CTA白枠（白ハロー）を無効化：共通のbox-shadowは保持し、ハロー成分のみ無効化 */
@media (max-width: 600px){
  .floating-cta{ --cta-halo: 0; }
}

/* =========================================================
   追加：スマホ時のみ「クレジットカード払」以降で画像右回り込み
   対象：
     - <h3 id="pay-card-title">クレジットカード払</h3> を含む .pay-card
     - <h3 id="pay-slip-title">払込票払</h3> を含む .pay-card
   仕様：
     - 画像（figure）を右にfloat
     - テキストは画像の左側に回り込み、長文は画像下へ続く
     - 既存flexのgapを、flow-root＋子要素のmarginで再現
   ========================================================= */
@media (max-width: 600px) {
  .pay-card:has(#pay-bank-title),
  .pay-card:has(#pay-card-title),
  .pay-card:has(#pay-slip-title) {
    display: flow-root; /* flex解除＋BFC */
  }
  .pay-card:has(#pay-bank-title) > * + *,
  .pay-card:has(#pay-card-title) > * + *,
  .pay-card:has(#pay-slip-title) > * + * {
    margin-top: 0.8rem;
  }

  .pay-card:has(#pay-bank-title) .pay-figure,
  .pay-card:has(#pay-card-title) .pay-figure,
  .pay-card:has(#pay-slip-title) .pay-figure {
    float: right;
    width: min(30%, 120px);
    margin: 0 0 .4rem .8rem;
  }
  .pay-card:has(#pay-bank-title) .pay-figure img,
  .pay-card:has(#pay-card-title) .pay-figure img,
  .pay-card:has(#pay-slip-title) .pay-figure img {
    width: 100%;
    height: auto;
    margin: 0;
  }
}