@charset "UTF-8";
/* =================================================================
   募集寄付金ページ専用スタイル  donation.css
   公益財団法人練馬区文化振興協会「もっともっとみんなで文化芸術を！」
   ================================================================= */

.dn-wrap {
  --dn-teal: #00A997;          /* メインカラー（ティールグリーン）*/
  --dn-teal-dark: #008476;
  --dn-ink: #222222;
  --dn-line: #d7d7d7;
  --dn-qr-line: #1f3a4d;       /* QRコード枠の濃紺 */
  --dn-bg-soft: #f4faf8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: var(--dn-ink);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.dn-wrap *,
.dn-wrap *::before,
.dn-wrap *::after { box-sizing: border-box; }

.dn-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

/* ---------- ページタイトル ---------- */
.dn-pagetitle {
  text-align: center;
  margin: 0 0 48px;
}
.dn-pagetitle__main {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}
.dn-pagetitle__sub {
  display: block;
  margin-top: 6px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dn-teal);
  letter-spacing: .04em;
}

/* ---------- セクション見出し（下線タイプ） ---------- */
.dn-heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 48px 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--dn-teal);
  letter-spacing: .02em;
}
.dn-section:first-of-type .dn-heading { margin-top: 0; }

/* ---------- セクション見出し（帯タイプ） ---------- */
.dn-bar {
  background: var(--dn-teal);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 12px 20px;
  margin: 56px 0 24px;
  letter-spacing: .04em;
  /* PC 固定ヘッダー（.floating ＝高さ約144px）の真下に着地させる
     JS（donation.js）が無効でも、ネイティブのアンカージャンプで
     見出しがヘッダーの裏に隠れないようにするための値。
     .floating が消える 720px 以下では下のメディアクエリで縮める。 */
  scroll-margin-top: 160px;
}

/* ---------- 本文・リスト ---------- */
.dn-text { margin: 0 0 14px; font-size: 1rem; }

.dn-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.dn-list > li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 6px;
  font-size: 1rem;
}
.dn-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--dn-teal);
  font-weight: 700;
}
.dn-list--num { counter-reset: dn; }
.dn-list--num > li::before {
  counter-increment: dn;
  content: counter(dn) "．";
  color: var(--dn-ink);
}

/* ---------- 共通ボタン（アウトライン） ---------- */
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 28px;
  border: 2px solid var(--dn-teal);
  border-radius: 2px;
  color: var(--dn-teal);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  background: #fff;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.dn-btn:hover { background: #018476; border-color: #018476; color: #fff; }
.dn-btn__logo { height: 34px; width: auto; }

.dn-btn-row { margin: 8px 0 8px; }
.dn-btn--center {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
.dn-btn--lg { min-width: 380px; padding: 16px 32px; font-size: 1.15rem; }

/* 申込書ボタン（2列） */
.dn-doc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 26px 0 40px;
}
.dn-doc-btns .dn-btn { min-width: 240px; text-align: center; }

