/* ==========================================================================
   components.css — shared cross-section components
   ========================================================================== */


/* =================================================================
   C-04 Section Nav Tab
   - 黒の細い帯（高さ 12px 程度）
   - 中央に緑ピル（黒帯から上下にはみ出す）
   ================================================================= */
.c-section-nav {
  position: relative;
  width: 100%;
  background-color: var(--c-black-band);
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.c-section-nav__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 46px;
  background-color: var(--c-black);
  color: var(--c-white);
  border-radius: 0 0 10px 10px;
  font-size: var(--fs-nav-tab);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .c-section-nav__tab {
    padding: 10px 32px;
    font-size: 12px;
  }
}


/* =================================================================
   C-05 Section Heading
   構成: eyebrow + title + 装飾画像
   ================================================================= */
.c-section-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: var(--space-32);
  margin-block: var(--space-80) var(--space-32);
}

.s-performance .c-section-heading {
  margin-top:0;
  padding-top: var(--space-80);
}

.c-section-heading__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.c-section-heading__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-text);
  line-height: 1;
}

.c-section-heading__eyebrow::before {
  content: "—";
  margin-right: 0.3em;
}

.c-section-heading__title {
  font-family: var(--ff-base);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-text-strong);
}

.c-section-heading__title-accent {
  color: var(--c-green-primary);
}

.c-section-heading__deco {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  justify-self: end;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .c-section-heading__title {
    font-size: var(--fs-display);
  }
  .c-section-heading {
    grid-template-columns: 1fr;
    row-gap: var(--space-16);
    margin-block: var(--space-48) var(--space-24);
  }
  .s-performance .c-section-heading {
    margin-top:0;
    padding-top: var(--space-48);
  }
  .c-section-heading__deco {
    max-width: 200px;
    justify-self: end;
  }
}


/* =================================================================
   C-06 Green Pill Tag (+ 右に伸びる破線)
   ================================================================= */
.c-pill {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-block: var(--space-48) var(--space-32);
}

.c-pill__label {
  display: inline-flex;
  align-items: center;
  padding: 10px 32px;
  background-color: var(--c-green-primary);
  color: var(--c-white);
  border-radius: 9999px;
  font-size: var(--fs-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.c-pill__line {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(to right, var(--c-green-primary) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

@media (max-width: 767px) {
  .c-pill__label {
    padding: 8px 24px;
    font-size: 14px;
  }
}


/* =================================================================
   c-eyebrow — standalone (legacy)
   ================================================================= */
.c-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-text);
  line-height: 1;
  display: block;
}

.c-eyebrow::before {
  content: "—";
  margin-right: 0.3em;
}


/* =================================================================
   c-note — 注釈テキスト（※ 始まり）
   ================================================================= */
.c-note {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--c-gray-text);
  margin-top: var(--space-16);
}

.c-note > p {
  text-indent: -1em;
  padding-left: 1em;
}