/* ============================================
 * 共通セクションタイトルラベル
 * 赤い斜めカット帯の見出し
 * 使用テンプレート: inc/section-title-label.php
 * 使用ページ: 取扱メニュー一覧 / 店舗一覧 / 施工事例詳細 等
 * ============================================ */

.section-title-label {
  position: relative;
  width: 100%;
  max-width: clamp(375px, 11.33vw + 332.51px, 550px); /* 375px @ 375px → 550px @ 1920px */
  height: clamp(36px, calc(35px + 0.26vw), 40px);
  overflow: hidden;
}

.section-title-label__bg {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: inset(0);
}

.section-title-label__text {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  margin: 0;
  padding-inline-start: 32px;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, calc(13px + 0.26vw), 18px);
  line-height: 1.4;
  letter-spacing: clamp(1.5px, calc(1.3px + 0.04vw), 2.16px);
  color: #fff;
  white-space: nowrap;
}