/* =================================================================
 * c-tab — タブ
 * Figma: スタイルガイド 5494:297152（項目47 タブ / 項目48 吹き出し風タブ）
 * CSS  : components/tab.css
 *
 *   pill   : ピル型セグメント（選択=Key地に白文字）。コンテナ自体がピル。
 *   bubble : 吹き出し風（各タブの下に三角）。コンテナ地色は無し。
 *
 * 地色ルール（Figma）: セクション背景が白 → Back Ground03（既定）/
 *                       セクション背景が色付き → Back Ground02（--on-bg）
 *
 * 使い方: front.components.tab（Blade）経由
 * =================================================================*/

.c-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 各タブ（<a> または <button>）。等幅で並ぶ */
.c-tab__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);   /* 12px 16px */
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);                /* 16px */
  line-height: var(--lh-snug);              /* 1.5 */
  letter-spacing: var(--letter-spacing-body);
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-default);         /* #333 */
  background: transparent;
  border: 0;
  border-radius: 28rem;                      /* Figma 28px（トークン外） */
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}
.c-tab__item.is-active {
  background: var(--color-key);
  color: var(--color-white);
}
.c-tab__item:hover:not(.is-active) { color: var(--color-key); }
.c-tab__item:focus-visible { outline: 2rem solid var(--color-key); outline-offset: 2rem; }

/* ---------- 47 タブ（ピル型セグメント） ---------- */
.c-tab--pill {
  gap: var(--space-2);                      /* 8px */
  padding: var(--space-2);                  /* 8px */
  border-radius: var(--radius-xl);          /* 32px */
  background: var(--color-bg-03);           /* 白セクション = Back Ground03 */
}
.c-tab--pill.c-tab--on-bg { background: var(--color-bg-02); } /* 色付きセクション = Back Ground02 */

/* ---------- 48 吹き出し風タブ ---------- */
.c-tab--bubble {
  gap: var(--space-4);                      /* 16px */
  align-items: flex-start;
}
.c-tab--bubble .c-tab__item {
  position: relative;
  margin-bottom: 9rem;                       /* 吹き出し三角ぶんの余白（合計65px） */
  padding-block: var(--space-4);            /* 16px（角丸部の高さ56px） */
  background: var(--color-bg-03);           /* 非選択 = Back Ground03 */
}
.c-tab--bubble.c-tab--on-bg .c-tab__item { background: var(--color-bg-02); }
.c-tab--bubble .c-tab__item.is-active { background: var(--color-key); }
/* 下向き三角（14×9）。色はタブの地色に追従 */
.c-tab--bubble .c-tab__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-inline: 7rem solid transparent;     /* 幅 14px */
  border-top: 9rem solid var(--color-bg-03); /* 高さ 9px */
}
.c-tab--bubble.c-tab--on-bg .c-tab__item::after { border-top-color: var(--color-bg-02); }
.c-tab--bubble .c-tab__item.is-active::after { border-top-color: var(--color-key); }

/* SP: 余白とフォントを少し詰める */
@media (max-width: 1023.98px) {
  .c-tab__item {
    padding-inline: var(--space-2);         /* 8px */
    font-size: var(--fs-body-sm);           /* 14px */
  }
}