@charset "utf-8";

/* =============================================
 富山銀行アプリのアカウント削除のお手続きについて
 専用スタイル（クラスでスコープし、他ページに影響を与えない）
============================================= */

/* --------------------------------------
 STEP1〜3の画像の開始位置・終了位置・大きさを揃える

 【原因】
 共通CSS（css_pc/utilities.css）の .flow__list は
 grid-template-columns: repeat(9, auto); となっており、
 各STEPのカラム幅は「そのカラムに入る内容（テキストの
 折り返し具合）」に応じて自動で決まる。
 STEPごとにタイトル・説明文の文字量が異なるため
 カラム幅（＝.flow__item の幅）がSTEPごとにバラバラになり、
 その中の画像（width上限=親幅の100%）も連動して幅が変わり、
 結果として3枚の画像の大きさ・開始位置・終了位置が
 揃わなくなっていた。

 【対応】
 このページに限り、カラム幅を均等(1fr)に固定することで、
 3つの .flow__item を同じ幅にし、画像サイズと開始・終了位置を
 統一する。グリッド自体の構造（列数・矢印カラム）は
 共通CSSのまま変更しない。
--------------------------------------- */
.deleteAccountFlow .flow__list {
  grid-template-columns: 1fr auto 1fr auto 1fr;
}

.deleteAccountFlow .flow__item {
  align-items: center;
}

/* STEPタイトル＋説明文の高さを揃えて、画像の開始位置を揃える */
.deleteAccountFlow .flow__main {
  min-height: 6.6rem;
}

/* 画像はカードの幅いっぱいに統一表示し、3枚の大きさを揃える */
.deleteAccountFlow .flow__item img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .deleteAccountFlow .flow__list {
    grid-template-columns: 1fr;
  }

  .deleteAccountFlow .flow__main {
    min-height: 0;
  }
}