@charset "UTF-8";
/* ==========================================================================
   support.css
   サポーター募集・ご寄付関連ページ（/support/ 配下テンプレート）の専用スタイル
   および WP Simple Pay Pro（WSPP）フォームのカスタマイズ用

   対象ページ:
     - /supporters/          橋本幹彦サポーター募集（案内＋申込フォーム一体）
     - /supporters-thankyou/ 申し込みありがとうございました
     - /donate/              ご寄付のお願い（案内＋寄付フォーム一体）
     - /donate-thankyou/     ご寄付ありがとうございました

   既存の style.css には一切手を入れず、このファイルで完結させる。
   ========================================================================== */


/* ==========================================================================
   共通スタイル（.donate-page / .supporters-page 共用）
   ========================================================================== */

/* リードセクション ---------------------------------------------------------- */
.donate-page .lead,
.supporters-page .lead {
  padding: 0 0 100px;
}
.donate-page .lead .merit,
.supporters-page .lead .merit {
  max-width: 860px;
  margin: 60px auto 0;
  padding: 32px 48px;
  border: 1px solid #003F88;
}
.donate-page .lead .merit ol,
.supporters-page .lead .merit ol {
  margin: 0;
  padding: 0 0 0 1.5em;
  list-style: decimal;
}
.donate-page .lead .merit ol li,
.supporters-page .lead .merit ol li {
  padding: 6px 0;
  font-size: 18px;
  line-height: 1.7;
  color: #003F88;
  font-weight: 700;
}
.donate-page .lead .appeal,
.supporters-page .lead .appeal {
  margin: 50px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.7;
}

@media (max-width: 769px) {
  .donate-page .lead,
  .supporters-page .lead {
    padding: 0 0 50px;
  }
  .donate-page .lead .merit,
  .supporters-page .lead .merit {
    margin-top: 40px;
    padding: 20px 24px;
  }
  .donate-page .lead .merit ol li,
  .supporters-page .lead .merit ol li {
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.6;
  }
  .donate-page .lead .appeal,
  .supporters-page .lead .appeal {
    margin-top: 30px;
    font-size: 15px;
  }
}

/* ご確認事項セクション ------------------------------------------------------ */
.donate-page .confirm,
.supporters-page .confirm {
  padding: 100px 0;
  background-color: #DFEBF5;
}
.donate-page .confirm .box,
.supporters-page .confirm .box {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 56px;
  background-color: #fff;
}
.donate-page .confirm .box + .box,
.supporters-page .confirm .box + .box {
  margin-top: 32px;
}
.donate-page .confirm .box-title,
.supporters-page .confirm .box-title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #003F88;
}
.donate-page .confirm .note-list + .box-title,
.supporters-page .confirm .note-list + .box-title {
  margin-top: 28px;
}
.donate-page .confirm .note-list,
.supporters-page .confirm .note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.donate-page .confirm .note-list > li,
.supporters-page .confirm .note-list > li {
  position: relative;
  padding-left: 1.5em;
  font-size: 16px;
  line-height: 1.8;
}
.donate-page .confirm .note-list > li + li,
.supporters-page .confirm .note-list > li + li {
  margin-top: 14px;
}
.donate-page .confirm .note-list > li::before,
.supporters-page .confirm .note-list > li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: #003F88;
  font-weight: 700;
}
.donate-page .confirm .note-list .sub-list,
.supporters-page .confirm .note-list .sub-list {
  margin: 10px 0 0 1.2em;
  padding: 0;
  list-style: decimal;
}
.donate-page .confirm .note-list .sub-list li,
.supporters-page .confirm .note-list .sub-list li {
  padding: 2px 0;
  font-size: 15px;
  line-height: 1.7;
}
.donate-page .confirm .caution,
.supporters-page .confirm .caution {
  color: #d9534f;
}

