/* =========================================================
   p-donation.css — ご寄附・ご寄贈ページ固有スタイル
   共通: style.css の CSS変数・.sec-head/.dots/.btn-pill/.page-title を活用
   ========================================================= */

/* ---- ページ全体ラッパ ---- */
.dn{position:relative;padding-top:14px;overflow:hidden}

/* ---- ページタイトル(1文字ずつ出現: .page-title は main.js が処理) ---- */
.page-title{
  text-align:center;font-family:var(--font-r);
  color:var(--aqua);font-weight:500;
  font-size:24px;letter-spacing:.06em;line-height:1.5;
  margin:26px 0 16px;
}

/* ---- イントロ・リード ---- */
.dn-intro{position:relative;padding:14px 22px 6px}
.dn-lead{
  text-align:center;font-family:var(--font-g);
  color:var(--ink2);font-size:13px;line-height:2.15;letter-spacing:.06em;
  max-width:880px;margin:0 auto;
}

/* ---- セクション共通ブロック ---- */
.dn-block{position:relative;padding:6px 22px;text-align:center}
.dn-text{
  text-align:center;font-family:var(--font-g);
  color:var(--ink2);font-size:13px;line-height:2.15;letter-spacing:.05em;
  max-width:860px;margin:0 auto 4px;
}

/* ---- ● お知らせ / ● お悩みの方 見出し ---- */
.dn-mark{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-r);color:var(--aqua);font-weight:500;
  font-size:15px;letter-spacing:.12em;margin:20px 0 12px;
}
.dn-mark::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--aqua-btn);flex-shrink:0;
}

/* ---- 寄贈品イラスト 3点 ---- */
.dn-items{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;align-items:end;justify-items:center;
  max-width:780px;margin:18px auto 6px;
}
.dn-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dn-item__pic{
  position:relative;width:100%;height:118px;
  display:flex;align-items:flex-end;justify-content:center;
}
.dn-item__pic img{height:auto;width:auto;display:block}
.dn-item figcaption{
  font-family:var(--font-r);color:var(--ink2);
  font-size:12.5px;letter-spacing:.1em;font-weight:500;
}

/* 衣類(服2=たたんだ衣類が主役で大きく前面 / 服=オレンジ上着が右後ろから覗く) */
.dn-item__pic--cloth{justify-content:flex-start}
.dn-item__pic--cloth .cloth-a{max-height:112px;position:relative;left:-6px;z-index:2}
.dn-item__pic--cloth .cloth-b{
  position:absolute;left:50%;bottom:0;transform:translateX(2%);
  max-height:72px;opacity:.96;z-index:1;
}
/* ぬいぐるみ(左=青帽/中央=ハート大/右=緑帽 を横一列に)
   SP: 中央列に収め、右隣の布団に干渉しないよう小さめ＆まとまり良く */
.dn-item__pic--toy{align-items:flex-end}
.dn-item__pic--toy .toy{position:absolute;bottom:0}
.dn-item__pic--toy .toy-l{max-height:62px;left:50%;transform:translateX(-82%);z-index:2}
.dn-item__pic--toy .toy-c{max-height:78px;left:50%;transform:translateX(-30%);z-index:3}
.dn-item__pic--toy .toy-r{max-height:54px;left:50%;transform:translateX(20%);z-index:1}
/* 布団 */
.dn-item__pic--futon img{max-height:118px}

/* ---- Amazon欲しいものリスト ピル ---- */
.dn-amazon{display:flex;justify-content:center;margin:14px 0 4px}
.amazon-pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--aqua-btn);color:#fff;
  font-family:var(--font-r);font-weight:500;font-size:14px;letter-spacing:.08em;   /* 先方指摘: 「横須賀の魅力」ボタンに合わせ細く */
  padding:12px 28px;border-radius:30px;
  box-shadow:0 4px 10px rgba(143,209,225,.35);
  transition:transform .55s var(--ease-soft),box-shadow .55s,background .55s;
}
.amazon-pill:hover{transform:scale(1.02);background:var(--aqua-btn-d);box-shadow:0 8px 22px rgba(116,194,214,.5)}
.amazon-pill:active{transform:translateY(1px) scale(.99)}
.amazon-pill svg{width:14px;height:14px}

