/* =========================================================
   寄付会員のご案内（/donate/、2026-10-30）
   組みは研修ページ・講座ページと同じ（training.css ＋ sos-course.css）。ここには、このページだけの部品を書く。クラスは dn- で始まる
   ========================================================= */
.dn-quick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(26px,3vw,36px);padding:16px 22px;border:2px solid var(--e-ink);background:#fff8d6;color:var(--e-ink);text-decoration:none;font-size:14px}
.dn-quick strong{font-size:17px;font-weight:800}
.dn-quick:hover{background:#ffe54a}
.dn-quick .sc-arrow{position:static;margin:0}

/* 入口ボタン2つ（毎月・一回だけ） */
.dn-quicks{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}
.dn-quicks .dn-quick{margin-top:0}
.dn-quick.is-once{background:#fff}
.dn-quick.is-once:hover{background:var(--e-blue-l)}

/* 使いみち */
.dn-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.dn-uses li{border-top:2px solid var(--e-ink);padding-top:16px}
.dn-uses span{font-family:var(--e-latin);font-weight:600;font-size:13px;color:var(--e-blue)}
.dn-uses h3{margin-top:6px!important;font-weight:800;font-size:19px;line-height:1.45}
.dn-uses p{margin-top:8px!important;font-size:14px;line-height:1.9;color:#333}

/* 金額 */
.dn-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.dn-plan{display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid var(--e-ink);padding:clamp(24px,3vw,36px) clamp(18px,2vw,26px);background:#fff}
.dn-plan:nth-child(2){background:var(--e-blue-l)}
.dn-plan-h{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--e-sub)}
.dn-plan-yen{margin:10px 0 22px!important;font-family:var(--e-latin);font-weight:600;font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-.02em}
.dn-plan-yen small{font-family:"Noto Sans JP",sans-serif;font-size:15px;font-weight:700;letter-spacing:0;margin:0 .2em}
.dn-plan-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;padding:15px 18px;background:var(--e-ink);color:#fff;border:2px solid var(--e-ink);font-weight:800;font-size:15px;text-decoration:none;transition:background .2s,color .2s}
.dn-plan-btn:hover{background:#fff;color:var(--e-ink)}
.dn-plan-btn.is-off{background:#e9e9e6;border-color:#e9e9e6;color:#888;cursor:default}
.dn-pay{margin-top:18px!important;font-size:13px;line-height:1.85;color:var(--e-sub)}

/* いつでも退会できます */
.dn-free{margin-top:20px!important;padding:14px 18px;background:var(--e-blue-l);font-size:14px;line-height:1.8;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.dn-free .dn-change-btn{background:#fff}
.dn-free strong{font-weight:800;margin-right:.4em}
.dn-free a{color:var(--e-blue);text-decoration:underline;margin-left:.4em}

/* 一回だけのご寄付（1口の金額を選び、口数は決済画面で） */
.dn-once-lead{font-size:14.5px;line-height:1.9;max-width:860px;margin:-12px 0 clamp(16px,2vw,24px)!important}
.dn-once-lead strong{font-weight:800}
.dn-onces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.dn-once-plan{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--e-ink);padding:18px 12px 14px;background:#fff}
.dn-once-yen{margin:6px 0 14px!important;font-family:var(--e-latin);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1;letter-spacing:-.02em}
.dn-once-yen small{font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:700;margin-left:.15em}
.dn-once-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:10px 8px;border:2px solid var(--e-ink);font-weight:800;font-size:13px;color:var(--e-ink);text-decoration:none;background:#fff;transition:background .2s,color .2s}
.dn-once-btn:hover{background:var(--e-ink);color:#fff}
.dn-once-btn.is-off{background:#e9e9e6;border-color:#e9e9e6;color:#888;cursor:default}

/* 流れ */
.dn-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.dn-flow li{background:var(--e-gray);padding:clamp(20px,2.4vw,28px)}
.dn-flow span{font-family:var(--e-latin);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--e-blue)}
.dn-flow h3{margin-top:6px!important;font-weight:800;font-size:18px}
.dn-flow p{margin-top:8px!important;font-size:14px;line-height:1.85;color:#333}

/* ご寄付について */
.dn-terms{border-top:1px solid var(--e-ink)}
.dn-terms > div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--e-line)}
.dn-terms dt{font-weight:800;font-size:15px}
.dn-terms dd{font-size:14.5px;line-height:1.9}
.dn-terms a{color:var(--e-blue);text-decoration:underline}
.dn-change{margin-top:clamp(26px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.dn-change p{font-weight:800;font-size:14px;margin-right:6px!important}
.dn-change-btn{display:inline-flex;align-items:center;gap:12px;padding:12px 20px;border:2px solid var(--e-ink);font-weight:700;font-size:14px;color:var(--e-ink);text-decoration:none;background:#fff}
.dn-change-btn:hover{background:var(--e-ink);color:#fff}
.dn-change-btn.is-sub{border-width:1px}

@media (max-width:1100px) and (min-width:901px){
  .dn-onces{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .dn-uses,.dn-plans,.dn-flow{grid-template-columns:1fr}
  .dn-onces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn-terms > div{grid-template-columns:1fr;gap:6px}
  .dn-quick{display:flex;flex:1 1 100%}
}