/* ============================================================
   一般社団法人みとり — 寄付で応援する（/donation/）
   style.css の後に読み込む。ヘッダー・フッターは style.css のまま
   ============================================================ */

.dn {
  --dn-text: #444444;
  --dn-navy: #0f1e3d;
  --dn-navy-line: #303f5d;
  --dn-pink: #feaea7;
  --dn-pink-strong: #ff8c82;
  --dn-pink-text: #e89b9b;
  --dn-gray-text: #595959;
  --dn-bg-gray: #fbfbfb;
  --dn-border: #e6e7ed;
  --dn-mincho: "Shippori Mincho", var(--font-serif);
  padding-top: var(--header-height);
  color: var(--dn-text);
  letter-spacing: 0;
  line-height: 1.8;
}

.dn-inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}

.dn .sp-only { display: none; }

/* --- ページタイトル --- */
.dn-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  overflow: hidden;
}

/* 背景はデザインどおり上下反転・不透明度50% */
.dn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/top-bg.webp") center / cover no-repeat;
  opacity: 0.5;
  transform: scaleY(-1);
}

.dn-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--dn-mincho);
  font-weight: 700;
  font-size: 40px;
  line-height: 54px;
  color: var(--dn-navy);
  letter-spacing: 0.04em;
}

.dn-hero__title small {
  font-size: 38px;
}

.dn-hero__dot {
  position: absolute;
  top: -19px;
  left: -59px;
  z-index: -1;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--dn-bg-gray);
}

/* --- 導入文 --- */
.dn-intro {
  padding: 64px 24px 88px;
  text-align: center;
}

.dn-intro p {
  font-family: var(--dn-mincho);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.7;
}

/* --- なぜ寄付が必要なのか --- */
.dn-why {
  position: relative;
  padding: 87px 0 154px;
  background: url("img/why-bg.webp") center / cover no-repeat;
}

.dn-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
}

.dn-why .dn-inner {
  position: relative;
  text-align: center;
}

.dn-why__dots {
  display: block;
  margin: 0 auto;
  transform: translateX(-53px);
}

.dn-why__heading {
  font-family: var(--dn-mincho);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.8;
  margin-top: -6px;
}

.dn-why__heading em {
  font-style: normal;
  font-size: 38px;
  color: var(--dn-pink-strong);
}

.dn-why__lead {
  margin-top: 40px;
  font-size: 20px;
}

.dn-why__cards {
  display: flex;
  flex-direction: column;
  gap: 74px;
  max-width: 1000px;
  margin: 76px auto 0;
  text-align: left;
}

.dn-reason {
  padding: 46px 35px 52px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
}

.dn-reason__title {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 55px;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--dn-pink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: #ffffff;
}

.dn-reason__num {
  flex-shrink: 0;
  width: 115px;
  height: 30px;
  border-radius: 10px;
  background: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  color: var(--dn-pink-text);
}

.dn-reason__num b {
  margin-left: 0.4em;
  font-size: 20px;
  font-weight: 400;
}

.dn-reason__text {
  margin-top: 27px;
  font-size: 20px;
  color: var(--dn-gray-text);
}

/* --- いただいたご寄付の使い道 --- */
.dn-use {
  padding: 100px 0 120px;
}

.dn-use__heading {
  padding: 8px 0 8px 10px;
  border-bottom: 1px solid var(--dn-pink);
  font-size: 24px;
  font-weight: 700;
  color: var(--dn-pink);
}

.dn-use__lead {
  margin-top: 24px;
  font-size: 20px;
}

.dn-use__graph {
  display: flex;
  align-items: center;
  margin: 24px 0 0 -24px;
}

.dn-pie {
  position: relative;
  flex-shrink: 0;
  width: 375px;
}

.dn-pie img {
  width: 375px;
  height: auto;
}

.dn-pie__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

/* 位置は Figma の数値（グラフ左上からの中心座標） */
.dn-pie__label--40 { left: 260.5px; top: 165.2px; }
.dn-pie__label--35 { left: 121px;   top: 253.2px; }
.dn-pie__label--15 { left: 88px;    top: 136.2px; }
.dn-pie__label--10 { left: 146.5px; top: 76.2px; }

.dn-legend {
  display: flex;
  flex-direction: column;
  gap: 19px;
  flex: 1;
}

.dn-legend__item {
  display: flex;
  align-items: center;
  gap: 28px;
}

.dn-legend__swatch {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.dn-legend__title {
  font-size: 18px;
  font-weight: 700;
}

.dn-legend__text {
  margin-top: 7px;
  font-size: 17px;
}

/* --- ボタン --- */
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 265px;
  height: 75px;
  padding: 0 28px;
  border-radius: 8.64px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--dn-text);
  transition: opacity 0.2s;
}