/* ---- お申し込みフォーム 案内 ---- */
.dn-apply{position:relative;padding:14px 22px 6px;text-align:center}
.dn-apply__lead{
  font-family:var(--font-r);color:var(--aqua);font-weight:500;
  font-size:14px;line-height:2.05;letter-spacing:.06em;
  max-width:820px;margin:0 auto 18px;
}
.dn-apply__btn{display:flex;justify-content:center}
.apply-pill{font-size:14px;padding:12px 28px}   /* Amazonボタンとデザイン統一(先方指摘) */

/* ---- お礼セクション ---- */
.dn-thanks{position:relative;padding:6px 22px 14px;text-align:center}
.dn-thanks__sub{
  font-family:var(--font-r);color:var(--ink);
  font-size:13.5px;letter-spacing:.08em;margin-bottom:18px;
}
.thanks-card{
  background:#fff;
  border:1px solid rgba(170,219,227,.55);border-radius:6px;
  box-shadow:0 6px 20px rgba(120,150,150,.08);
  max-width:560px;margin:0 auto;
  padding:18px 30px;text-align:left;
  max-height:330px;overflow-y:auto;
}
/* スクロールバーをやわらかく */
.thanks-card::-webkit-scrollbar{width:7px}
.thanks-card::-webkit-scrollbar-thumb{background:#d3d3d3;border-radius:6px}
.thanks-card::-webkit-scrollbar-track{background:transparent}

.thanks-year + .thanks-year{margin-top:8px}
/* 先頭(最新)の年は原稿どおり見出しを出さない。年が変わる箇所だけ区切る */
.thanks-year__head{
  font-family:var(--font-r);color:var(--aqua-d);font-weight:700;
  font-size:14px;letter-spacing:.08em;
  padding-bottom:8px;margin-bottom:4px;
  border-bottom:1px dotted var(--aqua-line);
}
.thanks-year:first-child .thanks-year__head{display:none}
.thanks-list{list-style:none}
.thanks-list li{
  display:flex;align-items:baseline;gap:10px;
  font-size:13.5px;line-height:1.6;
  padding:9px 2px;
}
.thanks-list .t-date{
  flex-shrink:0;width:84px;
  font-family:var(--font-g);color:var(--ink);font-size:13px;letter-spacing:.01em;
}
.thanks-list .t-name{color:var(--ink);font-weight:400}

/* =========================================================
   水彩の木・葉 装飾(SP)
   ========================================================= */
.dn-tree{position:absolute;pointer-events:none;z-index:0;opacity:.92}
.dn-intro>*:not(.dn-tree),
.dn-block>*:not(.dn-tree),
.dn-nayami>*:not(.dn-tree),
.dn-apply>*:not(.dn-tree){position:relative;z-index:1}

.dt-top-r{width:42px;top:-8px;right:-6px}
.dt-kifu{width:42px;top:0;left:-4px}
.dt-kizou{width:38px;top:-6px;right:-2px}
.dt-apply-l{width:40px;left:-4px;top:6px}
.dt-apply-r{width:38px;right:-4px;top:0}

/* SP用ブレーク(PCでのみ改行) */
.pc-br{display:none}

/* =========================================================
   PC レイアウト (@media min-width:860px)
   ========================================================= */
@media (min-width:860px){
  .dn{padding-top:40px}

  .page-title{font-size:28px;letter-spacing:.08em;margin:40px 0 26px}

  /* イントロ: タイトル→リード→点線 */
  .dn-intro{padding:14px 60px 30px;max-width:1200px;margin:0 auto}
  .dn-lead{font-size:16px;line-height:2.5;letter-spacing:.12em}

  /* ご寄附ブロック: 上下にゆとり */
  .dn-block{padding:40px 60px;max-width:1200px;margin:0 auto}
  .dn-kifu{padding:24px 60px}
  .dn-text{font-size:16px;line-height:2.5;letter-spacing:.1em}

  /* ご寄贈ブロック: ご寄附と連続(区切り線なし)・見出し前後にゆとり */
  .dn-kizou{padding:36px 60px 30px}
  .dn-kizou .dn-text{margin-bottom:0}
  .dn-kizou .sec-head{margin:8px 0 16px}

  .dn-mark{font-size:19px;letter-spacing:.14em;margin:16px 0 12px}
  .dn-mark::before{width:12px;height:12px}

  /* 寄贈品イラスト: 横3列大きく + 下に大きなゆとり */
  .dn-items{max-width:1120px;gap:36px;margin:18px auto 0}
  .dn-item{gap:14px}
  .dn-item__pic{height:308px}
  .dn-item figcaption{font-size:16px;letter-spacing:.14em}
  .dn-item__pic--cloth{justify-content:center}
  .dn-item__pic--cloth .cloth-a{max-height:286px;left:-34px}
  .dn-item__pic--cloth .cloth-b{max-height:206px;bottom:-4px;left:auto;right:4px;transform:none}
  .dn-item__pic--toy .toy-l{max-height:212px;transform:translateX(-100%)}
  .dn-item__pic--toy .toy-c{max-height:262px;transform:translateX(-38%)}
  .dn-item__pic--toy .toy-r{max-height:178px;transform:translateX(42%)}
  .dn-item__pic--futon img{max-height:306px}

  /* お悩みの方ブロック(寄贈品の後に区切り線で分離) */
  .dn-nayami{padding:36px 60px 30px}
  .dn-nayami .dn-mark{margin:8px 0 12px}

  .amazon-pill{font-size:17px;padding:15px 40px}
  .dn-amazon{margin:34px 0 6px}

  /* お申し込み案内: リード→ボタン に大きな余白 */
  .dn-apply{padding:30px 60px 14px;max-width:1200px;margin:0 auto}
  .dn-apply__lead{font-size:19px;line-height:2.1;margin-bottom:74px;letter-spacing:.08em}
  .apply-pill{font-size:17px;padding:15px 40px}   /* Amazonボタンとサイズ統一(先方指摘) */

  /* お礼: 見出し→サブ→カード それぞれゆとり */
  .dn-thanks{padding:18px 60px 0;max-width:1200px;margin:0 auto}
  .dn-thanks .sec-head{margin:8px 0 0}
  .dn-thanks__sub{font-size:17px;margin:48px 0}

  .thanks-card{
    max-width:680px;padding:26px 56px;max-height:420px;
    margin:0 auto;border-radius:8px;
  }
  /* カード→フッターの大きな空き */
  .dn-thanks::after{content:"";display:block;height:128px}
  .thanks-year__head{font-size:17px;padding-bottom:11px}
  .thanks-list li{font-size:18px;padding:12px 6px;gap:20px}
  /* 区切り線を設計のはっきりした点線に(donationのみ) */
  .dots{height:4px;background:radial-gradient(circle closest-side, var(--aqua-line) 96%, transparent) center/14px 4px repeat-x}
  .thanks-list .t-date{width:86px;font-size:18px}
  .thanks-list .t-name{font-size:18px}

  /* ---- 装飾木をPCで大きく + ゆらゆら ---- */
  /* 画面が狭くなっても本文(中央の文章列)に被らないよう min() で列の外側にクランプ。
     親=各セクション(max1200中央)のため 50%=セクション中央。狭幅では画面外へ逃がす。 */
  .dt-top-r{width:min(96px, calc(50% - 460px));top:120px;right:max(8px, calc(50% - 548px));animation:floaty 7s ease-in-out infinite}
  .dt-kifu{width:min(96px, calc(50% - 450px));top:0;left:max(8px, calc(50% - 538px));animation:floaty 6.5s ease-in-out .4s infinite}
  .dt-kizou{width:min(90px, calc(50% - 450px));top:-10px;right:max(8px, calc(50% - 532px));animation:floaty 7s ease-in-out .2s infinite}
  .dt-apply-l{width:min(104px, calc(50% - 450px));left:max(8px, calc(50% - 546px));top:10px;animation:floaty 7s ease-in-out infinite}
  .dt-apply-r{width:min(96px, calc(50% - 483px));right:max(8px, calc(50% - 571px));top:-6px;animation:floaty 6.4s ease-in-out .5s infinite}

  .pc-br{display:inline}
}

/* 中幅では width:min(maxW, calc(50% - CH)) が左右余白に応じて装飾木を自動縮小し、
   画面内に収めつつ本文に被らせない(2026-06-26 先方指摘で非表示→縮小に変更)。
   余白が尽きると width が 0 に収束し自然に消える。SP(<860)は base の小サイズを維持。 */