/* ==========================================================================
   components-heading.css
   見出し（H2 / H3）
   方針：
   - 見た目はここで完結
   - 数値・色はコックピット管理
   ========================================================================== */

/* ==========================================================================
   01) H2 共通
   ========================================================================== */

.c-heading {
  text-align: left;
}

.c-heading__en {
  margin: 0px;
  letter-spacing: var(--h2-en-letter);
  color: var(--accent);
  line-height: normal;
}

.c-heading__icon {
  display: block;
  flex: 0 0 auto;
}

.c-heading__jp {
  margin: 0px;
  line-height: var(--h2-jp-line);
  color: var(--brand);
}

.c-heading__line {
  background: var(--accent);
}

/* ==========================================================================
   02) H3 共通（H3-DOT）
   ========================================================================== */

.c-h3,
.c-feature__title {
  position: relative;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  margin: var(--h3-mt) 0px var(--h3-mb);
  padding-left: var(--h3-x);
  color: var(--h3-color);
}

.c-h3--dot::after,
.c-feature__title::after {
  content: var(--h3-dot-content);
  display: block;
  margin-top: var(--h3-dot-top);
  padding-left: var(--h3-dot-x);
  font-size: var(--h3-dot-size);
  letter-spacing: var(--h3-dot-letter);
  color: var(--h3-dot-color);
}

/* ==========================================================================
   03) H2：lg（H2-LG）
   ========================================================================== */

.c-heading--lg {
  margin-bottom: var(--h2-lg-block-bottom);
}

.c-heading--lg .c-heading__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--h2-lg-center-gap);
  margin-bottom: var(--h2-lg-center-bottom);
}

.c-heading--lg .c-heading__left {
  max-width: var(--container-width, 1200px);
  margin: 0px auto;
  text-align: left;
  position: relative;
}

.c-heading--lg .c-heading__icon {
  width: var(--h2-lg-icon);
  height: var(--h2-lg-icon);
}

.c-heading--lg .c-heading__en {
  font-size: var(--h2-lg-en-size);
  line-height: var(--h2-lg-en-line);
}

.c-heading--lg .c-heading__jp {
  font-size: var(--h2-lg-jp-size);
  padding-left: var(--h2-lg-jp-x);
}

.c-heading--lg .c-heading__line {
  position: absolute;
  left: var(--h2-lg-line-x);
  top: var(--h2-lg-line-top);
  bottom: var(--h2-lg-line-bottom);
  width: var(--h2-lg-line-width);
}

.c-heading--lg .c-heading__left::after {
  content: "";
  display: block;
  height: var(--h2-lg-underline-h);
  background: var(--brand);
  margin-top: var(--h2-lg-underline-top);
}

/* ==========================================================================
   04) H2：sm（H2-SM）
   ========================================================================== */

.c-heading--sm {
  margin-bottom: var(--h2-sm-block-bottom);
}

.c-heading--sm .c-heading__row {
  display: flex;
  align-items: center;
  gap: var(--h2-sm-row-gap);
}

.c-heading--sm .c-heading__icon {
  width: var(--h2-sm-icon);
  height: var(--h2-sm-icon);
}

.c-heading--sm .c-heading__en {
  font-size: var(--h2-sm-en-size);
  line-height: var(--h2-sm-en-line);
  padding-left: var(--h2-sm-en-x);
}

.c-heading--sm .c-heading__jp {
  font-size: var(--h2-sm-jp-size);
  margin-top: var(--h2-sm-jp-top);
}

.c-heading--sm .c-heading__line {
  display: block;
  width: 100%;
  height: var(--h2-sm-line-h);
  margin-top: var(--h2-sm-line-top);
  background: var(--accent);
}