/* =================================================================
 * c-box — タイトル付きボックス（補足説明・事例枠）
 * Figma: パーツ集「28 ボックス」5371:85761
 *   <div class="c-box">
 *     <p class="c-box__title">ここにタイトルが入ります</p>   ← 左上タブ見出し
 *     <div class="c-box__body">説明文…</div>
 *   </div>
 *   タブ見出しは Secondary カラー地・白文字、本体は白地・Secondary 枠。
 * =================================================================*/

.c-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* 左上タブ見出し（内容幅にフィット） */
.c-box__title {
  align-self: flex-start;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);                 /* 16px */
  line-height: var(--lh-loose);              /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  padding: var(--space-1) var(--space-6);    /* 4px 32px */
  border-radius: var(--radius-md) var(--radius-md) 0 0;  /* 上だけ角丸 8px */
}

/* 本体（左上は四角＝タブと連続） */
.c-box__body {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  padding: var(--space-5) var(--space-6);    /* 24px 32px */
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);                 /* 16px */
  line-height: var(--lh-loose);              /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

@media (max-width: 1023.98px) {
  .c-box__title { padding: var(--space-1) var(--space-4); }   /* 4px 16px */
  .c-box__body  { padding: var(--space-4) var(--space-5); }   /* Figma SP: 16px 24px */
}