/* =========================================================
   入会案内（sub.css の後に読む）
   ========================================================= */
:root{--page-hero-img:var(--img-join-hero);}

/* ---------- 入会資格 ---------- */
.qual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.qual{position:relative;overflow:hidden;padding:30px 28px 28px;background:#fff;
      border:1px solid var(--line);border-radius:var(--r-card);}
/* 番号は「3つのうちの何番目か」を示すだけ。色は約物として添える */
.qual__num{display:block;font-family:var(--font-en);font-size:34px;font-weight:800;line-height:1;
           letter-spacing:var(--track-num);color:var(--q-ink);
           transform:scaleX(var(--cond-x));transform-origin:left center;}
.qual__bar{display:block;width:34px;height:3px;margin:14px 0 16px;border-radius:2px;background:var(--q-ink);}
.qual h3{font-size:16px;font-weight:700;line-height:1.65;color:var(--ink);}
.qual p{margin-top:12px;font-size:13px;line-height:1.95;color:var(--muted);}
.qual:nth-child(1){--q-ink:var(--ac-blue);}
.qual:nth-child(2){--q-ink:var(--teal-600);}
.qual:nth-child(3){--q-ink:#5c74c4;}
/* 法令上の但し書き。STEP の並びの締めなので、枠で囲って中央に置く（中の文字は左寄せ） */
.steps__note{max-width:900px;margin:52px auto 0;padding:24px 34px;
             border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);
             font-size:12.5px;line-height:2.05;color:var(--muted);}

/* ---------- 加入手続きの流れ ---------- */
/* 手順は本当に順序があるので、番号と横線でその順序を出す */
.steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.step{position:relative;}
/* 線は「次の丸へ渡る」ぶんだけ。帯を通しで引くと最後の丸から先に線が余る */
.step:not(:last-child)::after{content:"";position:absolute;left:58px;right:-30px;top:23px;
                              height:2px;background:var(--line);}
.step__num{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
           background:var(--blue-600);color:#fff;
           font-family:var(--font-en);font-size:15px;font-weight:800;letter-spacing:.02em;
           box-shadow:0 0 0 6px var(--bg-soft);}
.step__label{margin-top:18px;font-family:var(--font-en);font-size:10.5px;font-weight:700;
             letter-spacing:var(--track-label);color:var(--blue-300);}
.step h3{margin-top:8px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ink);}
.step__txt{margin-top:10px;font-size:12.5px;line-height:1.9;color:var(--muted);}

/* ---------- 出資金・賦課金 ---------- */
.fees{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.fee{padding:30px 30px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);}
.fee__ttl{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--ink);}
.fee__ttl span{font-size:11.5px;font-weight:500;color:var(--muted);}
.fee__val{margin-top:18px;font-family:var(--font-en);font-size:44px;font-weight:800;line-height:1;
          letter-spacing:var(--track-num);color:var(--fee-ink,var(--ac-blue));
          transform:scaleX(var(--cond-x));transform-origin:left center;}
.fee__val i{font-style:normal;font-family:var(--font-jp);font-size:19px;margin-left:2px;}
.fee__val em{display:inline-block;font-style:normal;font-family:var(--font-jp);font-size:14px;
             font-weight:700;color:var(--muted);margin-right:10px;vertical-align:middle;}
.fee__note{margin-top:16px;font-size:12.5px;line-height:1.9;color:var(--muted);}
.fee:nth-child(2){--fee-ink:var(--teal-600);}

/* ---------- 各種資料 ---------- */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.doc{display:flex;align-items:center;gap:18px;padding:22px 24px;background:#fff;
     border:1px solid var(--line);border-radius:var(--r-card);transition:.28s;}
.doc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--blue-300);}
.doc__file{flex:none;display:grid;place-items:center;width:44px;height:54px;border-radius:6px;
           font-family:var(--font-en);font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;
           background:var(--doc-ink);}
.doc--pdf{--doc-ink:#d2554a;}
.doc--word{--doc-ink:#2b5aa8;}
.doc__body{min-width:0;}
.doc__body h3{font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink);}
.doc__body span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);}
.doc__dl{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:var(--blue-600);
         white-space:nowrap;}

/* ---------- 加入に関するお問い合わせ ---------- */
.join-cta{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;
          padding:38px 40px;border-radius:var(--r-card);
          background:linear-gradient(120deg,#eef5fd 0%,#e6f3ee 100%);}
.join-cta h2{font-size:21px;font-weight:700;color:var(--ink);}
.join-cta p{margin-top:12px;font-size:13.5px;line-height:1.95;color:var(--muted);max-width:60ch;}

@media (max-width:1000px){
  .qual-grid{grid-template-columns:1fr;gap:16px;}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 20px;}
  .step:not(:last-child)::after{display:none;}
  .docs{grid-template-columns:1fr;gap:14px;}
  .join-cta{grid-template-columns:1fr;gap:24px;padding:30px 26px;}
}
@media (max-width:600px){
  .steps__note{margin-top:34px;padding:18px 18px;}
  .fees{grid-template-columns:1fr;gap:14px;}
  .fee__val{font-size:34px;}
  .steps{grid-template-columns:1fr;gap:22px;}
  .step__num{width:42px;height:42px;font-size:13px;}
  .step__label{margin-top:14px;}
}