に対して左に70pxだけ内側なので、その隙間に入る左側の
影だけが見えている状態＝「影が左にしかついていない」。切り取りを解除する。 */
overflow: visible !important;
}
.donation-main .qa-content .accor-title a::before {
content: "Q";
position: absolute;
left: 0;
top: 0;
width: 55px;
height: 55px;
border-radius: 50%;
background: #333333;
color: #fff;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 26px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.donation-main .qa-content .accor-body {
background: none !important;
position: relative;
min-height: 55px;
}
.donation-main .qa-content .accor-body::before {
content: "A";
position: absolute;
left: 0;
top: 0;
width: 55px;
height: 55px;
border-radius: 50%;
background: #a01217;
color: #fff;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 26px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* スマホ：Q/A丸とテキストの余白を調整。
qa.css が ≤1024px で title の margin-left / body の padding-left を 40px に縮めるため、
55px の丸が文字に重なって崩れる。丸を 40px にし、余白を 54px へ戻して重なりを防ぐ。 */
@media (max-width: 1024px) {
.donation-main .qa-content .accor-title a { min-height: 40px; }
.donation-main .qa-content .accor-title a::before,
.donation-main .qa-content .accor-body::before {
width: 40px;
height: 40px;
font-size: 20px;
}
.donation-main .qa-content .accor-title .accor-title-inner { margin-left: 54px; }
.donation-main .qa-content .accor-body {
min-height: 40px;
padding-left: 54px;
}
}
/* このページの h2 は ≤1000px でも style.css の #777 にせず、PCと同じ色（#222）を維持。
（#donation-contact の白見出しは id 指定のため影響を受けない） */
@media (max-width: 1000px) {
.donation-main h2 { color: #222222; }
}
/* ==========================================================================
レスポンシブ
========================================================================== */
@media (max-width: 900px) {
.donation-section { padding: 64px 20px; }
.donation-tabs { grid-template-columns: 1fr; }
.donation-tab { padding: 18px 20px; }
.donation-features { grid-template-columns: 1fr; }
.donation-message {
grid-template-columns: 1fr;
padding: 28px 20px;
gap: 24px;
}
.donation-message__portrait img {
max-width: 180px;
margin: 0 auto;
}
.donation-stats__grid,
.donation-flow,
.donation-payment {
grid-template-columns: 1fr;
}
.donation-form { padding: 28px 20px; }
.donation-form__row {
grid-template-columns: 1fr;
gap: 10px;
padding: 16px 0;
}
.donation-form__label { padding-top: 0; }
.donation-form__amounts { grid-template-columns: repeat(2, 1fr); }
.donation-report__link {
grid-template-columns: 1fr;
gap: 4px;
}
.donation-primary-btn { min-width: 0; width: 100%; padding: 0 24px; }
}
@media (max-width: 560px) {
.donation-heading h2 { font-size: 22px; }
.donation-stats__num { font-size: 30px; }
.donation-notice { padding: 24px; }
}
/* =========================================================
MW WP Form 対応（確定済みデザイン維持のための追記のみ）
MW WP Formが生成するマークアップを、既存の見た目に一致させる調整。
既存ルールは一切変更していません。
・入力欄/同意チェックは class 指定で既存ルールがそのまま適用されるため追記不要
・ラジオ（プロジェクト/金額）のみ、MWのマークアップに合わせて再現
========================================================= */
/* バリデーションエラー文言（MWは .error で出力） */
.donation-form .error {
display: block;
margin-top: 6px;
color: var(--dn-primary);
font-size: 12.5px;
letter-spacing: 0.04em;
line-height: 1.6;
}
/* プロジェクト選択ラジオ（既存 .donation-form__radio 相当） */
.donation-form__field--project .mwform-radio-field {
display: block;
margin: 0;
}
.donation-form__field--project .mwform-radio-field label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 15px;
cursor: pointer;
margin: 0;
}
.donation-form__field--project .mwform-radio-field input {
accent-color: var(--dn-primary);
width: 18px; height: 18px;
}
/* 横並びのラジオ（受領証明書の受け取り方法など）。
見た目は上の --project と同値。並びだけ横（MWの horizontal-item の margin-left を打ち消す） */
.donation-form__field--radio .mwform-radio-field {
display: inline-block;
margin: 0 28px 0 0 !important;
}
.donation-form__field--radio .mwform-radio-field label {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
line-height: 1.7;
cursor: pointer;
margin: 0;
}
.donation-form__field--radio .mwform-radio-field input {
accent-color: var(--dn-primary);
width: 18px; height: 18px;
}
/* 申し込みフォームの区分タブ（個人 / 法人）
見た目は上の .donation-tabs / .donation-tab と同じ値・同じトークンで揃えている。
クラス名を分けているのは、プロジェクトタブ用のJS（.donation-tab → .donation-panel を操作）が
フォーム側のパネルを巻き込まないようにするため。 */
.donation-form-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
/* 枠（.donation-form / padding:48px）の内側に入れたので、
最初の入力行との間隔は48pxではなく32pxに詰める */
margin-bottom: 32px;
}
.donation-form-tab {
appearance: none;
background: #fff;
border: 1px solid var(--dn-border);
border-radius: var(--dn-radius);
padding: 20px 24px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
font-family: inherit;
color: var(--dn-ink-sub);
position: relative;
}
.donation-form-tab:hover {
border-color: var(--dn-border-strong);
}
.donation-form-tab.is-active {
background: #0693e3;
border-color: #0693e3;
color: #fff;
box-shadow: var(--dn-shadow);
}
/* .donation-tab__label は下に __sub が来る前提で margin-bottom:6px を持つため、
ラベル1行だけのフォームタブでは打ち消して上下中央に見えるようにする */
.donation-form-tab .donation-tab__label {
margin-bottom: 0;
}
.donation-form-panel[hidden] {
display: none;
}
@media (max-width: 700px) {
.donation-form-tab { padding: 16px 20px; }
}
/* 金額チップ（既存 .donation-form__chip 相当）。
グリッドは既存の .donation-form__amounts ルール（PC3列/SP2列）をそのまま利用 */
.donation-form__amounts .mwform-radio-field {
position: relative;
margin: 0 !important;
display: block;
}
.donation-form__amounts .mwform-radio-field label {
display: block;
margin: 0;
cursor: pointer;
}
.donation-form__amounts .mwform-radio-field input[type="radio"] {
position: absolute;
opacity: 0;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.donation-form__amounts .mwform-radio-field-text {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
border: 1px solid var(--dn-border-strong);
border-radius: var(--dn-radius);
font-size: 15px;
font-weight: 700;
font-family: "Noto Serif JP", serif;
letter-spacing: 0.04em;
transition: all .15s;
background: #fff;
}
.donation-form__amounts .mwform-radio-field:hover .mwform-radio-field-text {
border-color: var(--dn-primary);
}
.donation-form__amounts .mwform-radio-field input[type="radio"]:checked ~ .mwform-radio-field-text {
background: var(--dn-primary);
color: #fff;
border-color: var(--dn-primary);
box-shadow: 0 2px 8px rgba(200,22,29,.25);
}
/* 確認画面では同意チェック行を非表示（MWは確認画面でフォームに mw_wp_form_confirm クラスを付与） */
.mw_wp_form_confirm .donation-form__row--agree { display: none; }
/* 送信/確認/戻るボタンの間隔（.donation-form__submit は既存ルールで中央寄せ） */
.donation-form__submit input[type="submit"] { margin: 0 6px; }
/* --- wpautop 保険：自動挿入される /
でグリッドが崩れるのを防ぐ ---
.donation-form__row の2カラム（ラベル/入力）は死守し、それ以外の子要素は全幅に逃がす。
※確定デザインは変更せず、自動挿入されたゴミ要素を無害化するだけ。 */
.donation-form__row > br,
.donation-form__field > br { display: none; }
.donation-form__row > p:empty,
.donation-form__field > p:empty { display: none; margin: 0; }
.donation-form__row > :not(.donation-form__label):not(.donation-form__field) {
grid-column: 1 / -1;
}
/* ==========================================================
入力内容の確認モーダル（js/donation.js が body 直下に生成）
※ .donation-main の外に置かれるため CSS変数は使えない。
トークンと同じ値をフォールバック付きで指定している。
========================================================== */
.dn-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.dn-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.dn-modal__panel {
position: relative;
width: 100%;
max-width: 640px;
max-height: 84vh;
overflow-y: auto;
background: #fff;
border-radius: 16px;
padding: 40px 40px 32px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.dn-modal__title {
font-family: "Noto Serif JP", serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.08em;
text-align: center;
color: #1a1a1a;
margin: 0 0 28px;
}
.dn-modal__list {
display: grid;
grid-template-columns: 150px 1fr;
margin: 0 0 32px;
}
.dn-modal__list dt,
.dn-modal__list dd {
padding: 14px 0;
border-top: 1px solid #e5e1d9;
margin: 0;
}
.dn-modal__list dt {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
color: #555555;
}
.dn-modal__list dd {
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.04em;
color: #1a1a1a;
white-space: pre-wrap;
word-break: break-word;
}
.dn-modal__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ボタンは申し込みボタンと同じ考え方（枠線＋白背景 → ホバーでベタ塗り） */
.dn-modal__btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
height: 56px;
padding: 0 28px;
border-radius: 999px;
background: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.14em;
cursor: pointer;
transition: all 0.2s ease;
}
.dn-modal__btn--send {
border: 2px solid #1a1a1a;
color: #1a1a1a;
}
.dn-modal__btn--send:hover {
background: #1a1a1a;
color: #fff;
}
.dn-modal__btn--send:disabled {
opacity: 0.5;
cursor: default;
}
.dn-modal__btn--back {
border: 2px solid #c9c4b9;
color: #555555;
}
.dn-modal__btn--back:hover {
background: #555555;
border-color: #555555;
color: #fff;
}
@media (max-width: 640px) {
.dn-modal { padding: 16px; }
.dn-modal__panel { padding: 28px 20px 24px; }
.dn-modal__title { font-size: 19px; margin-bottom: 20px; }
.dn-modal__list { grid-template-columns: 1fr; }
.dn-modal__list dt { padding: 12px 0 0; }
.dn-modal__list dd { padding: 4px 0 12px; border-top: none; }
.dn-modal__btn { min-width: 0; width: 100%; }
}