/* オンライン入会フォーム用スタイル */

/* ================================
   オンライン入会フォーム：ページ全体
================================ */

/* フォームページ全体のラッパー */
.member-page {
  /* 位置系 */
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto;

  /* ボックス系 */
  max-width: 960px;
  padding-top: 0;
  padding-right: 1.5rem;
  padding-bottom: 0;
  padding-left: 1.5rem;
}

/* 旧テンプレの .section をv2風の余白に合わせる */
.section {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-left: auto;

  /* ボックス系 */
  max-width: 960px;
  padding-top: 0;
  padding-right: 1.5rem;
  padding-bottom: 0;
  padding-left: 1.5rem;
}

/* Bootstrap の container 幅を制限（v2に寄せる） */
.section
.container {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  /* ボックス系 */
  max-width: 960px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* ================================
   ロゴ＋ページ見出し
================================ */

/* ロゴ＋タイトルブロック全体 */
.member-page__head {
  /* 位置系 */
  margin-top: 2rem;
  margin-right: 0;
  margin-bottom: 1.5rem;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* ロゴエリア（左上） */
.member-page__logo {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  flex-shrink: 0;
}

/* ロゴ画像 */
.member-page__logo-img {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 180px;
  height: auto;
}

/* タイトルブロック（ロゴの下） */
.member-page__title-block {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 100%;
  text-align: center;
}

/* 英語ラベル：HERO MEMBER */
.member-page__label {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.2rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;

  /* 色・装飾系 */
  color: var(--hero-orange);
}

/* 日本語タイトル：毎月の寄付をする */
.member-page__title {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0.5rem;
  margin-left: auto;

  /* ボックス系 */
  display: inline-block;
  padding-bottom: 0.35rem;

  /* タイポ系 */
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 800;

  /* 色・装飾系 */
  color: var(--hero-black);
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: var(--hero-orange);
}

/* ================================
   ステップフロー（PC）
================================ */

/* ステップ全体のラッパー */
.member-flow {
  /* 位置系 */
  margin-top: 1.5rem;
  margin-right: 0;
  margin-bottom: 2.5rem;
  margin-left: 0;

  /* ボックス系 */
  overflow-x: auto;
}

/* ステップリスト */
.member-flow__list {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
}

/* 各ステップ */
.member-flow__item {
  /* 位置系 */
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  flex: 1 1 0;
  text-align: center;
}

/* ステップ番号用の丸 */
.member-flow__step {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0.35rem;
  margin-left: auto;

  /* ボックス系 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-width: 2px;
  border-style: dashed;
  border-color: var(--hero-orange);
  border-radius: 9999px;

  /* タイポ系 */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;

  /* 色・装飾系 */
  color: var(--hero-orange);
  background-color: #ffffff;
}

/* ステップラベルテキスト */
.member-flow__text {
  /* 位置系 */
  margin-top: 0.45rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: block;

  /* タイポ系 */
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 現在ステップ（STEP1） */
.member-flow__item--current
.member-flow__step {
  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
  border-style: solid;
}

/* ステップ間の点線（丸の中央を通る） */
.member-flow__item::after {
  /* 位置系 */
  position: absolute;
  top: 36px;
  right: auto;
  bottom: auto;
  left: calc(50% + 36px);

  /* ボックス系 */
  content: "";
  height: 0;
  width: calc(100% - 72px);
  max-width: 120px;

  /* 色・装飾系 */
  border-top-width: 2px;
  border-top-style: dotted;
  border-top-color: var(--hero-orange);
}

/* 最後のステップは線を消す */
.member-flow__item:last-child::after {
  /* ボックス系 */
  content: none;
}

/* ================================
   フォーム本体レイアウト
================================ */

/* フォーム外枠のカード */
.box {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 4rem;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 3rem;
  padding-left: 2.5rem;
  border-width: 0;
  border-style: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}

/* フォームタイトル（「オンライン入会申込み」） */
.box_title {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.5rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 小見出し h3（支援者情報 / ご支援内容 用） */
#form_info
h3 {
  /* 位置系 */
  margin-top: 2.5rem;
  margin-right: 0;
  margin-bottom: 0.75rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 小見出し下のオレンジライン */
#form_info
h3::after {
  /* 位置系 */
  margin-top: 0.3rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  content: "";
  display: block;
  width: 180px;
  height: 3px;

  /* 色・装飾系 */
  background-color: var(--hero-orange);
}

/* hrは非表示（デザインに合わせて消す） */
#form_info
hr {
  /* ボックス系 */
  display: none;
}

/* ================================
   テーブル／項目レイアウト
================================ */

/* フォーム全体のテーブル */
#form_info
table {
  /* 位置系 */
  margin-top: 1.5rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1.4rem;
}

/* ラベル側のセル（左） */
#form_info
table
th {
  /* 位置系 */
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 180px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 2.1rem;
  vertical-align: top;

  /* タイポ系 */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;

  /* 色・装飾系 */
  color: var(--hero-black);
  border-width: 0;
  border-style: none;
}

/* ラベル左のオレンジバー */
#form_info
table
th::before {
  /* 位置系 */
  position: absolute;
  top: 0.2rem;
  right: auto;
  bottom: auto;
  left: 0;

  /* ボックス系 */
  content: "";
  width: 6px;
  height: 1.6rem;
  border-radius: 2px;

  /* 色・装飾系 */
  background-color: var(--hero-orange);
}

/* 必須マークの色調整（必要なら） */
#form_info
table
th.required {
  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 入力側のセル（右） */
#form_info
table
td {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  /* タイポ系 */
  font-size: 0.95rem;
  line-height: 1.7;

  /* 色・装飾系 */
  color: var(--hero-gray);
  border-width: 0;
  border-style: none;
}

/* 行の一番下にだけ少し余白 */
#form_info
table
tr:last-child
td {
  /* 位置系 */
  padding-bottom: 0.5rem;
}

/* ================================
   入力部品（input / select / textarea）
================================ */

/* テキスト系入力のベース */
#form_info
.form-control {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  margin-left: 0;

  /* ボックス系 */
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  border-radius: 4px;
  box-sizing: border-box;

  /* タイポ系 */
  font-size: 1rem;
  line-height: 1.4;

  /* 色・装飾系 */
  color: var(--hero-black);
  background-color: #ffffff;
}

/* 50%幅（姓・名など） */
#form_info
.form-50per {
  /* ボックス系 */
  width: 50%;
  max-width: 360px;
}

/* 100px幅（郵便番号・電話など） */
#form_info
.form-100px {
  /* ボックス系 */
  width: 100px;
}

/* 40px幅（誕生日の月・日など） */
#form_info
.form-40px {
  /* ボックス系 */
  width: 60px;
}

/* セレクトボックス */
#form_info
select.form-control {
  /* ボックス系 */
  padding-top: 0.45rem;
  padding-right: 2rem;
  padding-bottom: 0.45rem;
  padding-left: 0.75rem;
}

/* テキストエリア */
#form_info
textarea.form-control {
  /* ボックス系 */
  width: 100%;
  min-height: 7rem;

  /* タイポ系 */
  line-height: 1.6;
}

/* プレースホルダ文字色 */
#form_info
.form-control::placeholder {
  /* 色・装飾系 */
  color: #a2a1a1;
}

/* フォーカス時の枠線 */
#form_info
.form-control:focus {
  /* 色・装飾系 */
  outline: none;
  border-color: var(--hero-orange);
  box-shadow: 0 0 0 1px rgba(227, 96, 0, 0.15);
}

/* ================================
   ラジオ・チェックボックス
================================ */

/* メンバー種別のブロック全体 */
#form_info
.amount {
  /* 位置系 */
  margin-top: 0.25rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* ラジオ行レイアウト（縦並び） */
#form_info
.amount
.row {
  /* ボックス系 */
  display: block;
}

/* 個々の選択肢 */
#form_info
.amount
.col-xs-6 {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.35rem;
  margin-left: 0;

  /* ボックス系 */
  width: 100%;
}

/* ラベル行 */
#form_info
.amount
label {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  /* タイポ系 */
  font-size: 1rem;
  line-height: 1.4;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* ラジオボタン自体を少し大きく */
#form_info
.amount
input[type="radio"] {
  /* ボックス系 */
  width: 18px;
  height: 18px;
}

/* メルマガのチェックボックス */
#form_info
input[type="checkbox"] {
  /* ボックス系 */
  width: 18px;
  height: 18px;
  margin-top: 0;
  margin-right: 0.4rem;
  margin-bottom: 0;
  margin-left: 0;
}

/* ================================
   注意文・領収書説明・ボタン
================================ */

/* 領収書の注意文ブロック */
#form_info
.receipt {
  /* 位置系 */
  margin-top: 0.75rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* タイポ系 */
  font-size: 0.85rem;
  line-height: 1.7;

  /* 色・装飾系 */
  color: var(--hero-gray);
}

/* 「内容に間違いがないことを確認しました」行 */
#form_info
label[for="read"],
#form_info
#read + label {
  /* タイポ系 */
  font-size: 0.95rem;
}

/* 送信ボタン */
#form_info
#button_send {
  /* 位置系 */
  margin-top: 2.5rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0.9rem;
  padding-right: 2.5rem;
  padding-bottom: 0.9rem;
  padding-left: 2.5rem;
  border-width: 0;
  border-style: none;
  border-radius: 9999px;

  /* タイポ系 */
  font-size: 1rem;
  font-weight: 700;

  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
  cursor: pointer;
}

/* 送信ボタンホバー */
#form_info
#button_send:hover {
  /* 色・装飾系 */
  background-color: #ff7a26;
}

/* ================================
   スマホ専用レイアウト（入力欄拡大）
================================ */
@media (max-width: 767.98px) {

  /* フォーム全体の左右余白を少し削る */
  .member-page {
    /* ボックス系 */
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .section {
    /* ボックス系 */
    padding-right: 1rem;
    padding-left: 1rem;
  }

  /* フォームカードを画面いっぱい気味に */
  .box {
    /* ボックス系 */
    padding-top: 1.5rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
  }

  /* 見出し「基本情報を登録」などを少し大きく */
  #form_info
  h3 {
    /* タイポ系 */
    font-size: 1.3rem;
  }

  /* =========================
     項目名（th）を大きく
  ========================== */
  #form_info
  table {
    /* ボックス系 */
    border-spacing: 0 1.2rem;
  }

  #form_info
  table
  th {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /* ボックス系 */
    width: auto;
    padding-top: 0;
    padding-right: 0.5rem;
    padding-bottom: 0;
    padding-left: 1.5rem;

    /* タイポ系 */
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    font-weight: 700 !important;
  }

  #form_info
  table
  td {
    /* タイポ系 */
    font-size: 1rem;
    line-height: 1.8;
  }

  /* =========================
     入力欄（input / select / textarea）
  ========================== */

  /* 共通の入力欄サイズUP */
  #form_info
  .form-control {
    /* ボックス系 */
    width: 100% !important;
    padding-top: 0.8rem !important;
    padding-right: 1rem !important;
    padding-bottom: 0.8rem !important;
    padding-left: 1rem !important;
    height: auto !important;

    /* タイポ系 */
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
  }

  /* 50%幅指定はスマホでは全幅に */
  #form_info
  .form-50per {
    /* ボックス系 */
    width: 100% !important;
    max-width: none !important;
  }

  /* 郵便番号・電話などの小さい欄も少し大きく */
  #form_info
  .form-100px,
  #form_info
  .form-40px {
    /* ボックス系 */
    width: 110px !important;

    /* タイポ系 */
    font-size: 1.1rem !important;
  }

  /* テキストエリアも文字大きく */
  #form_info
  textarea.form-control {
    /* ボックス系 */
    min-height: 8rem;
  }

  /* プレースホルダーも見やすく */
  #form_info
  .form-control::placeholder {
    /* タイポ系 */
    font-size: 1rem;
  }

  /* =========================
     ラジオ・チェックボックス
  ========================== */

  #form_info
  .amount
  label,
  #form_info
  label {
    /* タイポ系 */
    font-size: 1.1rem !important;
  }

  #form_info
  input[type="radio"],
  #form_info
  input[type="checkbox"] {
    /* ボックス系 */
    width: 22px !important;
    height: 22px !important;
  }

  /* 「内容に間違いがないことを確認しました」行もUP */
  #form_info
  label[for="read"],
  #form_info
  #read + label {
    /* タイポ系 */
    font-size: 1.05rem !important;
  }
}


/* これは「必須マーク＋スマホ時のレイアウト調整」のコード */

/* ================================
   必須マーク（PCレイアウト）
================================ */

/* 必須ラベル付きのthにバッジを追加 */
#form_info
table
th.required {
  /* 位置系：バッジ配置のためにrelative */
  position: relative;
}

/* オレンジの「必須」バッジ（PCでは項目と入力の間） */
#form_info
table
th.required::after {
  /* 位置系 */
  position: absolute;
  top: 0.1rem;
  right: -3.1rem;           /* thの右側にはみ出させて「間」に見せる */

  /* ボックス系 */
  content: "必須";
  display: inline-block;
  padding-top: 0.1rem;
  padding-right: 0.6rem;
  padding-bottom: 0.1rem;
  padding-left: 0.6rem;
  border-radius: 2px;

  /* タイポ系 */
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 700;

  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
}

/* ================================
   スマホレイアウト：項目＋必須＋入力欄
================================ */

@media (max-width: 767.98px) {

  /* 1行ずつブロック化して「上：ラベル／下：入力欄」にする */
  #form_info
  table
  tr {
    /* ボックス系 */
    display: block;
    margin-bottom: 1.2rem;
  }

  #form_info
  table
  th,
  #form_info
  table
  td {
    /* ボックス系 */
    display: block;
    width: 100%;
  }

  /* ラベル行：左に項目名、右に必須バッジ */
  #form_info
  table
  th {
    /* ボックス系 */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0.25rem;
    padding-left: 1.5rem;

    /* タイポ系 */
    font-size: 1.1rem;
    line-height: 1.7;
  }

  /* スマホ時の必須バッジ位置をラベル右端に変更 */
  #form_info
  table
  th.required::after {
    /* 位置系 */
    top: 0;
    right: 0;
    left: auto;

    /* ボックス系 */
    margin-left: 0;
  }

  /* 入力欄は必ず1列で下に出す */
  #form_info
  .form-control {
    /* ボックス系 */
    width: 100%;
  }

  /* 「メンバーの種類」なども1列縦並びで見やすく */
  #form_info
  .amount
  .row {
    /* ボックス系 */
    display: block;
  }

  #form_info
  .amount
  .col-xs-6 {
    /* ボックス系 */
    width: 100%;
  }

}
/* これは「必須マーク位置＆SPステップ縮小」の調整コード */

/* ================================
   必須マークと入力枠の位置調整（PC）
================================ */

/* 入力セル全体を右にずらして必須バッジと被らないようにする */
#form_info
table
td {
  /* ボックス系 */
  padding-left: 3.5rem;
}

/* ================================
   スマホ：必須マーク位置＆ステップ縮小
================================ */

@media (max-width: 767.98px) {

  /* スマホでは入力セルの左余白はリセット（画面幅を有効に使う） */
  #form_info
  table
  td {
    /* ボックス系 */
    padding-left: 0;
  }

  /* 必須バッジを1文字分くらい内側へ */
  #form_info
  table
  th.required::after {
    /* 位置系 */
    right: 0.5rem;
  }

  /* ステップ全体の上下余白を少し詰める */
  .member-flow {
    /* 位置系 */
    margin-top: 1rem;
    margin-right: 0;
    margin-bottom: 1.5rem;
    margin-left: 0;
  }

  /* ステップリストの縦方向の隙間も少しだけ縮める */
  .member-flow__list {
    /* 位置系 */
    margin-top: 0.5rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
    margin-left: 0;

    /* ボックス系 */
    gap: 0.6rem 0.5rem;
  }

  /* ステップの丸を今の7割くらいのサイズに */
  .member-flow__step {
    /* ボックス系 */
    width: 50px;
    height: 50px;

    /* タイポ系 */
    font-size: 0.7rem;
  }

  /* ステップ下のテキストも少しだけ小さくして圧縮 */
  .member-flow__text {
    /* タイポ系 */
    font-size: 0.75rem;
    line-height: 1.3;
  }
}

/* ================================
   必須マーク：スマホ位置微調整
================================ */
@media (max-width: 767.98px) {
  #form_info table th.required::after {
    right: 1.7rem; /* ← さらに内側へ1文字分寄せる */
  }
}

/* ================================
   最後のボタンを中央へ
================================ */
#form_info .text-center {
  text-align: center !important;
}

#form_info #button_send {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block;
}

/* これは「領収書アコーディオンの見た目＋▼アイコン」のコード */

/* ================================
   領収書アコーディオン：トグル部
================================ */
.receipt-accordion__toggle {
  /* 位置系 */
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: block;
  width: 100%;
  padding-top: 0.75rem;
  padding-right: 0;
  padding-bottom: 0.75rem;
  padding-left: 0;
  border-width: 0;
  border-style: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dddddd;
  background-color: #ffffff;
  cursor: pointer;

  /* タイポ系 */
  font-size: 1rem;
  font-weight: 700;
  text-align: left;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* ▼アイコンを右側に表示 */
.receipt-accordion__toggle::after {
  /* 位置系 */
  position: float;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  content: "▼";
  float: right;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  /* タイポ系 */
  font-size: 0.85rem;
  line-height: 1.4;

  /* 色・装飾系 */
  color: var(--hero-orange);
}

/* 開いているときは▲っぽく見えるように回転 */
.receipt-accordion.is-open
.receipt-accordion__toggle::after {
  /* 位置系 */
  margin-top: 0;

  /* ボックス系 */
  transform: rotate(180deg);

  /* タイポ系 */
  line-height: 1.4;
}

/* ================================
   領収書アコーディオン：中身
================================ */
.receipt-accordion__content {
  /* ボックス系 */
  display: none;
  padding-top: 0.75rem;
  padding-right: 0;
  padding-bottom: 0.75rem;
  padding-left: 0;
}

.receipt-accordion.is-open
.receipt-accordion__content {
  /* ボックス系 */
  display: block;
}

/* 中のテキスト */
.receipt-accordion
.receipt {
  /* タイポ系 */
  font-size: 0.9rem;
  line-height: 1.7;

  /* 色・装飾系 */
  color: var(--hero-gray);
}


/* これは「確認ページのボタンレイアウト」のコード */

/* ================================
   入力内容確認ページ：ボタン
================================ */

/* ボタン2つの並び全体 */
.form-confirm__buttons {
  /* 位置系 */
  margin-top: 2rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* 共通ボタンスタイル（確認ページ） */
.form-confirm__btn {
  /* ボックス系 */
  padding-top: 0.8rem;
  padding-right: 1.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1.8rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 9999px;
  box-sizing: border-box;

  /* タイポ系 */
  font-size: 1rem;
  font-weight: 700;

  /* 色・装飾系 */
  cursor: pointer;
}

/* 戻るボタン（グレーアウトライン） */
.form-confirm__btn--back {
  /* 色・装飾系 */
  color: var(--hero-gray);
  background-color: #ffffff;
  border-color: #cccccc;
}

/* 進むボタン（オレンジ） */
.form-confirm__btn--primary {
  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
  border-color: var(--hero-orange);
}

/* スマホではボタンを縦並びに */
@media (max-width: 767.98px) {

  .form-confirm__buttons {
    /* ボックス系 */
    flex-direction: column;
    align-items: stretch;
  }

  .form-confirm__btn {
    /* ボックス系 */
    width: 100%;
    text-align: center;
  }
}
/* ================================
   確認ページ：入力値テキストを黒に
================================ */
#form_info table td {
  color: var(--hero-black) !important;
  font-size: 1rem;
  font-weight: 500;
}


/* ================================
   確認ページ：ボタン横並び中央寄せ
================================ */
#form_info .text-center {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}



/* ================================
   確認ページ：PCの2つのボタンの高さをそろえる
================================ */
@media (min-width: 768px) {

  /* 共通ボタンの縦サイズ＆行の高さを統一 */
  .form-confirm__btn {
    /* ボックス系 */
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    /* タイポ系 */
    line-height: 1;
  }

  /* 戻るボタン（白フチ） */
  #form_info
  .form-confirm__btn.form-confirm__btn--back {
    /* ボックス系 */
    border-width: 2px;
  }

  /* 進むボタン（オレンジ） */
  #form_info
  .form-confirm__btn.form-confirm__btn--primary {
    /* ボックス系 */
    border-width: 0;
  }
}


/* ================================
   確認ページ：PCの2つのボタンの高さをそろえる
================================ */
@media (min-width: 768px) {

  /* 共通ボタンの縦サイズ＆行の高さを統一 */
  .form-confirm__btn {
    /* ボックス系 */
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    /* タイポ系 */
    line-height: 1;
  }

  /* 戻るボタン（白フチ） */
  #form_info
  .form-confirm__btn.form-confirm__btn--back {
    /* ボックス系 */
    border-width: 2px;
  }

  /* 進むボタン（オレンジ） */
  #form_info
  .form-confirm__btn.form-confirm__btn--primary {
    /* ボックス系 */
    border-width: 0;
  }
}
.form-confirm__btn { ... }
.form-confirm__btn--back { ... }
.form-confirm__btn--primary { ... }
@media (max-width: 767.98px) { .form-confirm__buttons ... }
/* ================================
   確認ページ：2つのボタンの形を完全にそろえる
================================ */

/* 共通のボタンスタイル（戻る／進むどっちも） */
#form_info
.form-confirm__btn {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.9rem;
  padding-right: 2.5rem;
  padding-bottom: 0.9rem;
  padding-left: 2.5rem;
  border-radius: 9999px;
  box-sizing: border-box;

  /* タイポ系 */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  /* 色・装飾系 */
  cursor: pointer;
}

/* 両方とも border 幅をそろえる（高さも一致させる） */
#form_info
.form-confirm__btn--back,
#form_info
.form-confirm__btn--primary {
  /* ボックス系 */
  border-width: 2px;
  border-style: solid;
}

/* 戻るボタン：白地＋オレンジ枠 */
#form_info
.form-confirm__btn--back {
  /* 色・装飾系 */
  background-color: #ffffff;
  color: var(--hero-orange);
  border-color: var(--hero-orange);
}

/* 進むボタン：オレンジ塗りつぶし（枠も同色） */
#form_info
.form-confirm__btn--primary {
  /* 色・装飾系 */
  background-color: var(--hero-orange);
  color: #ffffff;
  border-color: var(--hero-orange);
}

/* PC：横並び・中央寄せ */
@media (min-width: 768px) {

  #form_info
  .form-confirm__buttons {
    /* 位置系 */
    margin-top: 2rem;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /* ボックス系 */
    display: flex;
    justify-content: center;
    gap: 2rem;
  }
}

/* SP：縦並びで100%幅（今まで通り） */
@media (max-width: 767.98px) {

  #form_info
  .form-confirm__buttons {
    /* ボックス系 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #form_info
  .form-confirm__btn {
    /* ボックス系 */
    width: 100%;
  }
}

    /*コンビニ決済の流れ案内*/
.member-procedure {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.member-procedure__item {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.member-procedure__step {
  color: var(--hero-orange) !important;
  font-weight: 700;
}
/* お振込先タイトルだけオレンジ＋太字 */
.bank-title {
  color: var(--hero-orange);
  font-weight: 700;
}