.dn-btn img {
  width: 10.368px;
  height: 18.367px;
}

.dn-btn--outline {
  min-width: 268px;
  border: 2px solid var(--dn-navy-line);
  background: var(--dn-bg-gray);
}

.dn-btn--navy {
  color: var(--dn-navy);
}

a.dn-btn:hover {
  opacity: 0.7;
}

/* --- サポーター / 好きな金額で寄付 --- */
.dn-support,
.dn-oneshot {
  padding: 98px 24px;
}

.dn-support {
  background: var(--dn-bg-gray);
}

.dn-oneshot {
  background: url("img/oneshot-bg.webp") center / cover no-repeat;
}

.dn-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: 86px 24px 56px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.dn-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  text-align: left;
}

.dn-card__body--reverse {
  gap: 0;
  padding-left: 30px;
}

.dn-card__img {
  flex-shrink: 0;
  width: 191px;
  height: 191px;
  object-fit: cover;
}

.dn-card__txt {
  width: 660px;
}

.dn-card__body--reverse .dn-card__txt {
  width: 618px;
}

.dn-card__sub {
  position: relative;
  display: inline-block;
  padding: 0 21px;
  margin-left: -21px;
  font-size: 20px;
}

/* 見出し上の「＼ ／」 */
.dn-card__sub::before,
.dn-card__sub::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 2px;
  height: 30px;
  background: currentColor;
}

.dn-card__sub::before { left: 4px;  transform: rotate(-23.39deg); }
.dn-card__sub::after  { right: 4px; transform: rotate(23.39deg); }

.dn-card__title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
}

.dn-card__text {
  margin-top: 28px;
  font-size: 20px;
}

.dn-card__sub--navy,
.dn-card__title--navy,
.dn-card__text--navy {
  color: var(--dn-navy);
}

.dn-card__note {
  max-width: 825px;
  margin: 37px auto 51px;
  padding: 27px 24px;
  border: 1px dashed #efecb5;
  border-radius: 10px;
  font-size: 20px;
}

.dn-card__note--yellow {
  background: #fef9c0;
  color: var(--dn-text);
}

.dn-card__note--pink {
  max-width: 805px;
  margin-top: 53px;
  background: rgba(254, 174, 167, 0.4);
  color: var(--dn-navy);
}

/* --- お振込先 --- */
.dn-bank {
  padding: 100px 0 40px;
  scroll-margin-top: var(--header-height);
}

.dn-bank__heading {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--dn-pink);
}

.dn-bank__lead {
  margin-top: 24px;
  font-size: 18px;
  text-align: center;
}

.dn-bank__table {
  max-width: 800px;
  margin: 40px auto 0;
  border-top: 1px solid #d4d3dd;
}

.dn-bank__table > div {
  display: flex;
  border-bottom: 1px solid #d4d3dd;
}

.dn-bank__table dt {
  flex-shrink: 0;
  width: 200px;
  padding: 20px 24px;
  background: #fff5f4;
  font-size: 18px;
  font-weight: 700;
}

.dn-bank__table dd {
  padding: 20px 24px;
  font-size: 20px;
}

.dn-bank__kana {
  font-size: 16px;
  color: var(--dn-gray-text);
}

/* --- よくあるご質問 --- */
.dn-faq {
  position: relative;
  padding: 92px 0 90px;
  overflow: hidden;
}

.dn-faq::before {
  content: "";
  position: absolute;
  top: 96px;
  right: -180px;
  width: 652px;
  height: 506px;
  background: url("img/faq-grad.webp") center / cover no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

.dn-faq .dn-inner {
  position: relative;
}

.dn-faq__heading {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--dn-pink);
}

.dn-faq__list {
  max-width: 1000px;
  margin: 54px auto 0;
}

.dn-faq__item + .dn-faq__item {
  margin-top: 30px;
}

.dn-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 98px;
  padding: 16px 96px 16px 47px;
  border: 1px solid #d4d3dd;
  border-radius: 49px;
  background: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  list-style: none;
  cursor: pointer;
}

.dn-faq__item summary::-webkit-details-marker {
  display: none;
}

/* ＋／− アイコン */
.dn-faq__item summary::before,
.dn-faq__item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40px; /* 丸の中心（右から47px）に合わせる：47 - 14/2 */
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: #ffffff;
}

