@charset "UTF-8";

/* アコーディオン (js-accordion対応版) */
.step-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px; /* STEP間の余白 */
}
.step-details {
  background-color: #ffffff;
}

/* アコーディオンのタイトル帯（水色部分） */
.step-summary {
  background-color: #28a9e3;
  padding: 22px 48px 22px 24px; /* 右側は＋アイコン用に余白を広く */
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  transition: opacity 0.3s ease;
}
.step-summary:hover {
  opacity: 0.8;
}

/* 左側の黄色いSTEPバッジ */
.step-badge {
  background-color: #fff89b;
  color: #005999;
  padding: 6px 16px;
  border-radius: 4px;
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.step-badge__text {
  font-size: 1.0rem;
  margin-right: 4px;
  font-weight: normal;
}
.step-badge__num {
  font-size: 1.8rem;
  font-weight: normal;
}
.step-title {
    font-size: 21px;
}

/* ＋ / − アイコン（右端） */
.step-summary::before,
.step-summary::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 0;
  bottom: 0;
  margin: auto 0; 
  background-color: #ffffff;
  width: 20px;
  height: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.step-summary::after {
  transform: rotate(90deg); /* 縦線にして＋を作る */
}
/* 開いたとき（is-active）は−にする */
.step-details.is-active .step-summary::before {
  transform: rotate(180deg);
}
.step-details.is-active .step-summary::after {
  transform: rotate(180deg);
  opacity: 0;
}

/* アコーディオンの中身 */
.step-content {
  display: none; 
  padding: 32px;
  background-color: #ffffff;
  border: 1px solid #28a9e3; 
  border-top: none;
  counter-reset: step-sub-counter; /* ▼追加: 子ステップ用の自動番号カウンターを準備 */
}

/* 子ステップの小見出し */
.step-content h4 {
  font-size: 20px;
  color: #005999; /* スルガ銀行のブルーに変更 */
  margin: 24px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
  font-weight: 700;
  display: flex;
  align-items: center; /* 丸番号とテキストの縦位置を中央に揃える */
}
.step-content h4:first-of-type {
  margin-top: 0;
}

/* ▼追加: 青い丸の中に白文字の数字を自動挿入 */
.step-content h4::before {
  counter-increment: step-sub-counter; /* 番号を1ずつ増やす */
  content: counter(step-sub-counter);  /* 番号を表示 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: #005999; /* スルガ銀行の青色 */
  color: #ffffff;
  border-radius: 50%; /* 正円にする */
  font-size: 20px;
  font-family: "Source Sans Pro", "Noto Sans Japanese", sans-serif;
  margin-right: 8px; /* 丸と文字の間の余白 */
  flex-shrink: 0; /* 丸が縦長や横長に潰れないようにする */
}
.step-item {
    margin-bottom: 40px;
}
.step-image-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); /* 影の調整（X軸, Y軸, ぼかし, 色） */
}

@media screen and (max-width: 767px) {
/* アコーディオンのタイトル帯（水色部分） */
.step-summary {
  background-color: #28a9e3;
  padding: 12px 54px 12px 14px; /* 右側は＋アイコン用に余白を広く */
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  transition: opacity 0.3s ease;
}
.step-summary:hover {
  opacity: 0.8;
}

/* 左側の黄色いSTEPバッジ */
.step-badge {
  padding: 4px 6px;
  border-radius: 3px;
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.step-badge__text {
  font-size: 0.8rem;
  margin-right: 4px;
  font-weight: normal;
}
.step-badge__num {
  font-size: 1.2rem;
  font-weight: normal;
}
.step-title {
    font-size: 16px;
}

/* ＋ / − アイコン（右端） */
.step-summary::before,
.step-summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 0;
  bottom: 0;
  margin: auto 0; 
  background-color: #ffffff;
  width: 16px;
  height: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.step-summary::after {
  transform: rotate(90deg); /* 縦線にして＋を作る */
}
/* 開いたとき（is-active）は−にする */
.step-details.is-active .step-summary::before {
  transform: rotate(180deg);
}
.step-details.is-active .step-summary::after {
  transform: rotate(180deg);
  opacity: 0;
}

/* アコーディオンの中身 */
.step-content {
  display: none; 
  padding: 22px;
  background-color: #ffffff;
  border: 1px solid #28a9e3; 
  border-top: none;
  counter-reset: step-sub-counter; /* ▼追加: 子ステップ用の自動番号カウンターを準備 */
}

/* 子ステップの小見出し */
.step-content h4 {
  font-size: 16px;
  color: #005999; /* スルガ銀行のブルーに変更 */
  margin: 18px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
  font-weight: 700;
  display: flex;
  align-items: center; /* 丸番号とテキストの縦位置を中央に揃える */
}
.step-content h4:first-of-type {
  margin-top: 0;
}

/* ▼追加: 青い丸の中に白文字の数字を自動挿入 */
.step-content h4::before {
  counter-increment: step-sub-counter; /* 番号を1ずつ増やす */
  content: counter(step-sub-counter);  /* 番号を表示 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  background-color: #005999; /* スルガ銀行の青色 */
  color: #ffffff;
  border-radius: 50%; /* 正円にする */
  font-size: 16px;
  font-family: "Source Sans Pro", "Noto Sans Japanese", sans-serif;
  margin-right: 8px; /* 丸と文字の間の余白 */
  flex-shrink: 0; /* 丸が縦長や横長に潰れないようにする */
}
.step-item {
    margin-bottom: 24px;
}
.step-image-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); /* 影の調整（X軸, Y軸, ぼかし, 色） */
}
}