/* 入会案内：新デザイン案（v2）のページ専用分
   共通の部品は v2.css・v2-pages.css。ここには、このページにしかない組み方だけを置く。 */


/* ===== 1. 要点：金額を大きな数字に、4つを縦の罫線で区切る ===== */
.jn-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1.2fr)) repeat(2,minmax(0,1fr));margin:0;border-left:1px solid var(--line)}
.jn-facts>div{padding:4px 24px;border-right:1px solid var(--line)}
.jn-facts dt{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:6px}
.jn-facts dd{margin:0;font-size:17px;font-weight:700;color:var(--navy);line-height:1.5}
.jn-facts>div:nth-child(-n+2) dd{white-space:nowrap}
.jn-facts dd b{font-size:clamp(30px,3.3vw,40px);line-height:1.1;margin:0 2px}
.jn-facts small{display:block;white-space:normal;font-size:13px;font-weight:400;color:var(--sub);margin-top:6px;line-height:1.6}
@media (max-width:860px){
  .jn-facts{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;border-top:1px solid var(--line)}
  .jn-facts>div{padding:16px 12px 16px 0;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:480px){.jn-facts{grid-template-columns:minmax(0,1fr)}}

/* ===== 3. 一緒につくる：見出しの一文（h3 として置くので見出しの既定値を打ち消す） ===== */
.v2-join h3.v2-statement{font-size:clamp(22px,3vw,32px)}

/* ===== 4. 目指す姿：番号つきの大きな見出し＋説明 ===== */
.jn-after{list-style:none;counter-reset:a;border-top:1px solid var(--line);margin:0;padding:0}
.jn-after li{counter-increment:a;display:grid;grid-template-columns:2.4em minmax(0,1fr);padding:22px 0;border-bottom:1px solid var(--line)}
.jn-after li::before{content:counter(a);grid-row:1 / span 2;font-size:14px;font-weight:700;color:var(--green);padding-top:.3em}
.jn-after h3{font-size:clamp(16px,1.9vw,19px);line-height:1.6;margin:0 0 6px}
.jn-after p{font-size:14px;color:var(--sub);line-height:1.85;margin:0}

/* ===== 5. 会員の特典：番号つきの2列、上の罫線だけで区切る ===== */
.jn-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin:32px 0 20px}
.jn-benefits>div{display:grid;grid-template-columns:3em minmax(0,1fr);padding:24px 0;border-top:1px solid var(--line);align-content:start}
.jn-benefits .n{grid-row:1 / span 2;font-size:22px;font-weight:700;color:var(--green);line-height:1.2}
.jn-benefits h3{font-size:17px;line-height:1.6;margin:0 0 8px}
.jn-benefits p{font-size:14px;line-height:1.9;margin:0}
.jn-benefits+.v2-small{margin:0 0 0}
@media (max-width:860px){.jn-benefits{grid-template-columns:minmax(0,1fr)}}

/* ===== 6. 会費（紺の面）：表の枠をやめ、お支払いの金額を大きく ===== */
.v2-navy .jn-fees{color:#fff}
.v2-navy .jn-fees thead th{color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.7)}
.v2-navy .jn-fees th,.v2-navy .jn-fees td{border-bottom-color:rgba(255,255,255,.22)}
.v2-navy .jn-fees tbody th{color:#fff}
.jn-fees td,.jn-fees tbody th{vertical-align:middle}
.jn-fees .yen{font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.1;white-space:nowrap}
.jn-fees .num{white-space:nowrap}
.jn-notes{margin:20px 0 0;padding-left:1.2em;font-size:14px;line-height:1.85;color:var(--sub);max-width:52em}
.jn-notes li+li{margin-top:4px}
.v2-navy .jn-notes{color:rgba(255,255,255,.82)}
.jn-act{margin:32px 0 0}

/* ===== 8. 仮入会：左右の定義の一覧 ===== */
.jn-trial{margin:32px 0 40px}
.jn-trial>div{grid-template-columns:11em minmax(0,1fr);gap:32px;padding:24px 0}
.jn-trial dt{font-size:17px;color:var(--navy)}
.jn-trial dd p{margin:0 0 12px}
.jn-trial dd p:last-child{margin-bottom:0}
.jn-list{margin:0;padding-left:1.2em;font-size:15px;line-height:1.85}
.jn-list li+li{margin-top:4px}
.jn-trial+.v2-aside{margin:0 0 40px}

/* 表（例・返金）：罫線だけ。キャプションは左寄せの小さな文字 */
.jn-tbl caption{text-align:left;font-size:14px;color:var(--sub);padding-bottom:8px;caption-side:top}
.jn-tbl tbody th{width:30%}
.jn-tbl td b{font-size:inherit}

/* スマホ：表を縦積みにする（site.js が見出しを data-label に入れる） */
@media (max-width:640px){
  .v2-price.stack thead{display:none}
  .v2-price.stack,.v2-price.stack tbody,.v2-price.stack tr,.v2-price.stack th,.v2-price.stack td{display:block;width:100%}
  .v2-price.stack caption{display:block}
  .v2-price.stack tbody{border-top:2px solid var(--navy)}
  .v2-price.stack tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .v2-price.stack th,.v2-price.stack td{border:0;padding:4px 0}
  .v2-price.stack tbody th{width:auto;font-size:16px;padding-bottom:6px}
  .v2-price.stack td{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px}
  .v2-price.stack td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--sub);line-height:1.8}
  .v2-navy .v2-price.stack tbody{border-top-color:rgba(255,255,255,.7)}
  .v2-navy .v2-price.stack tr{border-bottom-color:rgba(255,255,255,.22)}
  .v2-navy .v2-price.stack td::before{color:rgba(255,255,255,.7)}
  .jn-trial>div{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* ===== 10. 行動規範：罫線の一覧 ===== */
.jn-rules{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.jn-rules li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.v2-join .v2-split-head+div>.v2-h4:first-child{margin-top:0}
.jn-ng::before{background:var(--navy)}