@charset "UTF-8";
/* =============================================================================
   なかまボード LP（page-nakama-board.php 専用）
   サイト共通のトークン（style.css の :root）を使い、色使いの鉄則に合わせる。
     - 背景はクリームと濃色のみ / カード・影なし（区切りは1px罫線）/ 角丸はボタン2pxとスマホ画像のみ
   クラスはすべて .nb- で始め、サイト全体のスタイルと衝突しないようにしている。
   ========================================================================== */

.nb-sec { border-top: 1px solid var(--c-rule); }
.nb-sec > .container { padding-block: 64px; }
.nb-sec__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.5;
  color: var(--c-heading);
  text-wrap: balance;
}
.nb-sec__lead { margin-top: 16px; max-width: 40em; color: var(--c-text-weak); }

/* --- ヒーロー --- */
.nb-hero .container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  padding-block: 56px 64px;
}
.nb-hero__title {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.5;
  color: var(--c-heading);
}
.nb-hero__lead { margin-top: 20px; max-width: 30em; font-size: 15px; color: var(--c-text-weak); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nb-chip { border: 1px solid var(--c-rule-form); font-size: 12px; line-height: 1.5; padding: 5px 12px; color: var(--c-text); }
.nb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nb-hero__phones { display: flex; justify-content: center; gap: 18px; }
.nb-hero__phones .nb-phone { width: min(220px, 46%); }
.nb-hero__phones .nb-phone:nth-child(2) { margin-top: 48px; }

/* スマホ画面（1px枠・角丸のみ。影は付けない） */
.nb-phone { margin: 0; }
.nb-phone img {
  display: block;
  width: 100%;
  aspect-ratio: 780 / 1688;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--c-rule);
  border-radius: 22px;
  background: #fff;
}

/* --- 3つの特徴 --- */
.nb-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-top: 1px solid var(--c-rule); }
.nb-point { padding: 24px; border-right: 1px solid var(--c-rule); }
.nb-point:first-child { padding-left: 0; }
.nb-point:last-child { padding-right: 0; border-right: 0; }
.nb-point__num { font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.3; color: var(--c-green); }
.nb-point__t { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.7; }
.nb-point__d { margin-top: 8px; font-size: 13px; line-height: 1.95; color: var(--c-text-weak); }

/* --- できること（画面と説明を交互に） --- */
.nb-features { display: flex; flex-direction: column; margin-top: 24px; }
.nb-feature {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
  padding-block: 36px;
  border-bottom: 1px solid var(--c-rule);
}
.nb-feature:last-child { border-bottom: 0; }
.nb-feature:nth-child(even) { grid-template-columns: 1fr 220px; }
.nb-feature:nth-child(even) .nb-phone { order: 2; }
.nb-feature__body { min-width: 0; }
.nb-feature__label { font-size: 11.5px; letter-spacing: .14em; color: var(--c-accent); }
.nb-feature__title { margin-top: 8px; font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.55; color: var(--c-heading); }
.nb-feature__text { margin-top: 12px; color: var(--c-text-weak); }
.nb-checks { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.nb-checks li { position: relative; padding-left: 22px; font-size: 14px; }
.nb-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--c-green);
  border-bottom: 2px solid var(--c-green);
  transform: rotate(-45deg);
}
.nb-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 16px; }
.nb-more > div { border-top: 2px solid var(--c-green); padding-top: 14px; }
.nb-more__t { font-size: 15px; font-weight: 500; }
.nb-more__d { margin-top: 6px; font-size: 13px; line-height: 1.95; color: var(--c-text-weak); }

/* --- こんな団体に --- */
.nb-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 28px; }
.nb-case { padding: 20px 0; border-top: 1px solid var(--c-rule); }
.nb-case__t { font-size: 15px; font-weight: 500; }
.nb-case__d { margin-top: 6px; font-size: 13.5px; line-height: 1.95; color: var(--c-text-weak); }

