// ===========================================
// Section セクション基盤（文字中心テイスト）
// ===========================================

/* dark section 黒背景セクション
--------------------------------- */
.com-sec-dark {
  background: map-get($colors, black);
  color: map-get($colors, text-invert);
  padding-block: 80px;
  @include mq-up('s') {
    padding-block: 140px;
  }
  h1, h2, h3, h4, h5, h6 {
    color: map-get($colors, text-invert);
  }
  a {
    color: map-get($colors, text-invert);
  }
}

/* light section 白基調セクション
--------------------------------- */
.com-sec-light {
  background: map-get($colors, white);
  color: map-get($colors, text);
  padding-block: 80px;
  @include mq-up('s') {
    padding-block: 140px;
  }
}

/* gray section グレー基調セクション
--------------------------------- */
.com-sec-gray {
  background: map-get($colors, gray-light);
  color: map-get($colors, text);
  padding-block: 80px;
  @include mq-up('s') {
    padding-block: 140px;
  }
}

/* hero section ヒーローセクション
--------------------------------- */
.com-sec-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: 120px 80px;
  overflow: hidden;
  @include mq-up('s') {
    padding-block: 160px 100px;
  }
  .inner {
    position: relative;
    z-index: 2;
    width: 100%;
  }
}

/* section heading セクション見出し領域
--------------------------------- */
.com-sec-head {
  display: grid;
  gap: 16px;
  margin-bottom: 60px;
  @include mq-up('s') {
    margin-bottom: 100px;
  }
  &.center {
    text-align: center;
    justify-items: center;
  }
}

/* eyebrow 見出しの上に出る英字タグ
--------------------------------- */
.com-eyebrow {
  font-family: $font-family-sofia;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: map-get($colors, text-sub);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  &::before {
    content: '';
    width: 32px;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }
  .com-sec-dark & {
    color: map-get($colors, text-mute);
  }
}