@charset "UTF-8";

/**********************************************************
 * タイトル
 **********************************************************/
.label {
  background: var(--color-main-dark);
  color: var(--color-light);
  display: flex;
  gap: .5em;
  align-items: center;
  width: fit-content;
  font-weight: 700;
  letter-spacing: .075em;
  text-orientation: mixed;
  line-height: 1;
  white-space: nowrap;
  font-size: 45px;
  z-index: 1;
}
.label.label--light {
  color: var(--label-text-light);
  background: var(--color-light);
}
.label--top {
  border-radius: 15px 15px 0 0;
}
.label--bottom {
  border-radius: 0 0 15px 15px;
}
.label--right {
  border-radius: 15px 0 0 15px;
  writing-mode: vertical-rl;
}
.label--left {
  border-radius: 0 15px 15px 0;
  writing-mode: vertical-rl;
}
.label span {
  display: inline-block;
  font-size: 30px;
}

@media (768px <= width < 1920px) {
  .label {
    font-size: 2.344vw;
  }
  .label--top {
    border-radius: 0.781vw 0.781vw 0 0;
  }
  .label--bottom {
    border-radius: 0 0 0.781vw 0.781vw;
  }
  .label--right {
    border-radius: 0.781vw 0 0 0.781vw;
  }
  .label--left {
    border-radius: 0 0.781vw 0.781vw 0;
  }
  .label span {
    font-size: 1.563vw;
  }
}

@media (width < 768px) {
  .label {
    font-size: 3.48vw;
  }
  .label--top {
    border-radius: 2vw 2vw 0 0;
  }
  .label--bottom {
    border-radius: 0 0 2vw 2vw;
  }
  .label--right {
    border-radius: 2vw 0 0 2vw;
  }
  .label--left {
    border-radius: 0 2vw 2vw 0;
  }
  .label span {
    font-size: 2.667vw; /* 10px */
  }
}