/* =========================================================
   Payment Guide（支払い方法のご案内）
   ※ 共通 .asc-card は変更しない
   ========================================================= */

/* =========================================================
   Hero（見出し）
   ========================================================= */
.pay-guide__hero {
  margin-bottom: 20px;
}

.pay-guide__title {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
}

.pay-guide__lead {
  margin: 0;
  color: #555;
  line-height: 1.9;
}

/* =========================================================
   Grid
   ========================================================= */
.pay-guide__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 18px;
}

/* =========================================================
   pay-item：ブロック全体に背景画像を適用（全面）
   レイヤ構造：
   ① 背景白
   ② 背景画像（全面 / contain）
   ③ 薄い白フィルター（可読性）
   ④ テキスト
   ========================================================= */
.pay-item {
  position: relative;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  overflow: hidden;
}

/* ② 背景画像：ブロック全体へ */
.pay-item::before {
  content: "";
  position: absolute;
  inset: 12px;

  background-repeat: no-repeat;
  background-position: center;  /* 右上固定しない */
  background-size: contain;     /* ブロック内に収める */

  opacity: .3;                 /* うっすら */
  filter: grayscale(1);        /* 主張抑える */
  pointer-events: none;
  z-index: 0;
}

/* ③ フィルター（白を薄く） */
.pay-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .70); /* 文字が読める最低限 */
  pointer-events: none;
  z-index: 1;
}

/* ④ テキスト */
.pay-item__body {
  position: relative;
  z-index: 2;
  padding-right: 0; /* 全面背景なので、右余白は不要（左寄りが解消） */
}

.pay-item__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.pay-item__text {
  margin: 0 0 14px;
  color: #333;
  line-height: 2.0;
}

.pay-item__note {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}

/* =========================================================
   Buttons：サイズ統一・矢印段差解消・色統一
   ========================================================= */

/* ボタン位置 */
.pay-item__actions {
  margin-top: 12px;
}

/* ボタン本体 */
.pay-btn {
  /* サイズ統一 */
  width: 100%;
  max-width: 260px;            /* PCで長すぎない上限（不要なら削除） */
  min-height: 52px;
  padding: 0 18px;

  /* レイアウト */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* 見た目（色統一） */
  background: var(--vk-color-primary, #c00);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .15);

  /* タイポ */
  font-weight: 800;
  line-height: 1;
  text-decoration: none;

  /* 矢印を絶対配置するため */
  position: relative;

  /* 操作感 */
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* 既存の primary/accent 指定は無効化（色統一のため） */
.pay-btn--primary,
.pay-btn--accent {
  background: var(--vk-color-primary, #c00);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
}

/* hover / focus / active でも文字色を固定（テーマの a:hover 対策） */
.pay-btn:hover,
.pay-btn:focus,
.pay-btn:active {
  color: #fff;
  text-decoration: none;
}

/* hover/active */
.pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0, 0, 0, .22);
}

.pay-btn:active {
  transform: translateY(0);
  opacity: .92;
}

/* 矢印：縦中央に固定（フォント差を無効化） */
.pay-btn__arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  line-height: 1;
  font-size: 18px;
}

/* =========================================================
   背景画像の割当
   ========================================================= */
.pay-item--bank::before {
  background-image: url("https://asa-test2.asc-developers.blog/wp-content/uploads/2026/01/payment-bank-01.png");
}

.pay-item--credit::before {
  background-image: url("https://asa-test2.asc-developers.blog/wp-content/uploads/2026/01/payment-credit-01.png");
}

.pay-item--conveni::before {
  background-image: url("https://asa-test2.asc-developers.blog/wp-content/uploads/2026/01/payment-convenience-01.png");
}

.pay-item--postal::before {
  background-image: url("https://asa-test2.asc-developers.blog/wp-content/uploads/2026/01/payment-request-01.png");
}

/* =========================================================
   Footer
   ========================================================= */
.pay-guide__footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, .18);
}

.pay-guide__footnote {
  margin: 0;
  color: #555;
  line-height: 1.9;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
  .pay-guide__grid {
    grid-template-columns: 1fr;
  }

  .pay-item::before {
    opacity: .16;
  }

  .pay-btn {
    max-width: none; /* フル幅 */
    width: 100%;
  }
}

/* =========================================================
   Desktop：ボタンの配置高さを統一
   ========================================================= */
@media (min-width: 769px){

  /* 2カラムの各カードを同じ高さにする */
  .pay-guide__grid{
    align-items: stretch;
  }

  /* カード内を縦フレックスにして、下に押し下げ可能にする */
  .pay-item{
    display: flex;
  }

  .pay-item__body{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ボタンを下側に固定 */
  .pay-item__actions{
    margin-top: auto;
  }

  /* 注釈があるカードも含めて見た目を揃える（任意） */
  .pay-item__note{
    margin-top: 10px;
  }
}