@use '../global' as *;

.c-sec-ttl {
  font-weight: 900;
  font-size: fz(80);
  @include lh(80, 90);
  color: $key_blue;
  text-align: center;

  @include mq-down(sm) {
    font-size: fz(34);
    @include lh(32, 41);
  }
}

.c-sec-read {
  text-align: center;
  font-size: fz(17);
  margin-top: fz(24);
  font-weight: 600;
}

.c-text {
  font-size: rem(20);
  font-weight: 500;

  @include mq-down(sm) {
    font-size: rem(16);
  }
}

.c-sec-sub-heading {
  font-size: fz(31);

  padding-bottom: fz(17);
  border-bottom: 1px solid #d5d4d4;
  color: $key_blue;

  @include mq-down(sm) {
    font-size: fz(22);
    margin-bottom: fz(11);
  }

  span {
    display: inline-block;
    position: relative;
    padding-left: fz(24);

    @include mq-down(sm) {
      padding-left: fz(16);
    }

    &::before {
      content: '';
      @include trans_y;
      left: 0;
      width: fz(7);
      height: fz(31);
      background-color: $key_blue;
      border-radius: fz(3);

      @include mq-down(sm) {
        width: fz(4);
        height: fz(22);
      }
    }
  }
}

.c-sec-l-heading {
  text-align: center;
  color: $key_blue;
  font-size: rem(60);
  margin-bottom: rem(84);
  line-height: 1.22;
  @include mq-down(sm) {
    font-size: rem(42);
    margin-bottom: rem(40);
  }
}

.c-sec-m-heading {
  color: $key_blue;
  font-size: rem(31);

  @include mq-down(sm) {
    font-size: rem(24);
  }
}

.c-sec-cricle-heading {
  font-size: fz(24);

  &::before {
    content: '';
    width: fz(17);
    height: fz(17);
    border-radius: 50%;
    background-color: $key_blue;
    display: inline-block;
    margin-right: fz(12);
  }
}