/* ---------- これまでの取組ボックス ---------- */
.dn-works {
  border: 2px solid var(--dn-teal);
  border-radius: 4px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.dn-works__lead {
  flex: 1 1 240px;
  min-width: 220px;
  font-size: 1rem;
  margin: 0;
}
.dn-works__items {
  flex: 2 1 480px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dn-work figure { margin: 0; text-align: center; }
.dn-work img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.dn-work figcaption {
  margin-top: 6px;
  font-size: .85rem;
  font-style: italic;
  color: #555;
}

/* ---------- つながる募金 4つの方法 ---------- */
.dn-methods {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 32px 0 16px;
}
.dn-method {
  display: grid;
  grid-template-columns: 1fr 28px 144px;
  align-items: center;
  gap: 22px;
}
.dn-method__btn {
  display: block;
  text-decoration: none;
  transition: opacity .25s, transform .25s;
}
.dn-method__btn img { width: 100%; height: auto; display: block; border-radius: 4px; }
.dn-method__btn:hover { opacity: .82; transform: translateY(-1px); }
.dn-method__chevron {
  text-align: center;
  font-size: 1.6rem;
  color: #777;
  line-height: 1;
}
.dn-method__qr {
  width: 144px;
  height: 144px;
  border: 2px solid var(--dn-qr-line);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--dn-qr-line);
  text-decoration: none;
  background: #fff;
  line-height: 1.3;
  transition: background .25s;
}
.dn-method__qr:hover { background: var(--dn-bg-soft); }
.dn-method__qr img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 振込先・送付先 ---------- */
.dn-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  margin-top: 8px;
}
.dn-info__block { font-size: 1rem; }
.dn-info__title {
  font-weight: 700;
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.dn-info__block p { margin: 0 0 6px; }
.dn-info__block .indent { padding-left: 1.2em; }

/* =================================================================
   レスポンシブ
   ※ max-width 指定のため、必ず「大きい順」に記述すること
   （サイト本体は box_1200＝最大1200px。.dn-container は最大1100px）
   ================================================================= */

/* 〜1920px：大型ディスプレイ。コンテンツは中央 1100px を基準に、
   余白とタイポグラフィをゆったりめに最適化 */
@media (max-width: 1920px) {
  .dn-container { max-width: 1100px; padding: 72px 24px 88px; }
  .dn-pagetitle__main { font-size: 1.55rem; }
  .dn-pagetitle__sub  { font-size: 1.75rem; }
}

/* 〜1599.98px */
@media (max-width: 1599.98px) {
  .dn-container { max-width: 1080px; padding: 64px 24px 80px; }
  .dn-pagetitle__main { font-size: 1.5rem; }
  .dn-pagetitle__sub  { font-size: 1.7rem; }
}

/* 〜1399.98px */
@media (max-width: 1399.98px) {
  .dn-container { max-width: 1040px; }
  .dn-method { grid-template-columns: 1fr 28px 92px; }
  .dn-method__qr { width: 92px; height: 92px; }
}

@media (max-width: 1199.98px) {
  .dn-container { max-width: 960px; }
  .dn-btn--lg { min-width: 320px; }
}

@media (max-width: 991.98px) {
  .dn-container { padding: 48px 22px 64px; }
  .dn-pagetitle__main { font-size: 1.35rem; }
  .dn-pagetitle__sub  { font-size: 1.5rem; }
  .dn-works { gap: 22px; }
  .dn-works__lead { flex-basis: 100%; }
  .dn-works__items { flex-basis: 100%; }
}

@media (max-width: 767.98px) {
  .dn-container { padding: 40px 18px 56px; }
  .dn-pagetitle__main { font-size: 1.2rem; }
  .dn-pagetitle__sub  { font-size: 1.3rem; }
  .dn-heading, .dn-bar { font-size: 1.08rem; }
  .dn-bar { padding: 11px 16px; }
  .dn-btn--lg { min-width: 0; width: 100%; }
  .dn-btn--center .dn-btn { width: 100%; }

  /* 方法カード：縦並び（ボタン → QR） */
  .dn-method {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
    border: 1px solid var(--dn-line);
    border-radius: 8px;
    padding: 18px;
  }
  .dn-method__chevron { display: none; }
  .dn-method__btn { width: 100%; max-width: 420px; }
  .dn-method__qr { width: 110px; height: 110px; }

  /* 振込先・送付先：1列 */
  .dn-info { grid-template-columns: 1fr; gap: 24px; }
  .dn-doc-btns { flex-direction: column; align-items: stretch; }
  .dn-doc-btns .dn-btn { min-width: 0; width: 100%; }
}

/* 〜720px：ncpa.css の .floating（PC固定ヘッダー）が display:none となる断点。
   ヘッダーが消えるため scroll-margin-top を元の小さい値に戻す。 */
@media (max-width: 720px) {
  .dn-bar { scroll-margin-top: 24px; }
}

@media (max-width: 575.98px) {
  .dn-container { padding: 32px 14px 48px; }
  .dn-works { padding: 18px 16px; }
  .dn-works__items { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .dn-work img { height: 78px; }
  .dn-work figcaption { font-size: .72rem; }
  .dn-btn { font-size: .98rem; padding: 10px 18px; }
}

@media (max-width: 389px) {
  .dn-pagetitle__main { font-size: 1.05rem; }
  .dn-pagetitle__sub  { font-size: 1.15rem; }
  .dn-works__items { grid-template-columns: 1fr; }
  .dn-work img { height: 150px; }
}

/* =================================================================
   ▼▼▼ 入口ページ（【資料１】協会寄付金HP入口）専用スタイル ▼▼▼
   ※ 上記の募集寄付金ページ（資料２）と共通の .dn-wrap / .dn-container /
   　.dn-btn / .dn-text を再利用しています。
   ================================================================= */

/* ---------- ■付き見出し ---------- */
.dn-mark-heading {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 48px 0 18px;
  padding-left: 0;
}
.dn-mark-heading::before {
  content: "■";
  color: var(--dn-teal);
  margin-right: 8px;
}
.dn-section:first-of-type .dn-mark-heading,
.dn-mark-heading:first-child { margin-top: 0; }

/* ---------- 趣旨パネル（ティール背景・白文字） ---------- */
.dn-panel {
  background: var(--dn-teal);
  color: #fff;
  border-radius: 4px;
  padding: 40px 48px 44px;
}
.dn-panel__title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 22px;
}
.dn-panel__text {
  font-size: 1rem;
  margin: 0 0 18px;
}
.dn-panel__text:last-child { margin-bottom: 0; }

/* パネル内 取組画像（白背景の帯） */
.dn-panel__works {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  margin: 26px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
}
.dn-panel__works figure { margin: 0; text-align: center; }
.dn-panel__works img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.dn-panel__works figcaption {
  margin-top: 8px;
  font-size: .9rem;
  font-style: italic;
  color: #333;
}

/* ---------- 入口ボタン（3つ：使途指定しない／される／UD） ---------- */
.dn-entry-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 8px;
}
.dn-entry-btns .dn-btn {
  width: 100%;
  min-height: 76px;
  text-align: center;
  line-height: 1.5;
  padding: 14px 18px;
}

