/* ===================================================
   support_v2.css  — 支援するページ専用スタイル
   v2.0 / 2026-06-27
   =================================================== */

/* --- Design Tokens --- */
:root {
  --sp2-orange:       #ea5514;
  --sp2-orange-hover: #c74710;
  --sp2-orange-light: #fff3ee;
  --sp2-bg-warm:      #fdf9f6;
  --sp2-bg-white:     #ffffff;
  --sp2-text:         #313131;
  --sp2-text-muted:   rgba(49,49,49,0.6);
  --sp2-border:       #e5ddd5;
}

/* --- Container --- */
.sp2-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
@media screen and (max-width: 789px) {
  .sp2-container { padding: 0 20px; }
}

/* --- Sections --- */
.sp2-section {
  padding: 88px 0;
  background: var(--sp2-bg-white);
}
.sp2-section--warm {
  background: var(--sp2-bg-warm);
}
@media screen and (max-width: 789px) {
  .sp2-section { padding: 60px 0; }
}

/* --- Section Head --- */
.sp2-sec-head {
      display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  margin-bottom: 52px;
}
.sp2-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sp2-orange);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'Lato', myriad-pro, sans-serif;
}
.sp2-sec-title {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--sp2-text);
  line-height: 1.55;
  margin: 0 0 52px;
  display: block;
}
.sp2-sec-head .sp2-sec-title {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}
.sp2-sec-sub {
  font-size: clamp(14px, 1.7vw, 16px);
  color: var(--sp2-text);
  line-height: 1.9;
  margin: 0 auto;
  max-width: 660px;
	text-align: center;
}
@media screen and (max-width: 789px) {
	.sp2-sec-title {margin-bottom: 36px;}
  .sp2-sec-head { margin-bottom: 36px; }
}
/* --- Buttons --- */
.sp2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 34px;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.28s, color 0.28s, transform 0.28s, box-shadow 0.28s, border-color 0.28s;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.sp2-btn--primary {
  background: var(--sp2-orange);
  color: #fff;
  border-color: var(--sp2-orange);
}
.sp2-btn--primary:link,
.sp2-btn--primary:visited { color: #fff; }
.sp2-btn--primary:hover {
  background: var(--sp2-orange-hover);
  border-color: var(--sp2-orange-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(234,85,20,0.32);
  text-decoration: none;
}

.sp2-btn--outline {
  background: transparent;
  color: var(--sp2-orange);
  border-color: var(--sp2-orange);
}
.sp2-btn--outline:link,
.sp2-btn--outline:visited { color: var(--sp2-orange); }
.sp2-btn--outline:hover {
  background: var(--sp2-orange);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.sp2-btn--white {
  background: #fff;
  color: var(--sp2-orange);
  border-color: #fff;
}
.sp2-btn--white:link,
.sp2-btn--white:visited { color: var(--sp2-orange); }
.sp2-btn--white:hover {
  background: #f5f0eb;
  color: var(--sp2-orange);
  transform: translateY(-2px);
  text-decoration: none;
}

.sp2-btn--white-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.75);
}
.sp2-btn--white-outline:link,
.sp2-btn--white-outline:visited { color: #fff; }
.sp2-btn--white-outline:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.sp2-btn--lg   { padding: 17px 48px; font-size: 17px; }
.sp2-btn--full { width: 100%; }

.sp2-btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 560px) {
  .sp2-btn-row { flex-direction: column; align-items: center; }
  .sp2-btn-row .sp2-btn { width: 100%; max-width: 320px; }
}

/* =====================================================
   1. INTRO
   ===================================================== */
.sp2-intro {
  background: var(--sp2-bg-warm);
  padding: 88px 0;
}
@media screen and (max-width: 789px) {
  .sp2-intro { padding: 60px 0; }
}

.sp2-intro__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.sp2-intro__title {
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 36px;
  color: var(--sp2-text);
}

.sp2-intro__lead {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--sp2-text);
  line-height: 2.0;
  margin: 0 0 18px;
}

.sp2-intro__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
}
@media screen and (max-width: 560px) {
  .sp2-intro__cta { flex-direction: column; align-items: center; }
  .sp2-intro__cta .sp2-btn { width: 100%; max-width: 320px; }
}

/* =====================================================
   2. METHOD CARDS（支援方法3択）
   ===================================================== */
.sp2-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media screen and (max-width: 900px) {
  .sp2-method-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sp2-method-card {
  background: var(--sp2-bg-white);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp2-method-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.13);
}
.sp2-method-card--featured {
  border-color: var(--sp2-orange);
}

.sp2-method-card__badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sp2-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;
}

.sp2-method-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ddd7cf;
}
.sp2-method-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.sp2-method-card:hover .sp2-method-card__img img {
  transform: scale(1.05);
}

