@charset "utf-8";
/* =========================================================
   日比谷花壇 絆の花プロジェクト
   1.png / 2.png / 3.png に焼き込まれていた文字を HTML 化（2026-09-10）
   基準: 元画像 1366px 幅・コンテンツ幅 1151px
   ========================================================= */


/* ★HTML内のインライン <style> に .pagev-contact IMG { width:100% } があり、
   クラス指定では負けるため、詳細度を上げて打ち消す */
.pagev-contact .hk img {
  max-width: 100%;
  height: auto;
  padding: 0;
}

.pagev-contact .hk {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  background: #fff;
}
/* PCでは .pagev-contact が 1160px に収まっているので余白は要らない。
   それ未満の幅のときだけ左右に余白を取る */
@media screen and (max-width: 1159px) {
  .pagev-contact .hk { padding: 0 5%; }
}
.pagev-contact .hk .hk__inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* 文字サイズ（1160pxで元画像と同寸。狭い画面では縮む） */
.pagev-contact .hk .hk__lead-ttl { font-size: clamp(2.6rem, 4.5vw, 5.2rem); }
.pagev-contact .hk .hk__ttl { font-size: clamp(2.2rem, 4.1vw, 4.8rem); }
.pagev-contact .hk .hk__txt { font-size: clamp(1.4rem, 2.07vw, 2.4rem); }
.pagev-contact .hk .hk__about-txt { font-size: clamp(1.2rem, 1.55vw, 1.8rem); }
.pagev-contact .hk .hk__note { font-size: clamp(1.1rem, 1.55vw, 1.8rem); }

/* ---------- 1枚目：ヘッダー ---------- */
.pagev-contact .hk.hk-hero { padding-top: 6rem; padding-bottom: 6rem; }
@media screen and (min-width: 768px) {
.pagev-contact .hk.hk-hero { padding-top: 9rem; padding-bottom: 9rem; }
}
.pagev-contact .hk .hk-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
.pagev-contact .hk .hk-hero__inner { flex-direction: column; gap: 3rem; }
}
.pagev-contact .hk .hk-hero__logos {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  margin-bottom: clamp(2rem, 3.5vw, 4rem);
}
.pagev-contact .hk .hk-hero__logo-hibiya { width: clamp(20rem, 39vw, 44rem); height: auto; }
.pagev-contact .hk .hk-hero__logo-osuso { width: clamp(5rem, 9.2vw, 10.5rem); height: auto; }
.pagev-contact .hk .hk-hero__ttl {
  font-weight: 700;
  color: #FB5374;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.pagev-contact .hk .hk-hero__sub {
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(1.4rem, 2.2vw, 2.6rem);
}
.pagev-contact .hk .hk-hero__illust {
  width: clamp(14rem, 18vw, 20rem);
  height: auto;
  flex-shrink: 0;
}

/* ---------- 2枚目：想い ---------- */
.pagev-contact .hk.hk-story { padding-top: 4rem; padding-bottom: 8rem; }
@media screen and (min-width: 768px) {
.pagev-contact .hk.hk-story { padding-top: 6rem; padding-bottom: 12rem; }
}
.pagev-contact .hk .hk-story__ttl {
  font-weight: 700;
  color: #FB5374;
  line-height: 1.4;
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 6rem);
}
.pagev-contact .hk .hk-story__body {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
}
@media screen and (max-width: 767px) {
.pagev-contact .hk .hk-story__body { flex-direction: column; }
}
.pagev-contact .hk .hk-story__mark {
  width: clamp(14rem, 19.5vw, 22rem);
  height: auto;
  flex-shrink: 0;
}
.pagev-contact .hk .hk-story__texts { flex: 1; text-align: center; }
.pagev-contact .hk .hk__txt {
  font-weight: 700;
  line-height: 1.55;
}
.pagev-contact .hk .hk__txt + .hk__txt { margin-top: clamp(1.8rem, 2.6vw, 3rem); }
.pagev-contact .hk .hk__txt em { font-style: normal; color: #FB5374; }

/* ---------- 3枚目：OSUSOとは / 支援先の前置き ---------- */
.pagev-contact .hk.hk-about { padding-top: 4rem; padding-bottom: 6rem; }
.pagev-contact .hk .hk-about__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 3.5vw, 4rem);
}
@media screen and (max-width: 767px) {
.pagev-contact .hk .hk-about__body { flex-direction: column; align-items: center; }
}
.pagev-contact .hk .hk-about__illust {
  width: clamp(12rem, 14vw, 16rem);
  height: auto;
  flex-shrink: 0;
}
.pagev-contact .hk .hk-about__texts { flex: 1; }
.pagev-contact .hk .hk-about__ttl {
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.3rem, 1.6vw, 1.85rem);
  margin-bottom: 1.2rem;
}
.pagev-contact .hk .hk__about-txt {
  font-weight: 700;
  line-height: 1.85;
  text-align: justify;
}

.pagev-contact .hk.hk-target { padding-top: 6rem; padding-bottom: 4rem; text-align: center; }
@media screen and (min-width: 768px) {
.pagev-contact .hk.hk-target { padding-top: 10rem; }
}
.pagev-contact .hk .hk-target__ttl {
  font-weight: 700;
  color: #FB5374;
  line-height: 1.35;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.6rem);
}
.pagev-contact .hk .hk__note {
  font-weight: 700;
  line-height: 1.75;
}