/* ============================================================
   VOLUNTAS — Slack グループの使い方（slack-guide.html）と、
   募集ページ（opening.html）の「Slack で連絡します」カード
   画面の例は実際のワークスペースではなく、HTML で描いた再現イラスト。
   ============================================================ */
:root {
  --sg-aub: #4a154b;        /* Slack のサイドバー色（再現イラスト用） */
  --sg-aub-2: #5e2a5f;
  --sg-aub-soft: #f5edf5;
  --sg-green: #2bac76;
  --sg-line: #e6e1d6;
}

/* ---- 募集ページのカード ---------------------------------- */
.sg-card {
  margin: 26px 0 6px; padding: clamp(18px,3vw,26px);
  border-radius: var(--r-md); border: 1px solid #e3d4e3;
  background: linear-gradient(150deg, #fff 0%, var(--sg-aub-soft) 100%);
  box-shadow: var(--sh-soft);
}
.sg-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sg-card-head h3 { font-size: clamp(16px,2vw,19px); margin: 0; }
.sg-card > p { color: var(--muted); font-size: 14.5px; line-height: 1.85; margin: 4px 0 16px; }
.sg-mini { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; padding: 0; counter-reset: sgm; }
.sg-mini li {
  counter-increment: sgm; position: relative; background: #fff; border: 1px solid var(--sg-line);
  border-radius: var(--r-sm); padding: 14px 12px 12px; text-align: center; font-family: var(--sans);
  font-weight: 700; font-size: 13.5px; line-height: 1.5;
}
.sg-mini li::before {
  content: counter(sgm); position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--sg-aub); color: #fff;
  font-size: 12px; display: grid; place-items: center;
}
.sg-mini li .sg-ic { width: 34px; height: 34px; margin: 4px auto 6px; color: var(--sg-aub); }
.sg-mini li small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sg-card .btn { padding: 12px 22px; font-size: 14.5px; }
@media (max-width: 560px) {
  .sg-mini { grid-template-columns: 1fr; }
  .sg-mini li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
  .sg-mini li::before { position: static; transform: none; flex: none; }
  .sg-mini li .sg-ic { margin: 0; width: 28px; height: 28px; flex: none; }
}

/* ---- 共通：Slack 風アイコン（ハッシュの六角形） --------------- */
.sg-badge {
  width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--sg-aub);
  display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px -12px rgba(74,21,75,.6);
}
.sg-badge svg { width: 22px; height: 22px; }
.sg-ic { display: block; }

/* ---- ガイドページ ---------------------------------------- */
.sg-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sg-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--gold-line); font-family: var(--sans); font-weight: 700; font-size: 13px;
}
.sg-pill svg { width: 15px; height: 15px; color: var(--sg-green); }

.sg-sec { padding: clamp(36px,6vw,64px) 0; }
.sg-sec.alt { background: var(--cream); }
.sg-sec h2 { font-size: clamp(22px,3.2vw,32px); margin-bottom: 10px; }
.sg-sec .sec-sub { margin-bottom: 26px; }

/* なぜ Slack？ */
.sg-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sg-why > div {
  background: #fff; border: 1px solid var(--gold-line); border-radius: var(--r-md); padding: 22px; box-shadow: var(--sh-soft);
}
.sg-why .sg-ic { width: 40px; height: 40px; color: var(--sg-aub); margin-bottom: 10px; }
.sg-why h3 { font-size: 16.5px; margin-bottom: 6px; }
.sg-why p { color: var(--muted); font-size: 14px; line-height: 1.8; }
@media (max-width: 820px) { .sg-why { grid-template-columns: 1fr; } }

/* 流れ（タイムライン） */
.sg-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; counter-reset: sgs; }
.sg-step {
  counter-increment: sgs; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(16px,3vw,36px);
  align-items: center; background: #fff; border: 1px solid var(--gold-line); border-radius: var(--r-lg);
  padding: clamp(18px,3vw,30px); box-shadow: var(--sh-soft);
}
.sg-step-txt .sg-num {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 900; font-size: 12.5px;
  letter-spacing: .14em; color: var(--sg-aub); background: var(--sg-aub-soft); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 10px;
}
.sg-step-txt .sg-num::before { content: "STEP " counter(sgs); }
.sg-step-txt h3 { font-size: clamp(17px,2.2vw,21px); margin-bottom: 8px; }
.sg-step-txt p { color: var(--muted); font-size: 14.5px; line-height: 1.85; }
.sg-step-txt .sg-note {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold-line);
  font-size: 13.5px; color: var(--ink); line-height: 1.7;
}
.sg-step-txt .sg-note b { color: var(--gold-deep); }
@media (max-width: 820px) { .sg-step { grid-template-columns: 1fr; } }