/* =================================================================
   入口ページ レスポンシブ（max-width 指定：大きい順）
   ================================================================= */
@media (max-width: 1399.98px) {
  .dn-panel { padding: 38px 40px 42px; }
}

@media (max-width: 991.98px) {
  .dn-panel { padding: 32px 30px 36px; }
  .dn-panel__works { gap: 18px; padding: 20px; }
  .dn-panel__works img { height: 120px; }
}

@media (max-width: 767.98px) {
  .dn-mark-heading { font-size: 1.12rem; }
  .dn-panel { padding: 26px 20px 30px; }
  .dn-panel__title { font-size: 1.1rem; }
  /* 入口ボタン：縦1列・全幅 */
  .dn-entry-btns { grid-template-columns: 1fr; gap: 14px; }
  .dn-entry-btns .dn-btn { min-height: 60px; }
}

@media (max-width: 575.98px) {
  .dn-panel__works { gap: 10px; padding: 14px; }
  .dn-panel__works img { height: 84px; }
  .dn-panel__works figcaption { font-size: .75rem; }
}

@media (max-width: 389px) {
  .dn-panel__works { grid-template-columns: 1fr; }
  .dn-panel__works img { height: 160px; }
}


/* =================================================================
   HT追加
   ================================================================= */
.dn_ds_575_on { display: none; }
.dn_ds_575_off { display: inherit; }
.dn_ds_511_on { display: none; }
.dn_ds_511_off { display: inherit; }
.dn_ds_511_off_b { display: inline-block; }
.dn_ds_389_on { display: none; }
.dn_ds_389_off { display: inherit; }
.dn_ds_01 { display: inline; }
.dn_ml_01 { margin-left: 96px; }
.dn_box_1200_02 {  }
@media (max-width: 575.98px) {
.dn_ds_575_on { display: inherit; }
.dn_ds_575_off { display: none; }
}
@media (max-width: 511px) {
.dn_ds_511_on { display: inherit; }
.dn_ds_511_off { display: none; }
.dn_ds_511_off_b { display: none; }
.dn_ds_01 { display: none!important; }
.dn_ml_01 { margin-left: 16px; }
.dn_box_1200_02 { width: 100%; }
/* 取組画像3点：キャプションの行数が異なっても画像の上端をそろえる（上揃え） */
.dn-panel__works { align-items: start; }
}
@media (max-width: 389px) {
.dn_ds_389_on { display: inherit; }
.dn_ds_389_off { display: none; }
}



/* =================================================================
   印刷用スタイル（@media print）
   ブラウザの「背景のグラフィック」は既定でオフのため、
   ティール背景＋白文字のパネル/帯見出しが「白文字のみ」になり
   読めなくなる。印刷時は白背景＋濃い文字に切り替えて視認性を確保する。
   （背景グラフィックの ON/OFF に依存せず確実に読めるようにする狙い）
   ================================================================= */
@media print {

  /* もし利用者が「背景のグラフィック」を ON にしている場合に備え、
     色をそのまま出力させる指定も併記（下の上書きが優先されるため
     見た目はどちらの設定でも白背景・濃い文字で統一される） */
  .dn-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 趣旨パネル：ティール背景＋白文字 → 白背景＋ティール枠＋濃い文字 */
  .dn-panel {
    background: #fff !important;
    color: var(--dn-ink) !important;
    border: 2px solid var(--dn-teal) !important;
  }
  .dn-panel__title { color: var(--dn-teal) !important; }
  .dn-panel__text  { color: var(--dn-ink)  !important; }

  /* 帯タイプ見出し：ティール背景＋白文字 → 白背景＋ティール文字＋枠線 */
  .dn-bar {
    background: #fff !important;
    color: var(--dn-teal) !important;
    border-left: 6px solid var(--dn-teal) !important;
    border-bottom: 2px solid var(--dn-teal) !important;
    padding: 8px 14px !important;
  }
}