/* 親要素：2分割を中央に配置 */
.pension-flex-row {
  display: flex;
  gap: 30px; /* カード間の適度な距離 */
  max-width: 1000px; /* 全体の横幅を広げすぎず、視線が散らない程度に */
  margin: 40px auto;
  justify-content: center;
  padding: 0 20px; /* スマホ時の画面端の余白確保 */
}

/* カード共通設定 */
.pension-card-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #c8d1e0;
  background-color: #fff;
  text-decoration: none;
  color: #333;
  padding: 40px; /* 文字を大きく見せるための広い余白 */
  min-height: 350px;
}
/* タイトルと本文のサイズアップ */
.pension-card-box h3 {
  font-size: 1.6rem; /* 大きく設定 */
  font-weight: bold;
  color: #2b4b91;
  margin-bottom: 20px;
  border-bottom: 2px solid #2b4b91;
  padding-bottom: 10px;
}

/* ホバー時に「押せる」感覚を出す */
.pension-card-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  border-color: #2b4b91;
}

/* タイトル部分：文字を大きく、青く */
.pension-card-box h3 {
  font-size: 150%;
  color: #2b4b91;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 矢印アイコン */
.pension-card-box h3::after {
  content: " \203A"; /* ＞ の記号 */
  font-size: 1.8rem;
  color: #f39800; /* 福銀様のオレンジを差し色に */
}

/* ターゲット説明（新規/既存） */
.target-info {
  display: block;
  font-weight: bold;
  color: #2b4b91;
  border-bottom: 1px solid #eef2f9;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* 本文テキスト */
.pension-card-box p {
  line-height: 1.7;
  margin: 0;
}

/* 重要なお知らせの強調（右側用） */
.urgent-notice {
  margin-top: 15px;
  padding: 5px;
  color: #d32f2f;
  font-weight: bold;
}

/* --- 【重要】スマホ・タブレット時の設定 --- */
@media screen and (max-width: 768px) {
  .pension-flex-row {
    flex-direction: column; /* 横並びから「縦並び」に変更 */
    gap: 20px; /* 上下のカードの間隔 */
  }

  .pension-card-box {
    min-height: auto; /* スマホでは高さ固定を解除 */
    padding: 25px;   /* スマホに合わせて余白を調整 */
  }

  .pension-card-box h3 {
    font-size: 1.4rem; /* スマホ画面に合わせて少し微調整 */
  }
}