.dn-faq__item summary::after {
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.dn-faq__item[open] summary::after {
  transform: rotate(0deg);
}

.dn-faq__item summary {
  background-image: radial-gradient(circle at calc(100% - 47px) 50%, var(--dn-pink) 17px, transparent 17.5px);
}

.dn-faq__item p {
  padding: 18px 50px 0;
  font-size: 20px;
}

/* --- Responsive --- */
@media screen and (max-width: 1100px) {
  .dn .pc-only { display: none; }

  .dn-use__graph {
    flex-direction: column;
    gap: 32px;
    margin-left: 0;
  }

  .dn-card__body,
  .dn-card__body--reverse {
    flex-direction: column;
    padding-left: 0;
    gap: 24px;
  }

  .dn-card__body--reverse .dn-card__img {
    order: -1;
  }

  .dn-card__txt,
  .dn-card__body--reverse .dn-card__txt {
    width: 100%;
    max-width: 660px;
  }
}

@media screen and (max-width: 768px) {
  .dn-hero {
    height: 200px;
  }

  .dn-hero__title {
    font-size: 30px;
    line-height: 1.4;
  }

  .dn-hero__title small {
    font-size: 28px;
  }

  .dn-hero__dot {
    width: 60px;
    height: 60px;
  }

  .dn-intro {
    padding: 40px 20px 48px;
    text-align: left;
  }

  .dn-intro p,
  .dn-why__lead,
  .dn-reason__text,
  .dn-use__lead,
  .dn-card__text,
  .dn-card__note,
  .dn-faq__item p,
  .dn-bank__table dd {
    font-size: 16px;
  }

  .dn-why {
    padding: 56px 0 72px;
  }

  .dn-why__heading {
    font-size: 24px;
  }

  .dn-why__heading em {
    font-size: 27px;
  }

  .dn-why__lead {
    margin-top: 20px;
    text-align: left;
  }

  .dn-why__cards {
    gap: 32px;
    margin-top: 40px;
  }

  .dn-reason {
    padding: 24px 18px 28px;
    border-radius: 20px;
  }

  .dn-reason__title {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 17px;
  }

  .dn-reason__text {
    margin-top: 16px;
  }

  .dn-use {
    padding: 56px 0 64px;
  }

  .dn-use__heading {
    font-size: 20px;
  }

  .dn-pie {
    width: 300px;
    margin: 0 auto;
    transform-origin: top left;
  }

  .dn-pie img {
    width: 300px;
  }

  /* 300/375 に縮小した位置 */
  .dn-pie__label { font-size: 20px; }
  .dn-pie__label--40 { left: 208.4px; top: 132.2px; }
  .dn-pie__label--35 { left: 96.8px;  top: 202.6px; }
  .dn-pie__label--15 { left: 70.4px;  top: 109px; }
  .dn-pie__label--10 { left: 117.2px; top: 61px; }

  .dn-legend__item {
    gap: 16px;
    align-items: flex-start;
  }

  .dn-legend__swatch {
    width: 36px;
    height: 36px;
    margin-top: 4px;
  }

  .dn-legend__title { font-size: 16px; }
  .dn-legend__text { font-size: 15px; }

  .dn-btn,
  .dn-btn--outline {
    min-width: 240px;
    height: 64px;
    font-size: 17px;
  }

  .dn-support,
  .dn-oneshot {
    padding: 48px 16px;
  }

  .dn-card {
    padding: 40px 20px 40px;
  }

  .dn-card__img {
    width: 140px;
    height: 140px;
  }

  .dn-card__txt {
    text-align: center;
  }

  .dn-card__sub {
    font-size: 16px;
    margin-left: 0;
  }

  .dn-card__title {
    font-size: 20px;
  }

  .dn-card__text {
    margin-top: 16px;
    text-align: left;
  }

  .dn-card__note,
  .dn-card__note--pink {
    margin: 28px auto 32px;
    padding: 18px 16px;
    text-align: left;
  }

  .dn-bank {
    padding: 56px 0 24px;
  }

  .dn-bank__heading,
  .dn-faq__heading {
    font-size: 24px;
  }

  .dn-bank__lead {
    font-size: 15px;
    text-align: left;
  }

  .dn-bank__table {
    margin-top: 24px;
  }

  .dn-bank__table > div {
    flex-direction: column;
  }

  .dn-bank__table dt {
    width: auto;
    padding: 10px 16px;
    font-size: 15px;
  }

  .dn-bank__table dd {
    padding: 12px 16px;
  }

  .dn-faq {
    padding: 56px 0 64px;
  }

  .dn-faq::before {
    display: none;
  }

  .dn-faq__list {
    margin-top: 32px;
  }

  .dn-faq__item + .dn-faq__item {
    margin-top: 20px;
  }

  .dn-faq__item summary {
    min-height: 64px;
    padding: 14px 60px 14px 22px;
    border-radius: 32px;
    font-size: 16px;
    background-image: radial-gradient(circle at calc(100% - 32px) 50%, var(--dn-pink) 14px, transparent 14.5px);
  }

  .dn-faq__item summary::before,
  .dn-faq__item summary::after {
    right: 25px;
  }

  .dn-faq__item p {
    padding: 14px 16px 0;
  }
}