@media (max-width: 769px) {
  .donate-page .confirm,
  .supporters-page .confirm {
    padding: 50px 0;
  }
  .donate-page .confirm .box,
  .supporters-page .confirm .box {
    padding: 28px 20px;
  }
  .donate-page .confirm .box + .box,
  .supporters-page .confirm .box + .box {
    margin-top: 20px;
  }
  .donate-page .confirm .box-title,
  .supporters-page .confirm .box-title {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .donate-page .confirm .note-list + .box-title,
  .supporters-page .confirm .note-list + .box-title {
    margin-top: 20px;
  }
  .donate-page .confirm .note-list > li,
  .supporters-page .confirm .note-list > li {
    font-size: 14px;
    line-height: 1.7;
  }
  .donate-page .confirm .note-list .sub-list li,
  .supporters-page .confirm .note-list .sub-list li {
    font-size: 13px;
  }
}

/* CTAセクション ------------------------------------------------------------- */
.donate-page .cta,
.supporters-page .cta {
  padding: 100px 0 120px;
}
.donate-page .cta .cta-note,
.supporters-page .cta .cta-note {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.donate-page .cta .cta-note > li,
.supporters-page .cta .cta-note > li {
  position: relative;
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.8;
}
.donate-page .cta .cta-note > li + li,
.supporters-page .cta .cta-note > li + li {
  margin-top: 16px;
}
.donate-page .cta .cta-note > li::before,
.supporters-page .cta .cta-note > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #003F88;
}
.donate-page .cta .cta-note a,
.supporters-page .cta .cta-note a {
  color: #003F88;
  text-decoration: underline;
  transition: opacity 0.3s ease;
}
.donate-page .cta .cta-note a:hover,
.supporters-page .cta .cta-note a:hover {
  opacity: 0.7;
}
.donate-page .cta .payment-icons,
.supporters-page .cta .payment-icons {
  margin: 16px 0 0;
  text-align: center;
}
.donate-page .cta .payment-icons img,
.supporters-page .cta .payment-icons img {
  display: inline-block;
  max-width: 50%;
  height: auto;
}
.donate-page .cta .wpsp-form,
.supporters-page .cta .wpsp-form {
  max-width: 900px;
  margin: 60px auto 0;
  padding: 48px 56px;
  background-color: #dfebf5;
}

@media (max-width: 769px) {
  .donate-page .cta,
  .supporters-page .cta {
    padding: 50px 0 80px;
  }
  .donate-page .cta .cta-note > li,
  .supporters-page .cta .cta-note > li {
    font-size: 14px;
    line-height: 1.7;
  }
  .donate-page .cta .cta-note > li + li,
  .supporters-page .cta .cta-note > li + li {
    margin-top: 12px;
  }
  .donate-page .cta .payment-icons,
  .supporters-page .cta .payment-icons {
    margin-top: 12px;
  }
  .donate-page .cta .payment-icons img,
  .supporters-page .cta .payment-icons img {
    width: 100%;
    max-width: 100%;
  }
  .donate-page .cta .wpsp-form,
  .supporters-page .cta .wpsp-form {
    margin-top: 40px;
    padding: 28px 20px;
  }
}

/* ==========================================================================
   WSPP（WP Simple Pay Pro）フォームのカスタマイズ
   .wpsp-form 内にプラグインが生成するマークアップへの上書き
   ========================================================================== */

/* フォームタイトル（h3「橋本幹彦サポーター」等）を非表示 */
.wpsp-form .simpay-form-title {
  display: none;
}

/* フォーム外枠：横幅100%、背景は外側ラッパー（#dfebf5）に揃える */
.wpsp-form .simpay-form-wrap,
.wpsp-form .simpay-form-wrap.simpay-embedded-form-wrap,
.wpsp-form .simpay-checkout-form,
.wpsp-form .simpay-checkout-form.simpay-checkout-form--embedded {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 0 !important;
}

/* フォント・ウェイトをサイト標準に
   （プラグインCSSが後勝ちするため !important で上書き） */
.wpsp-form,
.wpsp-form *,
.wpsp-form input,
.wpsp-form select,
.wpsp-form textarea,
.wpsp-form button,
.wpsp-form label,
.wpsp-form legend {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 500 !important;
}
/* 太字指定はラベル・見出し等で維持 */
.wpsp-form .simpay-label-wrap label,
.wpsp-form .simpay-label-wrap legend,
.wpsp-form .simpay-btn.simpay-checkout-btn,
.wpsp-form .simpay-btn.simpay-checkout-btn span,
.wpsp-form .simpay-total-amount-container p,
.wpsp-form .simpay-test-mode-badge {
  font-weight: 700 !important;
}

/* 送信ボタンをサイト標準ボタン（.thankyou-btn相当）に
   （プラグインCSSが強い背景・色指定を持つため !important で上書き） */
.wpsp-form .simpay-btn.simpay-checkout-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center !important;
  width: calc(50% + 30px) !important;
  height: 65px !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
  border: solid 3px #003F88 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #003F88 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wpsp-form .simpay-btn.simpay-checkout-btn:hover:not(:disabled) {
  background-color: #003F88 !important;
  color: #fff !important;
  opacity: 1;
}
.wpsp-form .simpay-btn.simpay-checkout-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wpsp-form .simpay-btn.simpay-checkout-btn span {
  display: inline-block;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

@media (max-width: 769px) {
  .wpsp-form .simpay-btn.simpay-checkout-btn {
    width: 100% !important;
    height: 50px !important;
    margin-top: 24px !important;
    border-width: 2px !important;
    font-size: 16px !important;
  }
}

/* 各フィールド（.simpay-form-control）の間隔 */
.wpsp-form .simpay-form-control {
  margin: 0 0 24px;
  padding: 0;
}
@media (max-width: 769px) {
  .wpsp-form .simpay-form-control {
    margin-bottom: 20px;
  }
}

/* ラベル・legend --------------------------------------------------------- */
.wpsp-form .simpay-label-wrap {
  margin: 0 0 8px;
}
.wpsp-form .simpay-label-wrap label,
.wpsp-form .simpay-label-wrap legend {
  display: block;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: #003F88;
  line-height: 1.5;
}
.wpsp-form .simpay-optional-indicator {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #888;
}
@media (max-width: 769px) {
  .wpsp-form .simpay-label-wrap label,
  .wpsp-form .simpay-label-wrap legend {
    font-size: 15px;
  }
  .wpsp-form .simpay-optional-indicator {
    font-size: 12px;
  }
}

/* 入力欄（text / email / tel / number / date / select） ----------------- */
.wpsp-form .simpay-field-wrap input[type="text"],
.wpsp-form .simpay-field-wrap input[type="email"],
.wpsp-form .simpay-field-wrap input[type="tel"],
.wpsp-form .simpay-field-wrap input[type="number"],
.wpsp-form .simpay-field-wrap input[type="date"],
.wpsp-form .simpay-field-wrap select,
.wpsp-form .simpay-field-wrap .simpay-date-input {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px;
  padding: 10px 14px;
  border: 1px solid #b0bfd0;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
/* select は appearance:none だと矢印が消えるので復活 */
.wpsp-form .simpay-field-wrap select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23003F88' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px auto;
  padding-right: 36px;
}
/* flatpickrが動的に付与するインラインstyleを抑止 */
.wpsp-form .simpay-field-wrap input.simpay-date-input,
.wpsp-form .simpay-date-wrap input.simpay-date-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}
.wpsp-form .simpay-field-wrap input[type="text"]:focus,
.wpsp-form .simpay-field-wrap input[type="email"]:focus,
.wpsp-form .simpay-field-wrap input[type="tel"]:focus,
.wpsp-form .simpay-field-wrap input[type="number"]:focus,
.wpsp-form .simpay-field-wrap input[type="date"]:focus,
.wpsp-form .simpay-field-wrap select:focus,
.wpsp-form .simpay-field-wrap .simpay-date-input:focus {
  border-color: #003F88;
  outline: none;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 63, 136, 0.15);
          box-shadow: 0 0 0 2px rgba(0, 63, 136, 0.15);
}
.wpsp-form .simpay-field-wrap input::-webkit-input-placeholder { color: #aaa; }
.wpsp-form .simpay-field-wrap input::-moz-placeholder { color: #aaa; }
.wpsp-form .simpay-field-wrap input:-ms-input-placeholder { color: #aaa; }
.wpsp-form .simpay-field-wrap input::placeholder { color: #aaa; }

/* textarea（備考・確認事項などの自由記述欄） */
.wpsp-form .simpay-field-wrap textarea,
.wpsp-form textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  padding: 10px 14px;
  border: 1px solid #b0bfd0;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.wpsp-form .simpay-field-wrap textarea:focus,
.wpsp-form textarea:focus {
  border-color: #003F88;
  outline: none;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 63, 136, 0.15);
          box-shadow: 0 0 0 2px rgba(0, 63, 136, 0.15);
}

/* 国際電話入力（intl-tel-input）の枠を他inputと揃える */
.wpsp-form .iti--allow-dropdown {
  width: 100%;
}
.wpsp-form .iti--allow-dropdown input[type="tel"] {
  padding-left: 52px;
}

/* カード入力エリア（Stripe Payment Element ラッパー）の周辺余白
   iframe内はStripe側の管理なので触らず、外側の余白のみ整える */
.wpsp-form .simpay-card-container {
  margin-top: 8px;
}
.wpsp-form .simpay-card-container + .simpay-payment-method-error {
  margin-top: 8px;
}

/* セクション間の区切り感：カード入力のちょい手前に余白 */
.wpsp-form .simpay-form-control.simpay-form-control--card {
  margin-top: 24px;
}

/* チェックボックス（同意・確認チェック） ------------------------------- */
.wpsp-form .simpay-checkbox-container {
  margin-bottom: 20px;
}
.wpsp-form .simpay-checkbox-container > .simpay-checkbox-label.simpay-label-wrap {
  margin: 0;
}
.wpsp-form .simpay-checkbox-container .simpay-checkbox-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.wpsp-form .simpay-checkbox-container input[type="checkbox"] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #003F88;
  cursor: pointer;
}
.wpsp-form .simpay-checkbox-container .simpay-checkbox-wrap .simpay-checkbox-label.simpay-label-wrap {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.wpsp-form .simpay-checkbox-container .simpay-checkbox-wrap label {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  cursor: pointer;
}
@media (max-width: 769px) {
  .wpsp-form .simpay-checkbox-container .simpay-checkbox-wrap label {
    font-size: 15px;
  }
}

/* reCAPTCHAバッジを非表示
   ※ Googleの利用規約上、バッジを隠す場合は「This site is protected by reCAPTCHA...」
     の法的通知をフォーム近辺に表示する必要があります */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ラジオボタン ---------------------------------------------------------- */
.wpsp-form .simpay-radio-wrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpsp-form .simpay-radio-wrap ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpsp-form .simpay-radio-wrap ul li::before {
  content: none;
}
.wpsp-form .simpay-radio-wrap label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.5;
}
.wpsp-form .simpay-radio-wrap input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #003F88;
  cursor: pointer;
}
@media (max-width: 769px) {
  .wpsp-form .simpay-radio-wrap ul {
    gap: 8px 16px;
  }
  .wpsp-form .simpay-radio-wrap label {
    font-size: 15px;
  }
}

/* 金額表示 --------------------------------------------------------------
   背景は .wpsp-form と同じ #dfebf5（透過）。枠線のみで領域を示す */
.wpsp-form .simpay-amounts-container {
  margin: 8px 0 24px;
  padding: 20px 24px;
  background-color: transparent !important;
  border: 1px solid #b0bfd0;
  border-radius: 4px;
}
.wpsp-form .simpay-amounts-container > div + div {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d0dbe8;
}
.wpsp-form .simpay-amounts-container p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
.wpsp-form .simpay-total-amount-container p {
  font-size: 20px;
  font-weight: 700;
  color: #003F88;
}
.wpsp-form .simpay-total-amount-container .simpay-total-amount-value {
  font-size: 24px;
}
.wpsp-form .simpay-total-amount-recurring-container p {
  font-size: 14px;
  color: #666;
}
@media (max-width: 769px) {
  .wpsp-form .simpay-amounts-container {
    padding: 16px 18px;
  }
  .wpsp-form .simpay-amounts-container p {
    font-size: 15px;
  }
  .wpsp-form .simpay-total-amount-container p {
    font-size: 17px;
  }
  .wpsp-form .simpay-total-amount-container .simpay-total-amount-value {
    font-size: 20px;
  }
  .wpsp-form .simpay-total-amount-recurring-container p {
    font-size: 13px;
  }
}

/* エラー表示 ------------------------------------------------------------ */
.wpsp-form .simpay-errors {
  margin-top: 6px;
  color: #d9534f;
  font-size: 14px;
}

/* テストモードバッジ ---------------------------------------------------- */
.wpsp-form .simpay-test-mode-badge-container {
  margin-top: 16px;
  text-align: center;
}
.wpsp-form .simpay-test-mode-badge {
  display: inline-block;
  padding: 3px 10px;
  background-color: #f0ad4e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
}