.sp2-method-card__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sp2-method-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.45;
  color: var(--sp2-text);
}
.sp2-method-card__desc {
  font-size: 14px;
  color: var(--sp2-text);
  line-height: 1.85;
  margin: 0 0 24px;
  flex: 1;
}

/* =====================================================
   3. DONATION USE（ご寄付の使い道）
   ===================================================== */
.sp2-use-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 52px 60px;
}
@media screen and (max-width: 900px) {
  .sp2-use-grid { gap: 36px; }
}
@media screen and (max-width: 789px) {
  .sp2-use-grid { grid-template-columns: 1fr; gap: 36px; }
}

.sp2-use-card:nth-child(even) { margin-top: 60px; }
@media screen and (max-width: 789px) {
  .sp2-use-card:nth-child(even) { margin-top: 0; }
}

.sp2-use-card {
  display: flex;
  flex-direction: column;
}

.sp2-use-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  background: #ddd7cf;
  margin-bottom: 22px;
}
.sp2-use-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sp2-use-card:hover .sp2-use-card__img img {
  transform: scale(1.04);
}

.sp2-use-card__body { display: flex; flex-direction: column; flex: 1; }

.sp2-use-card__title {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.45;
  color: var(--sp2-text);
}
.sp2-use-card__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--sp2-text);
  margin: 0 0 20px;
  flex: 1;
}

/* =====================================================
   4. HOW TO SUPPORT（ご支援の方法 3カード）
   ===================================================== */
.sp2-howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media screen and (max-width: 900px) {
  .sp2-howto-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sp2-howto-card {
  background: var(--sp2-bg-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp2-howto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}

.sp2-howto-card__img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #ddd7cf;
}
.sp2-howto-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sp2-howto-card:hover .sp2-howto-card__img img {
  transform: scale(1.04);
}

.sp2-howto-card__body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sp2-howto-card__title {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.4;
  color: var(--sp2-text);
}
.sp2-howto-card__sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--sp2-text-muted);
  display: block;
  margin-top: 3px;
}
.sp2-howto-card__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--sp2-text);
  margin: 0 0 20px;
  flex: 1;
}

/* =====================================================
   5. PARTNER CARDS（法人・行政・市民）
   ===================================================== */
.sp2-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media screen and (max-width: 900px) {
  .sp2-partner-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sp2-partner-card {
  background: var(--sp2-bg-warm);
  border: 1px solid var(--sp2-border);
  border-radius: 16px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp2-partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

.sp2-partner-card__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--sp2-text);
  line-height: 1.4;
}
.sp2-partner-card__desc {
  font-size: 14px;
  color: var(--sp2-text);
  line-height: 1.85;
  margin: 0 0 24px;
  flex: 1;
}

.sp2-partner-card__sub {
  margin-top: 14px;
  text-align: center;
}
.sp2-partner-card__sub a {
  font-size: 13px;
  color: var(--sp2-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp2-partner-card__sub a:hover {
  color: var(--sp2-orange-hover);
}

/* =====================================================
   6. OTHER SUPPORT（その他の支援方法）
   ===================================================== */
.sp2-other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media screen and (max-width: 1000px) {
  .sp2-other-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
  .sp2-other-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

.sp2-other-card {
  background: var(--sp2-bg-white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sp2-border);
  text-decoration: none;
  color: var(--sp2-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp2-other-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  text-decoration: none;
  color: var(--sp2-text);
}

.sp2-other-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ddd7cf;
}
.sp2-other-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sp2-other-card:hover .sp2-other-card__img img {
  transform: scale(1.05);
}

.sp2-other-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sp2-other-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.5;
}
.sp2-other-card__link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--sp2-orange);
  text-decoration: none;
}
.sp2-other-card__link::after { content: ' →'; }
.sp2-other-card:hover .sp2-other-card__link { text-decoration: underline; }

/* =====================================================
   7. FAQ
   ===================================================== */
.sp2-faq {
  padding: 72px 0;
  background: var(--sp2-bg-warm);
  text-align: center;
}
@media screen and (max-width: 789px) {
  .sp2-faq { padding: 52px 0; }
}

.sp2-faq__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--sp2-text);
}
.sp2-faq__text {
  font-size: 15px;
  color: var(--sp2-text);
  line-height: 1.9;
  max-width: 560px;
  margin: 0 auto 32px;
}

/* =====================================================
   8. FINAL CTA
   ===================================================== */
.sp2-final-cta {
  padding: 100px 0;
  background: linear-gradient(130deg, #ea5514 0%, #f57c3a 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 789px) {
  .sp2-final-cta { padding: 72px 0; }
}

.sp2-final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
.sp2-final-cta__title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
  color: #fff;
  line-height: 1.65;
  margin: 0 0 22px;
}
.sp2-final-cta__text {
  font-size: clamp(14px, 1.7vw, 16px);
  color: rgba(255,255,255,0.90);
  line-height: 2.0;
  margin: 0 auto 40px;
  max-width: 620px;
}