/* ============================================================
   後援会紹介・入会 (houjin-kouenkai.html)
   設計: 05-後援会紹介・入会 1-4 (1000pt幅ラスタ2084px ÷1.5 = CSS 1389px)
   実測: 帯 #EBF5F0 全面 / ピル #A5C3BA / ピンク強調 #EC78AB /
         DLリンク #93D2D3 / 会長写真 184x223
   接頭辞: hjk-
   ============================================================ */

.hjk-band{background:#EBF5F0}
.hjk-wrap{max-width:1389px;margin:0 auto;font-family:var(--font-g);color:#000;
  font-weight:300;  /* 設計=GShinMGoPro-Light */
  font-size:18px;line-height:30.6px;letter-spacing:.135em}
.hjk-wrap ul{list-style:none}
.hjk-wrap strong{font-weight:600}

/* ---------- 見出し + 点線 ---------- */
.hjk-title{
  padding-top:268px;text-align:center;
  font-family:var(--font-r);color:#000;font-weight:600;
  font-size:29px;line-height:1;letter-spacing:.09em;text-indent:.09em;
}
.hjk-dots{
  height:6px;width:1167px;max-width:92%;margin:0 auto;
  background-image:radial-gradient(circle,rgba(0,0,0,.8) 1.95px,transparent 2.15px);
  background-size:11.9px 6px;background-position:center;background-repeat:round;
}
.hjk-dots--1{margin-top:42px}
.hjk-dots--2{margin-top:69px}
.hjk-dots--3{margin-top:70px}  /* Web=連続1枚のためアートボード境界の余白は排し、ページ内リズムに合わせる */
.hjk-dots--5{margin-top:59px}

/* ---------- 写真 + キャプション ---------- */
.hjk-photo{margin:48px 0 0 407px;width:602px}
.hjk-photo img{width:602px;height:403px;object-fit:cover;border-radius:24px}
.hjk-caption{
  margin-top:63px;text-align:center;
  font-size:19px;font-weight:600;line-height:1;letter-spacing:.1em;text-indent:.1em;
}
/* 「入会のご案内」を分割不可の塊に (SP 390px で「内」1文字孤立を防ぐ。PCは1行のまま不変) */
.hjk-nobr{display:inline-block;text-indent:0}

/* ---------- 会長挨拶 (写真後送プレースホルダー + 本文) ---------- */
.hjk-intro{position:relative;margin:39px 110px 0 336px}
/* 岩﨑会長 写真 (2026-07-30 受領)。設計 05-kouenkai-1 の枠と同寸・同位置 */
.hjk-kaicho{
  position:absolute;left:-223px;top:8px;width:184px;height:223px;
  object-fit:cover;border-radius:3px;
}
.hjk-intro p + p{margin-top:30px}
.hjk-intro .hjk-gap-page{margin-top:30px}  /* Web=連続1枚のためアートボード境界の余白は排し、ページ内リズムに合わせる */
.hjk-sign{text-align:right}

/* ---------- ダウンロードリンク (teal) ---------- */
.hjk-dl{margin-left:113px}
.hjk-dl li{position:relative;padding-left:31px}
.hjk-dl li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:13px;
  border-radius:50%;background:#93D2D3;
}
.hjk-dl a{color:#93D2D3;font-weight:500;letter-spacing:.1em;transition:opacity .3s}
.hjk-dl a:hover{opacity:.6;text-decoration:underline}
.hjk-dots--2 + .hjk-dl{margin-top:65px}

/* ---------- ○リスト / 会費 ---------- */
.hjk-notes{margin-left:113px}
.hjk-notes li{position:relative}
.hjk-ring{padding-left:31px}
.hjk-ring::before{
  content:"";position:absolute;left:0;top:8.5px;width:10.5px;height:10.5px;
  border-radius:50%;border:1.6px solid #000;
}
.hjk-fee{padding-left:31px}
.hjk-notes--howto{margin-top:102px}

/* ---------- 申込フォーム導線 (2026-08-06 先方指示で中央揃え + リード文) ---------- */
/* 完成イメージ実測(ピル高48pxを基準に換算): 点線→リード42 / リード→ピル67 /
   ピル間63 / ピル→点線94 */
.hjk-formlead{
  text-align:center;font-family:var(--font-r);font-weight:600;
  font-size:19px;line-height:1.4;letter-spacing:.1em;text-indent:.1em;
}
.hjk-dots--3 + .hjk-formlead{margin-top:38px}
.hjk-formlead + .hjk-pillrow{margin-top:63px}
.hjk-pillrow + .hjk-pillrow{margin-top:63px}
.hjk-pillrow + .hjk-dots{margin-top:94px}
.hjk-pillrow{position:relative}
.hjk-pill{
  width:650px;max-width:100%;margin:0 auto;height:48px;border-radius:24px;background:#A5C3BA;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-r);color:#fff;font-weight:600;
  font-size:28px;line-height:1;letter-spacing:.05em;
  /* 2026-07-30 木村様指示: ピル自体がフォームへのリンクになった(▶個人/▶法人・団体は削除) */
  text-decoration:none;cursor:pointer;transition:background .3s var(--ease-soft);
}
.hjk-pill:hover{background:#8FB3A7}
.hjk-pill em{font-style:normal;color:#EC78AB}
/* .hjk-pill-txt: flex子を1つにまとめるラッパー。
   直下にテキストノード+<em>を置くと匿名flexアイテム3個に分割され、
   375px幅で縦積み崩壊するため span で1アイテム化 (PC/390pxの見た目は不変) */
.hjk-pill-txt{text-align:center}

/* ---------- 税控除・注意書き ---------- */
.hjk-tax{margin-left:79px}
.hjk-tax p:first-child{margin-top:53px}
.hjk-tax p + p{margin-top:31px}

/* ---------- 後援会の主な支援 ---------- */
.hjk-shien{margin-left:79px}
.hjk-shien-head{margin-top:72px}  /* Web=連続1枚のためアートボード境界の余白は排し、ページ内リズムに合わせる */
.hjk-shien .hjk-notes{margin-left:0;margin-top:30px}
.hjk-shien .hjk-dl{margin-left:0;margin-top:30px}
.hjk-namecol{margin-top:30px}
.hjk-namecol + .hjk-namecol{margin-top:31px}

/* ---------- 帯終端 (ペール → 白の波) ---------- */
.hjk-band{padding-bottom:112px}
.hjk-wave-out{background:#fff;line-height:0}

/* フッターは共通コピー。設計は波直後にナビが来るため上余白のみ縮める
   (このCSSは本ページでしか読み込まれない) */
@media (min-width:860px){
  .houjin .hj-foot__nav{padding-top:3px}
}

/* ============================================================
   SP (〜859px): 配色・書体・素材維持のモバイル最適化リフロー
   ============================================================ */
@media (max-width:859px){
  .hjk-wrap{font-size:14.5px;line-height:26px;letter-spacing:.08em;
    padding-left:18px;padding-right:18px}

  .hjk-title{padding-top:112px;font-size:20px;letter-spacing:.09em}
  .hjk-dots{width:86%;background-size:10px 5px;height:5px}
  .hjk-dots--1{margin-top:14px}
  .hjk-dots--2{margin-top:36px}
  .hjk-dots--3{margin-top:64px}
  .hjk-dots--5{margin-top:36px}

  .hjk-photo{margin:28px auto 0;width:min(86%,340px)}
  .hjk-photo img{width:100%;height:auto;aspect-ratio:602/403;border-radius:14px}
  .hjk-caption{margin-top:30px;font-size:15.5px;line-height:1.6;padding:0 8px}

  .hjk-intro{margin:24px 0 0}
  .hjk-kaicho{position:static;display:block;width:152px;height:184px;margin:0 auto 22px}  /* PCと同じ写真比(184:223)を維持 */
  .hjk-intro p + p{margin-top:18px}
  .hjk-intro .hjk-gap-page{margin-top:26px}

  .hjk-dl{margin-left:0}
  .hjk-dl li{padding-left:24px}
  .hjk-dl li::before{width:11px;height:11px;top:8px}
  .hjk-dl a{display:inline-block;padding:11px 0;line-height:1.6}
  .hjk-dots--2 + .hjk-dl{margin-top:30px}

  .hjk-notes{margin-left:0}
  .hjk-notes--howto{margin-top:40px}
  .hjk-notes li{padding-left:24px}
  .hjk-notes li + li{margin-top:8px}
  .hjk-ring::before{top:7px;width:9px;height:9px;border-width:1.4px}

  .hjk-pillrow{margin-left:0}
  .hjk-formlead{font-size:15.5px;line-height:1.7;padding:0 4px}
  .hjk-dots--3 + .hjk-formlead{margin-top:26px}
  .hjk-formlead + .hjk-pillrow{margin-top:24px}
  .hjk-pillrow + .hjk-pillrow{margin-top:24px}
  .hjk-pillrow + .hjk-dots{margin-top:40px}
  .hjk-pill{width:100%;height:auto;min-height:44px;border-radius:24px;
    font-size:16.5px;line-height:1.4;padding:10px 16px;text-align:center}


  .hjk-tax{margin-left:0}
  .hjk-tax p:first-child{margin-top:26px}
  .hjk-tax p + p{margin-top:18px}

  .hjk-shien{margin-left:0}
  .hjk-shien-head{margin-top:56px}
  .hjk-shien .hjk-notes{margin-top:16px}
  .hjk-shien .hjk-dl{margin-top:20px}
  .hjk-namecol{margin-top:20px}

  .hjk-band{padding-bottom:48px}
}