/* ---- 再現イラスト（スクリーンショット風） ------------------- */
.sg-shot { position: relative; }
.sg-shot figcaption { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 8px; }
.sg-frame {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--sg-line); background: #fff;
  box-shadow: 0 24px 50px -28px rgba(44,40,32,.45); font-family: var(--body); font-size: 12.5px; color: #1d1c1d;
}
.sg-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f3f1ec; border-bottom: 1px solid var(--sg-line); }
.sg-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e0dbd0; display: block; }
.sg-bar span { margin-left: 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* メール */
.sg-mail { padding: 14px 16px 16px; }
.sg-mail .from { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sg-mail .av { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.sg-mail .from b { font-size: 12.5px; }
.sg-mail .from small { color: var(--muted); font-size: 11px; display: block; }
.sg-mail h4 { font-family: var(--sans); font-size: 13.5px; color: var(--gold-deep); margin: 6px 0; }
.sg-mail p { font-size: 12px; line-height: 1.7; color: #3b3830; }
.sg-mail .mbtn {
  display: block; width: max-content; margin: 12px auto 4px; padding: 8px 18px; border-radius: var(--r-pill);
  background: var(--sg-aub); color: #fff; font-weight: 700; font-size: 12px;
}
.sg-hl { background: #fff3b0; border-radius: 3px; padding: 0 2px; }

/* Slack の参加画面 */
.sg-join { padding: 18px 18px 20px; text-align: center; }
.sg-join .ws { width: 44px; height: 44px; border-radius: 10px; margin: 0 auto 8px; background: linear-gradient(135deg, var(--blue), var(--gold)); }
.sg-join h4 { font-family: var(--sans); font-size: 14px; margin-bottom: 12px; }
.sg-join .fld { text-align: left; border: 1px solid #cfc8b8; border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 6px; position: relative; }
.sg-join .fld small { display: block; color: var(--muted); font-size: 10.5px; }
.sg-join .fld.on { border-color: var(--sg-green); box-shadow: 0 0 0 3px rgba(43,172,118,.15); }
.sg-join .fld.on::after { content: "✓"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--sg-green); font-weight: 900; }
.sg-join .jbtn { margin-top: 10px; padding: 9px; border-radius: 8px; background: #007a5a; color: #fff; font-weight: 700; font-size: 12.5px; }

/* Slack のチャンネル画面 */
.sg-app { display: grid; grid-template-columns: 34% 1fr; min-height: 250px; }
.sg-side { background: var(--sg-aub); color: #e9dfea; padding: 10px 8px; font-size: 11.5px; }
.sg-side .ws-name { color: #fff; font-weight: 700; font-size: 12.5px; padding: 2px 6px 8px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-side .grp { font-size: 10.5px; opacity: .7; padding: 4px 6px; }
.sg-side .ch { padding: 4px 6px; border-radius: 6px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-side .ch svg { width: 11px; height: 11px; flex: none; opacity: .85; }
.sg-side .ch.on { background: #1164a3; color: #fff; font-weight: 700; }
.sg-main { display: flex; flex-direction: column; min-width: 0; }
.sg-chhead { padding: 9px 12px; border-bottom: 1px solid var(--sg-line); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.sg-chhead svg { width: 12px; height: 12px; flex: none; }
.sg-pin { margin: 8px 10px 0; padding: 6px 9px; border-radius: 6px; background: #fdf6e3; border: 1px solid #f0e2b8; font-size: 10.5px; color: #6b5a2a; }
.sg-msgs { padding: 8px 12px 10px; display: grid; gap: 9px; }
.sg-msg { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.sg-msg .av { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; }
.sg-msg .av.p1 { background: #e8912d; } .sg-msg .av.p2 { background: #2eb67d; } .sg-msg .av.adm { background: var(--gold); }
.sg-msg .av.bot { background: #fff; border: 1px solid var(--sg-line); font-size: 14px; }
.sg-msg b { font-size: 12px; } .sg-msg .tag { font-size: 9.5px; background: #eee9df; color: var(--muted); border-radius: 4px; padding: 0 4px; margin-left: 4px; font-weight: 700; }
.sg-msg .tm { color: #8a8475; font-size: 10px; margin-left: 4px; }
.sg-msg p { font-size: 12px; line-height: 1.6; margin-top: 1px; }
.sg-msg .ment { background: #e8f5fa; color: #1264a3; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.sg-msg .ans { margin-top: 3px; padding: 6px 8px; border-left: 3px solid #d9d3c6; background: #faf8f3; border-radius: 0 6px 6px 0; font-size: 11.5px; line-height: 1.6; }
.sg-msg .ans strong { display: block; font-size: 11px; }
.sg-input { margin: auto 10px 10px; border: 1px solid #cfc8b8; border-radius: 8px; padding: 7px 9px; color: #9a937f; font-size: 11.5px; }
@media (max-width: 480px) { .sg-app { grid-template-columns: 1fr; } .sg-side { display: none; } }

/* 終了 */
.sg-end { padding: 16px; display: grid; gap: 10px; }
.sg-end .row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #faf8f3; border: 1px solid var(--sg-line); font-size: 12px; }
.sg-end .row .d { font-family: var(--sans); font-weight: 900; font-size: 11px; color: #fff; background: var(--sg-aub); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.sg-end .row.last .d { background: var(--gold-deep); }

/* ボットの説明 */
.sg-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sg-bot > div { border-radius: var(--r-md); padding: 20px; border: 1px solid var(--gold-line); background: #fff; }
.sg-bot h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sg-bot h3 span { font-size: 20px; }
.sg-bot ul { padding-left: 1.1em; color: var(--muted); font-size: 13.5px; line-height: 1.85; }
.sg-bot .ok { border-top: 4px solid var(--sg-green); }
.sg-bot .esc { border-top: 4px solid var(--gold); }
.sg-bot .no { border-top: 4px solid #cfc8b8; }
@media (max-width: 820px) { .sg-bot { grid-template-columns: 1fr; } }

/* コツ */
.sg-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sg-tips > div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: #fff; border: 1px solid var(--gold-line); border-radius: var(--r-md); padding: 18px; }
.sg-tips .sg-ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--sg-aub-soft); color: var(--sg-aub); }
.sg-tips h3 { font-size: 15px; margin-bottom: 4px; }
.sg-tips p { color: var(--muted); font-size: 13.5px; line-height: 1.75; }
@media (max-width: 720px) { .sg-tips { grid-template-columns: 1fr; } }

.sg-cta { text-align: center; }
.sg-cta .btn { margin: 6px; }

/* ---- ガイド：招待メールの実例・スクショ枠 ------------------- */
.sg-email { padding: 14px 16px 6px; font-size: 13px; line-height: 1.75; color: #2c2820; }
.sg-email .meta { border-bottom: 1px solid var(--sg-line); padding-bottom: 8px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.sg-email .meta strong { color: var(--ink); font-size: 13px; display: block; }
.sg-email h4 { color: #8f7038; font-size: 15px; margin: 0 0 6px; font-family: var(--sans); }
.sg-email ol { padding-left: 18px; margin: 4px 0; }
.sg-email .mbtn { display: block; width: max-content; margin: 12px auto; padding: 9px 20px; border-radius: 999px; background: #4A154B; color: #fff; font-weight: 700; font-size: 13px; position: relative; }
.sg-mark { background: #fff3b0; border-radius: 3px; padding: 0 2px; }
/* 番号つきの吹き出し（画像・メールの上に重ねる） */
.sg-co { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e0464e; color: #fff; font: 900 12px/1 var(--sans); box-shadow: 0 0 0 3px #fff; vertical-align: middle; }
.sg-email .mbtn .sg-co { position: absolute; right: -12px; top: -10px; }
.sg-keys { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.sg-keys li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.7; }
/* スクショ（画像がまだ無いときは枠ごと出さない） */
.sg-pic { margin: 0; }
.sg-pic img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--sg-line); box-shadow: 0 24px 50px -28px rgba(44,40,32,.45); background: #fff; }
.sg-pic figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
/* スクショの上に番号を重ねる（画像そのものは加工しない） */
.sg-anno-box { position: relative; }
.sg-anno-box .sg-co { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; font-size: 13px; }