/* ── このページ専用（接頭辞 .mn-）。子テーマへ移すときは mc.css へ移して ?v= を上げる ── */

/* 章の目次。条文ページ（.doc-toc）と同じ考え方だが、章が5つと少ないので1列×大きめ */
.mn-toc{max-width:41rem;counter-reset:mn}
.mn-toc a{counter-increment:mn;display:grid;grid-template-columns:auto 1fr auto;gap:22px;
  align-items:baseline;padding:20px 6px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:.3s}
.mn-toc a::before{content:counter(mn,decimal-leading-zero);font-family:var(--en);
  font-size:13px;font-weight:700;letter-spacing:.1em;color:#9fc4cf;transition:.3s}
.mn-toc a b{font-size:17px;font-weight:600;letter-spacing:.05em;color:#12303a;line-height:1.7;transition:.3s}
.mn-toc a em{font-style:normal;font-family:var(--en);font-size:10.5px;font-weight:700;
  letter-spacing:.22em;color:#a8bfc7;white-space:nowrap}
.mn-toc a:hover{padding-left:14px}
.mn-toc a:hover::before{color:var(--pk)}
.mn-toc a:hover b{color:var(--aq-t)}

/* ヒーローの看板＝入会後の5ステップの階段（2026-08-11 「顔がない」指摘への対応）。
   押すと該当STEPの開閉が開いてそこへ移動（/branch/ のタイルと同じ操作言語）。
   ラベルはナビ用の短縮形（本文の文言はSTEP側に元のまま残っている） */
/* 上下の余白は「タグ帯（見本だけの黒い行・38px）が無い本番で、
   ヘッダー＋見出し＋リード＋階段が1画面に収まる」ことを基準に詰めてある。
   ここを広げると階段の下段が画面から出る */
.mn-hero5{margin:16px 0 76px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
  align-items:end;max-width:1080px}
.mn-hero5-lab{margin-top:34px;display:flex;align-items:center;gap:14px;
  font-size:13.5px;letter-spacing:.06em;color:#5a6b73}
.mn-hero5-lab::before{content:"";width:26px;height:1px;background:var(--aq);flex:none}
.mn-hero5-lab b{font-weight:600;color:#12303a}
/* display:flex にしないと、button 既定の上下中央寄せで
   高さが違うタイル同士の文字の頭が揃わない。
   階段の段差は margin-bottom（レイアウト）で作る。transform で作ると
   reveal-2 の reduced-motion 指定 `[data-mlr] > *{transform:none!important}` に
   巻き込まれて、動きを切っている人の画面では段差が消える */
.mn-hero5 button{--rise:0px;position:relative;display:flex;flex-direction:column;
  align-items:flex-start;width:100%;text-align:left;margin-bottom:var(--rise);
  border:1px solid #dcebf1;border-radius:18px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);padding:20px 18px 18px;cursor:pointer;
  font-family:inherit;
  transition:.35s cubic-bezier(.2,.7,.3,1);box-shadow:0 18px 44px -30px rgba(18,48,58,.35)}
.mn-hero5 button:hover,.mn-hero5 button:focus-visible{border-color:#14bedc;
  transform:translateY(-6px);box-shadow:0 26px 54px -30px #14bedc}
.mn-hero5 .no{display:flex;align-items:baseline;gap:6px;font-family:var(--en)}
.mn-hero5 .no em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.22em;color:#8fb9c6}
.mn-hero5 .no b{font-size:34px;font-weight:600;line-height:1;color:#14bedc}
.mn-hero5 button:nth-child(5) .no b{color:var(--pk)}
.mn-hero5 h3{margin:10px 0 0;font-size:14.5px;font-weight:600;letter-spacing:.05em;
  line-height:1.7;color:#12303a;overflow-wrap:anywhere} /* 「Facebook」がタイルからはみ出すため */
.mn-hero5 .go7{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;font-family:var(--en);color:#8fb9c6;
  transition:.3s}
.mn-hero5 button:hover .go7{color:#0e97b0}
.mn-hero5 .go7 i{font-style:normal;transition:transform .3s}
.mn-hero5 button:hover .go7 i{transform:translateY(3px)}
/* 右肩上がりの階段。01が低く05が高い。
   10px刻みだと「なんとなくズレている」程度にしか見えないので28px刻みにし、
   さらに**踏み板と蹴上げの線**（::after=横／::before=縦）でタイル同士をつないで
   階段の形そのものを描く（菅さん指摘 2026-08-11「もっと階段に見せたい」） */
.mn-hero5 button:nth-child(1){--rise:0px}
.mn-hero5 button:nth-child(2){--rise:24px}
.mn-hero5 button:nth-child(3){--rise:48px}
.mn-hero5 button:nth-child(4){--rise:72px}
.mn-hero5 button:nth-child(5){--rise:96px}
.mn-hero5 button::after,.mn-hero5 button::before{content:"";position:absolute;
  background:#bfdfe9;pointer-events:none}
/* 踏み板＝タイルの下端から次のタイルへ渡る横線（gap 18px 分） */
.mn-hero5 button::after{left:100%;bottom:-1px;width:18px;height:1px}
/* 蹴上げ＝次のタイルの左端で28px立ち上がる縦線 */
.mn-hero5 button::before{left:calc(100% + 17px);bottom:-1px;width:1px;height:24px}
.mn-hero5 button:last-child::after,.mn-hero5 button:last-child::before{display:none}
@media(max-width:1080px){
  /* 3列に折り返すと階段が成立しないので段差も線も畳む。
     `button{--rise:0}` では nth-child の方が詳細度が高くて負けるため
     :nth-child(n) で同じ詳細度にして後勝ちさせる */
  .mn-hero5{grid-template-columns:repeat(3,1fr);gap:14px}
  .mn-hero5 button:nth-child(n){--rise:0px}
  .mn-hero5 button::after,.mn-hero5 button::before{display:none}
}
@media(max-width:700px){
  /* 2列。高さは揃える（align-items:end のままだと文字数の差で凸凹になる） */
  /* minmax(0,1fr) にしないと「Facebook」の長い語で左右の幅が割れる */
  .mn-hero5{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;margin-bottom:64px}
  .mn-hero5 button:nth-child(5){grid-column:1/-1}
  .mn-hero5 .no b{font-size:28px}
  .mn-hero5 h3{font-size:13.5px}
  .mn-hero5 h3 br{display:none}
  /* 罫＋2文を横に並べると1行が短くなりすぎる。縦に積む */
  .mn-hero5-lab{display:block;margin-top:44px;font-size:13px;line-height:1.9}
  .mn-hero5-lab::before{display:block;margin-bottom:12px}
  .mn-hero5-lab b{display:block}
}
/* タイルから飛んだとき、固定ヘッダー(実測139px)にSTEPの頭が隠れないように */
.qa details{scroll-margin-top:150px}

/* 本文（読み物） */
.mn-prose{max-width:41rem}
.mn-prose p{margin-top:26px;font-size:16.5px;line-height:2.05;color:#3c4d55;letter-spacing:.02em}
.mn-prose p:first-child{margin-top:0}
.mn-prose b{font-weight:600;color:#12303a}
/* 箱もの（帯画像・CHECK・規約）は .wrap(1220px) の幅いっぱいに置く。
   60rem を掛けると右に200px余って「左に寄って見える」（菅さん指摘 2026-08-11）。
   読み物の柱 .mn-prose の41remだけは長い行にしないため据え置き */
.mn-band{margin:44px 0 0;border-radius:14px;overflow:hidden;border:1px solid #e6eef2}
.mn-band img{display:block;width:100%;height:auto}

/* 「クリックすると詳細が開きます」の案内行（文言は元のまま） */
.mn-hint{margin:44px 0 -22px;text-align:center;font-size:13.5px;letter-spacing:.05em;color:var(--ink-3)}
.mn-hint b{font-weight:600;color:#3c4d55;border-bottom:1px dashed #9fc4cf;padding-bottom:2px}

/* 開閉の中身に出てくる部品 */
.qa .ans figure{margin:6px 0 26px;border-radius:12px;overflow:hidden;border:1px solid #e6eef2}
.qa .ans figure img{display:block;width:100%;height:auto}
.qa .ans figure a{display:block}
.qa .ans figcaption{padding:10px 14px;font-size:12px;letter-spacing:.08em;color:var(--ink-3);
  background:#f7fbfd;border-top:1px solid #eef4f7}
.qa .ans h4{margin:34px 0 12px;display:flex;align-items:center;gap:14px;
  font-size:18px;font-weight:600;letter-spacing:.08em;color:#0a8098}
.qa .ans h4::before{content:"";width:26px;height:1px;background:var(--aq);flex:none}
.qa .ans .mn-note{margin:4px 0 20px;padding:16px 20px;border-left:2px solid var(--pk);
  background:#fef7fa;font-size:14.5px;line-height:2;color:#5a4a52;border-radius:0 10px 10px 0}
.qa .ans a{color:var(--aq-t);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
.qa .ans a.mn-go{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-size:15px;font-weight:600;letter-spacing:.04em;color:#12303a;text-decoration:none;
  border-bottom:1px solid var(--aq);padding-bottom:7px;transition:.3s}
.qa .ans a.mn-go i{font-style:normal;transition:transform .3s}
.qa .ans a.mn-go:hover{color:var(--aq-t);border-color:var(--pk)}
.qa .ans a.mn-go:hover i{transform:translateX(5px)}
/* WPの埋め込みカード（guidance）。本番はWPのスクリプトがiframeに差し替える。
   見本では blockquote をリンクカードとして見せる */
.qa .ans .wp-block-embed{margin:6px 0 26px}
.qa .ans .wp-embedded-content{margin:0;padding:20px 24px;border:1px solid #dcebf1;border-radius:12px;
  background:#f7fbfd;font-size:15px}
.qa .ans .wp-embedded-content a{font-weight:600;color:#12303a;text-decoration:none;
  border-bottom:1px solid var(--aq);padding-bottom:4px}
.qa .ans .wp-embedded-content a:hover{color:var(--aq-t);border-color:var(--pk)}

/* 代表のひとこと。丸くり抜き＋中央寄せ（菅さん指定 2026-08-11）。
   節の背景（水色）に直置きすると前の文章と地続きに見えて、締めなのか
   次への振りなのか分からなくなる（菅さん指摘）。**白いカードとして浮かせ**、
   末尾に次の節（5STEP）への矢印を置いて「橋渡し」だと分かるようにした */
.mn-suga{position:relative;margin:96px auto 0;max-width:44rem;text-align:center;
  background:#fff;border:1px solid #e2eef3;border-radius:22px;padding:52px 44px 46px;
  box-shadow:0 30px 70px -46px rgba(18,48,58,.5)}
.mn-suga figure{margin:0 auto;width:132px;height:132px;border-radius:50%;overflow:hidden;
  border:4px solid #fff;box-shadow:0 18px 44px -22px rgba(18,48,58,.45)}
.mn-suga figure img{display:block;width:100%;height:100%;object-fit:cover}
.mn-suga .who{margin-top:18px;font-size:15px;font-weight:700;letter-spacing:.08em;color:#12303a}
.mn-suga .who span{display:block;margin-top:5px;font-size:11px;font-weight:500;
  color:var(--ink-3);letter-spacing:.14em}
.mn-suga p{margin:20px 0 0;font-size:16px;line-height:2.05;color:#3c4d55;letter-spacing:.02em}
.mn-suga p b{font-weight:600;color:#12303a}
.mn-suga .nx{display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  padding:12px 24px;border-radius:999px;border:1px solid #cfe6ee;background:#f7fcfd;
  font-size:13.5px;font-weight:600;letter-spacing:.06em;color:#12303a;text-decoration:none;
  transition:.3s}
.mn-suga .nx i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#14bedc;
  color:#fff;display:grid;place-items:center;font-size:11px;transition:transform .3s}
.mn-suga .nx:hover{border-color:#14bedc;background:#fff}
.mn-suga .nx:hover i{transform:translateY(3px)}
@media(max-width:700px){
  .mn-suga{padding:40px 24px 36px;margin-top:64px}
  .mn-suga figure{width:112px;height:112px}
}

/* PCだけヒーロー上の余白を .ahead 既定の172pxから152pxに詰める。
   固定ヘッダー108px分を差し引いた「見えている余白」は44px残る。
   見本のタグ帯(38px)が無い本番で、ヘッダー＋見出し＋リード＋階段が
   1画面（およそ720px以上の高さ）に収まるようにするための調整。
   このページだけの上書きで、他ページの .ahead は触っていない */
@media(min-width:1081px){ #lead{padding-top:152px} }

/* 6支部の紹介の小見出し（Q&Aのグループ見出しと同形＝短い罫＋英字） */
.mn-grp{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:14px 22px;
  margin:104px 0 0;padding-bottom:22px;border-bottom:2px solid var(--aq)}
.mn-grp span{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  font-family:var(--en);font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--aq-t)}
.mn-grp span::before{content:"";width:26px;height:1px;background:var(--aq);flex:none}
.mn-grp b{font-size:clamp(22px,2.8vw,32px);font-weight:600;letter-spacing:.05em;
  line-height:1.35;color:#12303a}
.mn-grp em{font-style:normal;font-size:12px;letter-spacing:.14em;color:#8ba3ac;white-space:nowrap}

/* 支部カード。/branch/ の .brx-* と同じ形（写真16:9上置き・境界の再生ピル・2列） */
.mnb-list{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.mnb-i{display:flex;flex-direction:column;border:1px solid #e6eef2;border-radius:16px;
  overflow:hidden;background:#fff;transition:.4s cubic-bezier(.2,.7,.3,1)}
.mnb-i:hover{border-color:var(--c);box-shadow:0 26px 60px -34px var(--c);transform:translateY(-4px)}
.mnb-ph{position:relative;background:#eef5f8}
.mnb-ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mnb-play{position:absolute;right:16px;bottom:-17px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:999px;
  background:rgba(255,255,255,.94);border:1px solid #fff;color:#16323b;text-decoration:none;
  font-size:12.5px;letter-spacing:.08em;backdrop-filter:blur(4px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);transition:.3s}
.mnb-play:hover{transform:scale(1.06);background:#fff}
.mnb-play em{font-style:normal;width:20px;height:20px;border-radius:50%;background:#14bedc;color:#fff;
  display:grid;place-items:center;font-size:8px;padding-left:2px}
.mnb-tx{display:flex;flex-direction:column;flex:1;padding:28px 30px 26px}
.mnb-nm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mnb-nm b{font-size:21px;font-weight:600;letter-spacing:.06em;color:#12303a}
.mnb-nm span{font-size:11.5px;letter-spacing:.16em;color:var(--c);font-weight:600}
.mnb-cap{margin-top:14px;font-size:16px;font-weight:500;letter-spacing:.05em;line-height:1.75;color:#1d3d47}
.mnb-sub{margin-top:9px;font-size:14px;color:var(--c);letter-spacing:.05em}
.mnb-de{margin-top:16px;font-size:15px;line-height:2;color:#5a6b73}
.mnb-mt{margin-top:auto;padding-top:20px;display:flex}
.mnb-go{margin-left:auto;font-size:13px;letter-spacing:.08em;color:#12303a;text-decoration:none;
  border-bottom:1px solid #dce8ed;padding-bottom:3px;transition:.3s;white-space:nowrap}
.mnb-go:hover{color:var(--c);border-color:var(--c)}

/* CHECK（ドタキャンの注意）。文言は元のまま */
.mn-check{margin:72px 0 0;border:1px solid #f3d3e0;border-radius:16px;
  background:linear-gradient(168deg,#fff 55%,#fef7fa);padding:34px 38px 32px}
.mn-check .cl{display:inline-flex;align-items:center;gap:10px;font-family:var(--en);
  font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--pk-t)}
.mn-check .cl::before{content:"";width:26px;height:1px;background:var(--pk)}
.mn-check p{margin:16px 0 0;font-size:15.5px;line-height:2.05;color:#4a3c43}
.mn-check b{font-weight:600;color:#c2185b}

/* 規約への案内。短い節なので1枚の帯にする */
.mn-rule{margin-top:48px;border:1px solid #e2eef3;border-radius:18px;
  background:linear-gradient(168deg,#fff 58%,#f4fbfd);padding:38px 42px;
  display:grid;grid-template-columns:1fr auto;gap:18px 34px;align-items:center}
.mn-rule p{margin:0;font-size:16px;line-height:2.05;color:#3c4d55}
@media(max-width:900px){
  .mnb-list{grid-template-columns:1fr}
  .mn-rule{grid-template-columns:1fr}
  .mn-grp{margin-top:72px}
  .mn-grp em{display:none}
  .mn-check{padding:26px 22px}
}