/*
Theme Name: SWELL Child - KC
Description: SWELL用子テーマ
Template: swell
Version: 1.0.0
Author:
*/

/* 親テーマのスタイルを読み込み */
@import url("./../swell/style.css");

/* original block style */
/* グループラッパー */
.kc-title-01-wrapper {
  /* デフォルト値（背景色未指定時） */
  --marker-color: #89d7fc;
  background: transparent !important; /* 実際の背景塗りは消す */
  position: relative;
  display: inline-block;
  padding: 0 !important;
}

/* —— SWELLプリセット → マーカー色にマッピング —— */
/* swl 系（wp preset → rootの --color_* に連動） */
.kc-title-01-wrapper.has-swl-main-background-color {
  --marker-color: var(--wp--preset--color--swl-main);
}
.kc-title-01-wrapper.has-swl-main-thin-background-color {
  --marker-color: var(--wp--preset--color--swl-main-thin);
}
.kc-title-01-wrapper.has-swl-gray-background-color {
  --marker-color: var(--wp--preset--color--swl-gray);
}

.kc-title-01-wrapper.has-swl-deep-01-background-color {
  --marker-color: var(--wp--preset--color--swl-deep-01);
}
.kc-title-01-wrapper.has-swl-deep-02-background-color {
  --marker-color: var(--wp--preset--color--swl-deep-02);
}
.kc-title-01-wrapper.has-swl-deep-03-background-color {
  --marker-color: var(--wp--preset--color--swl-deep-03);
}
.kc-title-01-wrapper.has-swl-deep-04-background-color {
  --marker-color: var(--wp--preset--color--swl-deep-04);
}

.kc-title-01-wrapper.has-swl-pale-01-background-color {
  --marker-color: var(--wp--preset--color--swl-pale-01);
}
.kc-title-01-wrapper.has-swl-pale-02-background-color {
  --marker-color: var(--wp--preset--color--swl-pale-02);
}
.kc-title-01-wrapper.has-swl-pale-03-background-color {
  --marker-color: var(--wp--preset--color--swl-pale-03);
}
.kc-title-01-wrapper.has-swl-pale-04-background-color {
  --marker-color: var(--wp--preset--color--swl-pale-04);
}

/* コアの標準色を使う可能性があるなら（任意） */
.kc-title-01-wrapper.has-black-background-color {
  --marker-color: var(--wp--preset--color--black);
}
.kc-title-01-wrapper.has-white-background-color {
  --marker-color: var(--wp--preset--color--white);
}
.kc-title-01-wrapper.has-vivid-red-background-color {
  --marker-color: var(--wp--preset--color--vivid-red);
}
/* …必要に応じて追加 */
/* -------------- /マッピングここまで -------------- */

/* 見出し本体は黒固定 */
.kc-title-01 {
  color: #000;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  display: inline;
}

/* マーカー帯 */
.kc-title-01::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22em;
  height: 0.6em;
  background-color: var(--marker-color);
  z-index: -1;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
}