@charset "UTF-8";
	
/* ===== Be-CAREER Column Base (scoped) ===== */
.bc-article {
  /* 色・余白はここだけで調整 */
  --accent: #e91e63;          /* アクセント（サイトに合わせて変更） */
  --ink: #222;                /* 文章色 */
  --muted: #6b7280;           /* 補助文字色 */
  --bg: #fff;                 /* 背景 */
  --chip: #f8f5f7;            /* カテゴリチップ背景 */
  --radius: 10px;             /* 角丸 */
  --space-sm: clamp(8px, 1vw, 12px);
  --space-md: clamp(16px, 2vw, 24px);
  --space-lg: clamp(44px, 3vw, 40px);
  --w-reading: min(100%, 920px); /* 本文行幅 */
}

.bc-article,
.bc-article * { box-sizing: border-box; }
.bc-article {
  /* color: var(--ink); */
  /* background: var(--bg); */
  margin-inline: auto;
  width: 100%;
  line-height: 1.85;
  font-size: clamp(15px, 1.05vw + 12px, 17px);
  max-width: 1050px;
}
.breadcrumbs{
	 max-width: 1050px;
	 width:100%;
	 margin: 30px auto;
}

/* ヒーロー */
.bc-hero {
  margin: 0 0 var(--space-lg);
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, #fff 84%), #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #000 10%);
  border-radius: calc(var(--radius) + 4px);
}
.bc-cat {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  /* background: var(--chip); */
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .82em;
  border: 1px solid;
}
.bc-title {
  margin: .6em 0 .4em;
  font-size: clamp(24px, 2.6vw + 16px, 38px);
  line-height: 1.25;
  letter-spacing: .02em;
}
.bc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  /* color: var(--muted); */
  font-size: .9em;
}
.bc-meta time { white-space: nowrap; }
.bc-lead {
  margin-top: var(--space-md);
  padding-left: .2em;
  font-weight: 600;
}

/* 目次 */
.bc-toc {
  position: relative;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius);
}
.bc-toc h2 {
  margin: 0 0 .4em;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.bc-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0; padding: 0 0 0 1rem;
}
@media (max-width: 680px) {
  .bc-toc ol { grid-template-columns: 1fr; }
}

/* セクション */
.bc-section { margin: 0 0 var(--space-lg); }
.bc-section h2 {
  margin: 0 0 1em;
  padding-left: .7em;
  border-left: 4px solid var(--accent);
  line-height: 1.4;
}
.bc-section h3 { margin: 1.2em 0 .4em; font-size: 1.05em; }

/* リスト（チェック） */
.bc-check {
  list-style: none; padding: 0; margin: .6em 0 0;
}
.bc-check li {
  position: relative; padding-left: 1.6em; margin: .3em 0;
}
.bc-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}

/* グリッド & カード */
.bc-grid { display: grid; gap: var(--space-md); }
.bc-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 880px) { .bc-grid.cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .bc-grid.cols-2 { grid-template-columns: 1fr; } }

.bc-card {
  border: 1px solid #eee; border-radius: var(--radius); padding: var(--space-md);
  background: #fff;
}
.bc-card h3 { margin: 0 0 .3em; }
.bc-note {
  font-size: .92em;
  /* color: var(--muted); */
  margin-top: .6em;
}

/* 番号付きステップ */
.bc-steps { counter-reset: step; list-style: none; padding: 0; }
.bc-steps li {
  counter-increment: step; border: 1px solid #eee; border-radius: var(--radius);
  padding: 12px 14px 12px 48px; margin: 10px 0; background: #fff; position: relative;
}
.bc-steps li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transform: translateY(-50%);
}

/* CTA */
.bc-cta {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 10%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, #000 10%);
  text-align: center;
}
.bc-cta .bc-btns {display: flex;gap: 12px;justify-content: center;flex-wrap: wrap;margin-top: 20px;margin-bottom: 20px;}
.bc-btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.1em; border-radius: 999px; text-decoration: none;
  font-weight: 700; border: 2px solid var(--accent); color: var(--accent);
}
.bc-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 図版・ヒーロー画像 */
.bc-figure { margin: var(--space-md) 0 0; }
.bc-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* 補助要素 */
.bc-footnote {font-size: .9em;/* color: var(--muted); */}
.bc-top { text-align: right; margin: var(--space-md) 0; }
.bc-top a { color: var(--accent); text-decoration: none; }

/* ダークモード（必要に応じて） */
@media (prefers-color-scheme: dark) {
  .bc-article { --ink: #f4f4f5; --bg: #0f0f12; --muted: #9aa0a6; --chip: #1a171b; }
  .bc-hero, .bc-card, .bc-toc, .bc-cta { border-color: #2a2a33; }
}

/* ─────────  Responsive  (≤768px)  ───────── */
@media (max-width: 768px) {
	.bc-article{
		width: 92.5%;
	}
	.breadcrumbs{
		width: 92.5%;
		margin: 20px auto;
		/* margin-bottom: 20px; */
		line-height: 1.5;
	}
	
}