/* --- 始め方 --- */
.nb-need { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 20px; font-size: 13.5px; }
.nb-need strong { color: var(--c-green); font-weight: 500; }
.nb-steps { margin-top: 28px; counter-reset: nbstep; }
.nb-step {
  counter-increment: nbstep;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding-block: 32px;
  border-top: 1px solid var(--c-rule);
}
.nb-step:last-child { border-bottom: 1px solid var(--c-rule); }
.nb-step::before {
  content: counter(nbstep, decimal-leading-zero);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--c-green);
}
.nb-step__body { min-width: 0; }
.nb-step__t { font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--c-heading); }
.nb-step__d { margin-top: 8px; max-width: 46em; font-size: 14px; color: var(--c-text-weak); }
.nb-step code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--c-mint);
  padding: 1px 6px;
  color: var(--c-text);
}
.nb-shot { margin: 16px 0 0; min-width: 0; }
.nb-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--c-rule); background: #fff; }
.nb-shot figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--c-text-sub); }
.nb-shot figcaption b { color: var(--c-green); font-weight: 700; margin-right: 4px; }
.nb-shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 16px; align-items: start; }
.nb-shot-grid .nb-shot { margin: 0; }
.nb-tip { margin-top: 18px; background: var(--c-mint); padding: 14px 18px; font-size: 13.5px; line-height: 1.95; }
.nb-tip strong { color: var(--c-green); font-weight: 700; }

/* --- よくある質問（開閉式） --- */
.nb-faq { margin-top: 24px; }
.nb-faq details { border-top: 1px solid var(--c-rule); }
.nb-faq details:last-child { border-bottom: 1px solid var(--c-rule); }
.nb-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after { content: "＋"; flex: none; color: var(--c-green); }
.nb-faq details[open] summary::after { content: "－"; }
.nb-faq details p { padding-bottom: 20px; max-width: 46em; font-size: 13.5px; line-height: 2; color: var(--c-text-weak); }

/* --- 制限 --- */
.nb-notes { margin-top: 20px; }
.nb-notes li { padding: 12px 0; border-top: 1px solid var(--c-rule); font-size: 14px; color: var(--c-text-weak); }
.nb-notes li:last-child { border-bottom: 1px solid var(--c-rule); }

/* --- GitHubへの誘導（濃緑バンド） --- */
.nb-get { background: var(--c-green); color: var(--c-band-body2); text-align: center; }
.nb-get .container { padding-block: 64px; }
.nb-get__title { font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.5; color: var(--c-band-h); }
.nb-get__text { margin-top: 12px; }
.nb-get .nb-btns { justify-content: center; }
.nb-get .btn--ghost { color: var(--c-band-h); border-color: var(--c-band-h); }
.nb-get .btn--ghost:hover { background: var(--c-band-h); color: var(--c-green); }
.nb-get :focus-visible { outline-color: var(--c-band-h); }

/* -----------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nb-hero .container { grid-template-columns: 1fr; }
  .nb-hero__phones { margin-top: 8px; }
}
@media (max-width: 767px) {
  .nb-sec > .container { padding-block: 48px; }
  .nb-sec__title { font-size: 24px; }
  .nb-hero .container { padding-block: 36px 48px; }
  .nb-hero__title { font-size: 30px; }
  .nb-points { grid-template-columns: 1fr; }
  .nb-point, .nb-point:first-child, .nb-point:last-child { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--c-rule); }
  .nb-feature, .nb-feature:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .nb-feature:nth-child(even) .nb-phone { order: 0; }
  .nb-feature .nb-phone { width: 200px; justify-self: center; }
  .nb-feature__title { font-size: 21px; }
  .nb-more, .nb-cases { grid-template-columns: 1fr; gap: 16px; }
  .nb-step { grid-template-columns: 1fr; gap: 6px; }
  .nb-shot-grid { grid-template-columns: 1fr; }
  .nb-get__title { font-size: 24px; }
}