@charset "UTF-8";
/* TOP「主な寄附事業」（#initiatives）R8メインプロジェクト版 2026-10-16
   導入ブロック（主導線）→ カード2枚（油津・DENKEN）→ PDFボタン。カードとボタンは style.css の既存部品をそのまま使う */

.top-nw { display: inline-block; font-size: inherit; font-weight: inherit; color: inherit; } /* 語句の途中で折り返さない（style.css の span 一括指定を受けない） */

/* 導入ブロック：左半分＝写真（カードの縦いっぱい）、右半分＝文字 */
.initiatives .top-mp-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 848px; /* 下のカード2枚（404＋40＋404）と幅をそろえる */
  width: calc(100% - 32px); /* 狭い幅でも左右に余白（既存の max-width-1080 と同じ16px） */
  margin: min(40px, 4vw) auto 0;
  border: 2px solid #1B657D;
  border-radius: 14px;
  background-color: #FFFBF5;
  box-shadow: 0 0px 8px rgba(90, 90, 90, 0.1);
  overflow: hidden;
}
.initiatives .top-mp-intro__img {
  margin: 0;
  max-width: none;
  box-shadow: none;
}
.initiatives .top-mp-intro__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%; /* 人力車の人が切れないよう少し左に（Figmaと同じ切り取り） */
  border: none;
  border-radius: 0;
}
.initiatives .top-mp-intro__body {
  display: grid;
  grid-template-columns: minmax(0, max-content); /* まとまりの幅＝いちばん長い行 */
  place-content: center; /* 文字は左揃えのまま、まとまりを右半分の中央に */
  padding: 40px 24px;
}
.initiatives .top-mp-intro__kicker {
  margin: 0;
  font-weight: 700;
  color: #1B657D;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: left;
}
.initiatives .top-mp-intro__ttl {
  margin: 16px 0 0;
  font-family: "Zen Kaku Gothic New";
  font-weight: 900;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #1B657D;
}
.initiatives .top-mp-intro__txt {
  margin: 20px 0 0;
  text-align: left;
}
.initiatives .top-mp-intro .btn {
  margin: 24px 0 0;
}

/* カード2枚：写真の比率を既存カード（3:2）にそろえる */
.initiatives .top-mp-cards .box_img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* カード2枚が縦積みになる幅（879以下）では、導入ブロックも写真を上・文字を下にしてカードと同じ幅に */
@media (max-width: 879px) {
  .initiatives .top-mp-intro {
    grid-template-columns: 1fr;
    max-width: 404px;
  }
  .initiatives .top-mp-intro__img img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: 64% 50%;
  }
  .initiatives .top-mp-intro__body {
    display: block;
    padding: 24px 20px 32px;
  }
  .initiatives .top-mp-intro__kicker,
  .initiatives .top-mp-intro__ttl { text-align: center; }
  .initiatives .top-mp-intro__txt { margin-top: 16px; }
  .initiatives .top-mp-intro .btn { margin: 24px auto 0; }
}
@media (max-width: 768px) {
  .initiatives .top-mp-intro { max-width: 336px; } /* SPのカードと同じ幅 */
}