:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);
}


.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.front-about__role,
.front-about__shoulder {
}

/* =========================================================
   Header CTA design presets
   - カスタマイザー「ヘッダー（電話・お問い合わせ） > ボタンデザインプリセット」用
   - 電話番号 / お問い合わせの骨格は .header-cta-button で共通化
   - 色はプリセット値を使い、カスタマイザー色が指定された場合だけ上書き
   ========================================================= */

.site-header{
  --anchor-header-cta-radius: 8px;
  --anchor-header-cta-height: 64px;
  --anchor-header-cta-padding-x: 16px;
  --anchor-header-cta-gap: 12px;
  --anchor-header-cta-min-width: 154px;
  --anchor-header-cta-shadow: none;
  --anchor-header-cta-hover-shadow: none;
  --anchor-header-cta-hover-transform: translateY(-1px);
  --anchor-header-cta-icon-size: 28px;
  --anchor-header-cta-icon-radius: 0;
  --anchor-header-cta-icon-padding: 0;
  --anchor-header-cta-icon-bg: transparent;
  --anchor-header-cta-icon-shadow: none;

  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #111111;
  --anchor-header-cta-tel-border-preset: #111111;
  --anchor-header-cta-tel-accent-preset: var(--anchor-header-cta-tel-border-preset);
  --anchor-header-cta-tel-icon-preset: currentColor;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #111111;
  --anchor-header-cta-contact-border-preset: #111111;
  --anchor-header-cta-contact-accent-preset: var(--anchor-header-cta-contact-border-preset);
  --anchor-header-cta-contact-icon-preset: currentColor;

  --anchor-header-cta-tel-bg-active: var(--anchor-header-cta-tel-bg-custom, var(--anchor-header-cta-tel-bg-preset));
  --anchor-header-cta-tel-text-active: var(--anchor-header-cta-tel-text-custom, var(--anchor-header-cta-tel-text-preset));
  --anchor-header-cta-tel-border-active: var(--anchor-header-cta-tel-border-custom, var(--anchor-header-cta-tel-border-preset));
  --anchor-header-cta-tel-accent-active: var(--anchor-header-cta-tel-accent-custom, var(--anchor-header-cta-tel-accent-preset));
  --anchor-header-cta-tel-icon-active: var(--anchor-header-cta-tel-icon-custom, var(--anchor-header-cta-tel-icon-preset));
  --anchor-header-cta-contact-bg-active: var(--anchor-header-cta-contact-bg-custom, var(--anchor-header-cta-contact-bg-preset));
  --anchor-header-cta-contact-text-active: var(--anchor-header-cta-contact-text-custom, var(--anchor-header-cta-contact-text-preset));
  --anchor-header-cta-contact-border-active: var(--anchor-header-cta-contact-border-custom, var(--anchor-header-cta-contact-border-preset));
  --anchor-header-cta-contact-accent-active: var(--anchor-header-cta-contact-accent-custom, var(--anchor-header-cta-contact-accent-preset));
  --anchor-header-cta-contact-icon-active: var(--anchor-header-cta-contact-icon-custom, var(--anchor-header-cta-contact-icon-preset));
}

.site-header .header-cta-button,
.site-header .header-tel__link,
.site-header .header-contact__link{
  position: relative;
  overflow: hidden;
  min-width: var(--anchor-header-cta-min-width);
  height: var(--anchor-header-cta-height);
  display: inline-flex;
  align-items: center;
  gap: var(--anchor-header-cta-gap);
  padding-inline: var(--anchor-header-cta-padding-x);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--anchor-header-cta-radius);
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: var(--anchor-header-cta-shadow);
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.site-header .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-active) !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-active) !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header .header-cta-button:hover,
.site-header .header-cta-button:focus-visible,
.site-header .header-tel__link:hover,
.site-header .header-tel__link:focus-visible,
.site-header .header-contact__link:hover,
.site-header .header-contact__link:focus-visible{
  transform: var(--anchor-header-cta-hover-transform);
  box-shadow: var(--anchor-header-cta-hover-shadow);
  text-decoration: none;
}

.site-header .header-cta-button:focus-visible,
.site-header .header-tel__link:focus-visible,
.site-header .header-contact__link:focus-visible{
  outline: 3px solid rgba(203,167,212,.45);
  outline: 3px solid color-mix(in srgb, var(--color-primary, #cba7d4) 45%, transparent);
  outline-offset: 3px;
}

.site-header .header-tel__icon,
.site-header .header-contact__icon{
  width: var(--anchor-header-cta-icon-size);
  height: var(--anchor-header-cta-icon-size);
  padding: var(--anchor-header-cta-icon-padding);
  border-radius: var(--anchor-header-cta-icon-radius);
  background: var(--anchor-header-cta-icon-bg);
  box-shadow: var(--anchor-header-cta-icon-shadow);
  box-sizing: border-box;
  color: currentColor;
}

.site-header .header-tel__icon{
  color: var(--anchor-header-cta-tel-icon-active);
}

.site-header .header-contact__icon{
  color: var(--anchor-header-cta-contact-icon-active);
}

.site-header .header-tel__icon-mask,
.site-header .header-contact__icon-mask{
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: var(--anchor-header-icon-mask);
  mask-image: var(--anchor-header-icon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}



/* GIFアニメーションは通常画像として扱い、プリセット側の色反転フィルターも無効化 */
.site-header .header-cta-icon--gif .header-tel__icon-img,
.site-header .header-cta-icon--gif .header-contact__icon-img{
  filter: none !important;
}
.site-header .header-tel__icon-inner,
.site-header .header-contact__icon-inner{
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
}

.site-header .header-tel__label,
.site-header .header-tel__number,
.site-header .header-tel__time,
.site-header .header-contact__label,
.site-header .header-contact__sub{
  color: inherit;
}

/* 01: シンプル枠線 */
.site-header.header-cta-style-outline{
  --anchor-header-cta-radius: 8px;
  --anchor-header-cta-shadow: 0 2px 0 rgba(0,0,0,.08);
  --anchor-header-cta-hover-shadow: 0 4px 12px rgba(0,0,0,.10);
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #111111;
  --anchor-header-cta-tel-border-preset: #111111;
  --anchor-header-cta-tel-accent-preset: #111111;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #111111;
  --anchor-header-cta-contact-border-preset: #111111;
  --anchor-header-cta-contact-accent-preset: #111111;
}

/* 02: ブランド塗り分け */
.site-header.header-cta-style-solid{
  --anchor-header-cta-radius: 10px;
  --anchor-header-cta-shadow: 0 8px 22px rgba(0,0,0,.10);
  --anchor-header-cta-hover-shadow: 0 12px 28px rgba(0,0,0,.16);
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-contact-bg-preset: #cba7d4;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: transparent;
  --anchor-header-cta-contact-accent-preset: #cba7d4;
}

/*
  プリセット02は「背景色」を単色として直接使わず、
  グラデーションのベース色として扱う。
  これによりカスタマイザーで背景色を変更してもグラデーションが消えない。
*/
.site-header.header-cta-style-solid .header-tel__link{
  background-color: var(--anchor-header-cta-tel-bg-active) !important;
  /* 電話ボタンは未指定時 #ffffff と表示がズレないよう、紫を混ぜない光沢だけにする */
  background-image: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%) !important;
}

.site-header.header-cta-style-solid .header-contact__link{
  background-color: var(--anchor-header-cta-contact-bg-active) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(0,0,0,.16) 100%) !important;
}

/* 03: やわらかカード */
.site-header.header-cta-style-soft{
  --anchor-header-cta-radius: 14px;
  --anchor-header-cta-shadow: 0 8px 24px rgba(0,0,0,.07);
  --anchor-header-cta-hover-shadow: 0 12px 30px rgba(0,0,0,.10);
  --anchor-header-cta-icon-size: 34px;
  --anchor-header-cta-icon-radius: 999px;
  --anchor-header-cta-icon-padding: 6px;
  --anchor-header-cta-icon-bg: #ffffff;
  --anchor-header-cta-icon-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  --anchor-header-cta-tel-bg-preset: #f8f4ff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #eadff0;
  --anchor-header-cta-tel-accent-preset: #eadff0;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #eadff0;
  --anchor-header-cta-contact-accent-preset: #eadff0;
}

/* 04: 丸み強めピル */
.site-header.header-cta-style-pill{
  --anchor-header-cta-height: 58px;
  --anchor-header-cta-radius: 999px;
  --anchor-header-cta-padding-x: 18px;
  --anchor-header-cta-shadow: 0 7px 18px rgba(0,0,0,.08);
  --anchor-header-cta-hover-shadow: 0 10px 24px rgba(0,0,0,.14);
  --anchor-header-cta-icon-size: 30px;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d9d9d9;
  --anchor-header-cta-tel-accent-preset: #d9d9d9;
  --anchor-header-cta-contact-bg-preset: #222222;
  --anchor-header-cta-contact-text-preset: #ffffff;
  --anchor-header-cta-contact-border-preset: #222222;
  --anchor-header-cta-contact-accent-preset: #222222;
}

.site-header.header-cta-style-pill .header-tel__label,
.site-header.header-cta-style-pill .header-tel__time,
.site-header.header-cta-style-pill .header-contact__sub{
  font-size: 9px;
}

/* 05: 斜めアクセント */
.site-header.header-cta-style-dark{
  --anchor-header-cta-height: 62px;
  --anchor-header-cta-radius: 14px;
  --anchor-header-cta-padding-x: 18px;
  --anchor-header-cta-shadow: 0 8px 22px rgba(0,0,0,.08);
  --anchor-header-cta-hover-shadow: 0 12px 28px rgba(0,0,0,.12);
  --anchor-header-cta-icon-size: 30px;
  --anchor-header-cta-icon-radius: 0;
  --anchor-header-cta-icon-padding: 0;
  --anchor-header-cta-icon-bg: transparent;
  --anchor-header-cta-icon-shadow: none;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #cba7d4;
  --anchor-header-cta-contact-accent-preset: #cba7d4;
}

/* 06: サイドバーアクセント */
.site-header.header-cta-style-minimal{
  --anchor-header-cta-height: 62px;
  --anchor-header-cta-radius: 12px;
  --anchor-header-cta-padding-x: 18px;
  --anchor-header-cta-shadow: 0 6px 18px rgba(0,0,0,.06);
  --anchor-header-cta-hover-shadow: 0 10px 24px rgba(0,0,0,.10);
  --anchor-header-cta-icon-size: 30px;
  --anchor-header-cta-icon-radius: 0;
  --anchor-header-cta-icon-padding: 0;
  --anchor-header-cta-icon-bg: transparent;
  --anchor-header-cta-icon-shadow: none;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-tel-icon-preset: currentColor;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #cba7d4;
  --anchor-header-cta-contact-accent-preset: #cba7d4;
  --anchor-header-cta-contact-icon-preset: currentColor;
}

/* 07: チケット風 */
.site-header.header-cta-style-glass{
  --anchor-header-cta-height: 60px;
  --anchor-header-cta-radius: 12px;
  --anchor-header-cta-padding-x: 18px;
  --anchor-header-cta-shadow: 0 6px 18px rgba(0,0,0,.07);
  --anchor-header-cta-hover-shadow: 0 10px 24px rgba(0,0,0,.11);
  --anchor-header-cta-icon-size: 28px;
  --anchor-header-cta-icon-radius: 0;
  --anchor-header-cta-icon-padding: 0;
  --anchor-header-cta-icon-bg: transparent;
  --anchor-header-cta-icon-shadow: none;
  --anchor-header-cta-tel-bg-preset: #fffdf8;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #555555;
  --anchor-header-cta-tel-accent-preset: #555555;
  --anchor-header-cta-contact-bg-preset: #fffdf8;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 08: 立体シャドウ */
.site-header.header-cta-style-raised{
  --anchor-header-cta-radius: 12px;
  --anchor-header-cta-shadow: 0 4px 0 rgba(0,0,0,.18), 0 12px 24px rgba(0,0,0,.10);
  --anchor-header-cta-hover-shadow: 0 2px 0 rgba(0,0,0,.20), 0 8px 18px rgba(0,0,0,.12);
  --anchor-header-cta-hover-transform: translateY(1px);
  --anchor-header-cta-icon-size: 32px;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d9d9d9;
  --anchor-header-cta-tel-accent-preset: #d9d9d9;
  --anchor-header-cta-contact-bg-preset: #cba7d4;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 09: 角丸なしビジネス */
.site-header.header-cta-style-square{
  --anchor-header-cta-height: 58px;
  --anchor-header-cta-radius: 0;
  --anchor-header-cta-shadow: none;
  --anchor-header-cta-hover-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  --anchor-header-cta-icon-size: 28px;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #222222;
  --anchor-header-cta-tel-accent-preset: #222222;
  --anchor-header-cta-contact-bg-preset: #222222;
  --anchor-header-cta-contact-text-preset: #ffffff;
  --anchor-header-cta-contact-border-preset: #222222;
  --anchor-header-cta-contact-accent-preset: #222222;
}
.site-header.header-cta-style-square .header-tel__label,
.site-header.header-cta-style-square .header-tel__time,
.site-header.header-cta-style-square .header-contact__sub{
  letter-spacing: .04em;
}

/* 10: 丸アイコン強調 */
.site-header.header-cta-style-badge{
  --anchor-header-cta-height: 62px;
  --anchor-header-cta-radius: 18px;
  --anchor-header-cta-padding-x: 18px;
  --anchor-header-cta-shadow: 0 9px 24px rgba(0,0,0,.09);
  --anchor-header-cta-hover-shadow: 0 13px 30px rgba(0,0,0,.13);
  --anchor-header-cta-icon-size: 38px;
  --anchor-header-cta-icon-radius: 999px;
  --anchor-header-cta-icon-padding: 8px;
  --anchor-header-cta-icon-bg: transparent;
  --anchor-header-cta-icon-shadow: none;
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d9d9d9;
  --anchor-header-cta-tel-accent-preset: #d9d9d9;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}


/* =========================================================
   Header CTA preset hardening
   - 05/06/07は既存保存値を保ったまま、別デザインに差し替え。
   - カスタマイザー色が指定された場合も、装飾の方向性は維持する。
   ========================================================= */

/* 05: 斜めアクセント */
.site-header.header-cta-style-dark .header-tel__link,
.site-header.header-cta-style-dark .header-contact__link{
  isolation: isolate;
  border-radius: 14px !important;
  border-width: 1px !important;
  overflow: hidden;
}

.site-header.header-cta-style-dark .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-active) !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header.header-cta-style-dark .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-active) !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header.header-cta-style-dark .header-tel__link::before,
.site-header.header-cta-style-dark .header-contact__link::before{
  content: "";
  position: absolute;
  inset: -35% auto -35% -28px;
  width: 58px;
  transform: rotate(14deg);
  z-index: 0;
  opacity: .95;
  transition: width .2s ease, opacity .2s ease;
}

.site-header.header-cta-style-dark .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active);
}

.site-header.header-cta-style-dark .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active);
}

.site-header.header-cta-style-dark .header-tel__link > *,
.site-header.header-cta-style-dark .header-contact__link > *{
  position: relative;
  z-index: 1;
}

.site-header.header-cta-style-dark .header-tel__icon,
.site-header.header-cta-style-dark .header-contact__icon{
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.header-cta-style-dark .header-tel__link:hover::before,
.site-header.header-cta-style-dark .header-tel__link:focus-visible::before,
.site-header.header-cta-style-dark .header-contact__link:hover::before,
.site-header.header-cta-style-dark .header-contact__link:focus-visible::before{
  width: 68px;
}

/* 06: サイドバーアクセント */
.site-header.header-cta-style-minimal .header-tel__link,
.site-header.header-cta-style-minimal .header-contact__link{
  isolation: isolate;
  border-radius: 12px !important;
  border-width: 1px !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

.site-header.header-cta-style-minimal .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-active) !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header.header-cta-style-minimal .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-active) !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header.header-cta-style-minimal .header-tel__link::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 52px;
  z-index: 0;
  transition: width .2s ease, opacity .2s ease;
}

.site-header.header-cta-style-minimal .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active);
}

.site-header.header-cta-style-minimal .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active);
}

.site-header.header-cta-style-minimal .header-tel__link > *,
.site-header.header-cta-style-minimal .header-contact__link > *{
  position: relative;
  z-index: 1;
}

.site-header.header-cta-style-minimal .header-tel__icon,
.site-header.header-cta-style-minimal .header-contact__icon{
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.header-cta-style-minimal .header-tel__icon-img,
.site-header.header-cta-style-minimal .header-contact__icon-img{
  filter: brightness(0) invert(1);
}

.site-header.header-cta-style-minimal .header-tel__link:hover,
.site-header.header-cta-style-minimal .header-tel__link:focus-visible,
.site-header.header-cta-style-minimal .header-contact__link:hover,
.site-header.header-cta-style-minimal .header-contact__link:focus-visible{
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}

.site-header.header-cta-style-minimal .header-tel__link:hover::before,
.site-header.header-cta-style-minimal .header-tel__link:focus-visible::before,
.site-header.header-cta-style-minimal .header-contact__link:hover::before,
.site-header.header-cta-style-minimal .header-contact__link:focus-visible::before{
  width: 58px;
}

/* 07: チケット風 */
.site-header.header-cta-style-glass .header-tel__link,
.site-header.header-cta-style-glass .header-contact__link{
  border-radius: 12px !important;
  border-style: dashed !important;
  border-width: 1px !important;
  overflow: hidden;
}

.site-header.header-cta-style-glass .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-active) !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header.header-cta-style-glass .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-active) !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header.header-cta-style-glass .header-tel__link::before,
.site-header.header-cta-style-glass .header-contact__link::before,
.site-header.header-cta-style-glass .header-tel__link::after,
.site-header.header-cta-style-glass .header-contact__link::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--anchor-color-header-bg, #f3f3f3);
  transform: translateY(-50%);
  z-index: 2;
}

.site-header.header-cta-style-glass .header-tel__link::before,
.site-header.header-cta-style-glass .header-contact__link::before{
  left: -8px;
}

.site-header.header-cta-style-glass .header-tel__link::after,
.site-header.header-cta-style-glass .header-contact__link::after{
  right: -8px;
}

.site-header.header-cta-style-glass .header-tel__icon,
.site-header.header-cta-style-glass .header-contact__icon{
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.header-cta-style-glass .header-tel__label,
.site-header.header-cta-style-glass .header-contact__sub{
  letter-spacing: .04em;
}

/* 10: 丸アイコン強調 - アイコン背景色は自動で入れない */
.site-header.header-cta-style-badge .header-tel__icon,
.site-header.header-cta-style-badge .header-contact__icon{
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.header-cta-style-badge .header-contact__icon-img,
.site-header.header-cta-style-badge .header-contact__icon-inner{
  filter: none !important;
}


/* =========================================================
   Header CTA color resolution
   - 電話 / お問い合わせの色を完全に分離して最終反映する
   - 未指定時は各プリセット値、指定時は該当ボタンの値だけを使う
   - 片方の色がもう片方へ流れ込まないよう、必ず --*-active 経由に統一
   ========================================================= */
.site-header .header-cta-button--tel,
.site-header .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-active) !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header .header-cta-button--contact,
.site-header .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-active) !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header .header-cta-button--tel .header-tel__icon,
.site-header .header-tel__link .header-tel__icon{
  color: var(--anchor-header-cta-tel-icon-active) !important;
}

.site-header .header-cta-button--contact .header-contact__icon,
.site-header .header-contact__link .header-contact__icon{
  color: var(--anchor-header-cta-contact-icon-active) !important;
}

/* 02：ブランド塗り分けは、色指定後もグラデーションを維持 */
.site-header.header-cta-style-solid .header-cta-button--tel,
.site-header.header-cta-style-solid .header-tel__link{
  background-color: var(--anchor-header-cta-tel-bg-active) !important;
  /* 電話ボタンはプリセット値 #ffffff と実表示がズレないよう、紫を混ぜない光沢だけにする */
  background-image: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%) !important;
}

.site-header.header-cta-style-solid .header-cta-button--contact,
.site-header.header-cta-style-solid .header-contact__link{
  background-color: var(--anchor-header-cta-contact-bg-active) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(0,0,0,.16) 100%) !important;
}

/* 05：斜めアクセントの装飾色も各ボタンの枠線色に分離 */
.site-header.header-cta-style-dark .header-cta-button--tel::before,
.site-header.header-cta-style-dark .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-dark .header-cta-button--contact::before,
.site-header.header-cta-style-dark .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

/* 06：サイドバーアクセントの帯色も各ボタンの枠線色に分離 */
.site-header.header-cta-style-minimal .header-cta-button--tel::before,
.site-header.header-cta-style-minimal .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-minimal .header-cta-button--contact::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

/* 06：画像アイコンを勝手に白化しない。色変更はマスク表示時だけ行う */
.site-header.header-cta-style-minimal .header-cta-icon--image .header-tel__icon-img,
.site-header.header-cta-style-minimal .header-cta-icon--image .header-contact__icon-img{
  filter: none !important;
}

@media (prefers-reduced-motion: reduce){
  .site-header .header-cta-button,
  .site-header .header-tel__link,
  .site-header .header-contact__link{
    transition: none;
  }

  .site-header .header-cta-button:hover,
  .site-header .header-cta-button:focus-visible,
  .site-header .header-tel__link:hover,
  .site-header .header-tel__link:focus-visible,
  .site-header .header-contact__link:hover,
  .site-header .header-contact__link:focus-visible{
    transform: none;
  }
}

/* =========================================================
   Header CTA: SPヘッダー内 / ハンバーガーメニュー内 表示
   ========================================================= */
.site-header .header-mobile-cta{
  display: none;
}

@media (max-width: 1205px){
  /*
    1025px〜1205pxでは layout.css の PC 用 @media(min-width:1025px) が
    .site-header__inner を flex に戻してしまうため、ここでSP/タブレット用の
    gridレイアウトを再確定する。
  */
  .site-header .site-header__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "branding right"
      "nav      nav";
    gap: 10px 12px;
    align-items: center;
  }

  .site-header.has-mobile-top-cta .site-header__inner{
    grid-template-areas:
      "branding right"
      "mobilecta mobilecta"
      "nav      nav";
  }

  .site-header .site-branding{
    grid-area: branding;
  }

  .site-header .site-header__right{
    display: contents;
  }

  .site-header .nav-toggle{
    grid-area: right;
    justify-self: end;
  }

  .site-header .global-nav{
    grid-area: nav;
  }

  /* layout.css のPC用 order 指定を、モバイルCTA内では明示的に打ち消す */
  .site-header .header-mobile-cta .header-tel{
    order: 1;
  }

  .site-header .header-mobile-cta .header-contact{
    order: 2;
  }

  .site-header .header-mobile-cta{
    width: 100%;
    box-sizing: border-box;
  }

  .site-header .header-mobile-cta .header-tel,
  .site-header .header-mobile-cta .header-contact{
    display: block !important;
    min-width: 0;
  }

  .site-header .header-mobile-cta .header-cta-button,
  .site-header .header-mobile-cta .header-tel__link,
  .site-header .header-mobile-cta .header-contact__link{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    justify-content: center;
  }

  /* SPヘッダー内：ロゴ・ハンバーガーの下に横並びで表示 */
  .site-header .header-mobile-cta--top{
    display: flex;
    grid-area: mobilecta;
    gap: 8px;
    margin-top: 0;
  }

  .site-header .header-mobile-cta--top .header-tel,
  .site-header .header-mobile-cta--top .header-contact{
    flex: 1 1 0;
  }

  .site-header .header-mobile-cta--top .header-cta-button,
  .site-header .header-mobile-cta--top .header-tel__link,
  .site-header .header-mobile-cta--top .header-contact__link{
    padding: 8px 10px;
    gap: 7px;
  }

  .site-header .header-mobile-cta--top .header-tel__icon,
  .site-header .header-mobile-cta--top .header-contact__icon{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .site-header .header-mobile-cta--top .header-tel__label,
  .site-header .header-mobile-cta--top .header-contact__sub{
    display: none;
  }

  .site-header .header-mobile-cta--top .header-tel__number,
  .site-header .header-mobile-cta--top .header-contact__label{
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .site-header .header-mobile-cta--top .header-tel__time{
    display: none;
  }

  /* ドロワー内：メニュー下に縦積みで表示 */
  .site-header .global-nav .header-mobile-cta--drawer{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.1);
  }

  .site-header .global-nav .header-mobile-cta--drawer .header-tel,
  .site-header .global-nav .header-mobile-cta--drawer .header-contact{
    width: 100%;
  }

  .site-header .global-nav .header-mobile-cta--drawer .header-cta-button,
  .site-header .global-nav .header-mobile-cta--drawer .header-tel__link,
  .site-header .global-nav .header-mobile-cta--drawer .header-contact__link{
    min-height: 58px;
    padding: 10px 14px;
    justify-content: flex-start;
  }
}

@media (max-width: 520px){
  .site-header .header-mobile-cta--top{
    flex-direction: column;
  }

  .site-header .header-mobile-cta--top .header-cta-button,
  .site-header .header-mobile-cta--top .header-tel__link,
  .site-header .header-mobile-cta--top .header-contact__link{
    justify-content: center;
  }
}

@media (min-width: 1206px){
  .site-header .header-mobile-cta{
    display: none !important;
  }
}


/* =========================================================
   Header CTA color source fix 2.7.99
   - 背景色/文字色/枠線色をクリアした時は、必ずプリセット固定色に戻す
   - ヘッダーCTAは主要カラーや見出し色を勝手に参照しない
   - 任意色は output-css.php が出す --anchor-header-cta-*-custom だけを参照する
   ========================================================= */
.site-header{
  --anchor-header-cta-tel-bg-active: var(--anchor-header-cta-tel-bg-custom, var(--anchor-header-cta-tel-bg-preset));
  --anchor-header-cta-tel-text-active: var(--anchor-header-cta-tel-text-custom, var(--anchor-header-cta-tel-text-preset));
  --anchor-header-cta-tel-border-active: var(--anchor-header-cta-tel-border-custom, var(--anchor-header-cta-tel-border-preset));
  --anchor-header-cta-tel-accent-active: var(--anchor-header-cta-tel-accent-custom, var(--anchor-header-cta-tel-accent-preset));
  --anchor-header-cta-tel-icon-active: var(--anchor-header-cta-tel-icon-custom, var(--anchor-header-cta-tel-icon-preset));
  --anchor-header-cta-contact-bg-active: var(--anchor-header-cta-contact-bg-custom, var(--anchor-header-cta-contact-bg-preset));
  --anchor-header-cta-contact-text-active: var(--anchor-header-cta-contact-text-custom, var(--anchor-header-cta-contact-text-preset));
  --anchor-header-cta-contact-border-active: var(--anchor-header-cta-contact-border-custom, var(--anchor-header-cta-contact-border-preset));
  --anchor-header-cta-contact-accent-active: var(--anchor-header-cta-contact-accent-custom, var(--anchor-header-cta-contact-accent-preset));
  --anchor-header-cta-contact-icon-active: var(--anchor-header-cta-contact-icon-custom, var(--anchor-header-cta-contact-icon-preset));
}

/* 01: シンプル枠線 */
.site-header.header-cta-style-outline{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #111111;
  --anchor-header-cta-tel-border-preset: #111111;
  --anchor-header-cta-tel-accent-preset: #111111;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #111111;
  --anchor-header-cta-contact-border-preset: #111111;
  --anchor-header-cta-contact-accent-preset: #111111;
}

/* 02: ブランド塗り分け */
.site-header.header-cta-style-solid{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-contact-bg-preset: #cba7d4;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 03: やわらかカード */
.site-header.header-cta-style-soft{
  --anchor-header-cta-tel-bg-preset: #f8f4ff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #eadff0;
  --anchor-header-cta-tel-accent-preset: #eadff0;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #eadff0;
  --anchor-header-cta-contact-accent-preset: #eadff0;
}

/* 04: 丸み強めピル */
.site-header.header-cta-style-pill{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d8d8d8;
  --anchor-header-cta-tel-accent-preset: #d8d8d8;
  --anchor-header-cta-contact-bg-preset: #cba7d4;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 05: 斜めアクセント */
.site-header.header-cta-style-dark{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #cba7d4;
  --anchor-header-cta-contact-accent-preset: #cba7d4;
}

/* 06: サイドバーアクセント */
.site-header.header-cta-style-minimal{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #b78fc3;
  --anchor-header-cta-tel-accent-preset: #b78fc3;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #cba7d4;
  --anchor-header-cta-contact-accent-preset: #cba7d4;
}

/* 07: チケット風 */
.site-header.header-cta-style-glass{
  --anchor-header-cta-tel-bg-preset: #fffdf8;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #555555;
  --anchor-header-cta-tel-accent-preset: #555555;
  --anchor-header-cta-contact-bg-preset: #fffdf8;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 08: 立体シャドウ */
.site-header.header-cta-style-raised{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d8d8d8;
  --anchor-header-cta-tel-accent-preset: #d8d8d8;
  --anchor-header-cta-contact-bg-preset: #cba7d4;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* 09: 角丸なしビジネス */
.site-header.header-cta-style-square{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #222222;
  --anchor-header-cta-tel-accent-preset: #222222;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #222222;
  --anchor-header-cta-contact-accent-preset: #222222;
}

/* 10: 丸アイコン強調 */
.site-header.header-cta-style-badge{
  --anchor-header-cta-tel-bg-preset: #ffffff;
  --anchor-header-cta-tel-text-preset: #222222;
  --anchor-header-cta-tel-border-preset: #d8d8d8;
  --anchor-header-cta-tel-accent-preset: #d8d8d8;
  --anchor-header-cta-contact-bg-preset: #ffffff;
  --anchor-header-cta-contact-text-preset: #222222;
  --anchor-header-cta-contact-border-preset: #b78fc3;
  --anchor-header-cta-contact-accent-preset: #b78fc3;
}

/* クリア後の最終反映。古いbackground指定や片側指定をここで必ず上書きする。 */
.site-header .header-cta-button--tel,
.site-header .header-tel__link{
  background-color: var(--anchor-header-cta-tel-bg-active) !important;
  background-image: none !important;
  border-color: var(--anchor-header-cta-tel-border-active) !important;
  color: var(--anchor-header-cta-tel-text-active) !important;
}

.site-header .header-cta-button--contact,
.site-header .header-contact__link{
  background-color: var(--anchor-header-cta-contact-bg-active) !important;
  background-image: none !important;
  border-color: var(--anchor-header-cta-contact-border-active) !important;
  color: var(--anchor-header-cta-contact-text-active) !important;
}

.site-header .header-cta-button--tel .header-tel__icon,
.site-header .header-tel__link .header-tel__icon{
  color: var(--anchor-header-cta-tel-icon-active) !important;
}

.site-header .header-cta-button--contact .header-contact__icon,
.site-header .header-contact__link .header-contact__icon{
  color: var(--anchor-header-cta-contact-icon-active) !important;
}

/* 02: グラデーションは残す。ただし電話ボタンの #ffffff に紫が混ざらないようにする。 */
.site-header.header-cta-style-solid .header-cta-button--tel,
.site-header.header-cta-style-solid .header-tel__link{
  background-color: var(--anchor-header-cta-tel-bg-active) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%) !important;
}

.site-header.header-cta-style-solid .header-cta-button--contact,
.site-header.header-cta-style-solid .header-contact__link{
  background-color: var(--anchor-header-cta-contact-bg-active) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(183,143,195,.30) 100%) !important;
}

/* 05/06: 装飾色も枠線色と同じ出所に固定する。 */
.site-header.header-cta-style-dark .header-cta-button--tel::before,
.site-header.header-cta-style-dark .header-tel__link::before,
.site-header.header-cta-style-minimal .header-cta-button--tel::before,
.site-header.header-cta-style-minimal .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-dark .header-cta-button--contact::before,
.site-header.header-cta-style-dark .header-contact__link::before,
.site-header.header-cta-style-minimal .header-cta-button--contact::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

/* 07: チケット風の枠線が消えないように最終固定する。 */
.site-header.header-cta-style-glass .header-cta-button--tel,
.site-header.header-cta-style-glass .header-tel__link,
.site-header.header-cta-style-glass .header-cta-button--contact,
.site-header.header-cta-style-glass .header-contact__link{
  border-style: dashed !important;
  border-width: 1px !important;
}

.site-header.header-cta-style-glass .header-cta-button--tel,
.site-header.header-cta-style-glass .header-tel__link{
  border-color: var(--anchor-header-cta-tel-border-active) !important;
}

.site-header.header-cta-style-glass .header-cta-button--contact,
.site-header.header-cta-style-glass .header-contact__link{
  border-color: var(--anchor-header-cta-contact-border-active) !important;
}

/* 10: アイコン背景色は自動では入れない。 */
.site-header.header-cta-style-badge .header-tel__icon,
.site-header.header-cta-style-badge .header-contact__icon{
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   Header CTA specified-color priority 2.8.02
   - 背景色を指定した時は、プリセットのグラデーションや疑似要素の色重ねを止める
   - 文字色 / 枠線色を指定した時は、そのボタンだけ指定色を最終優先する
   - 未指定時は従来どおりプリセットの装飾を残す
   ========================================================= */
.site-header.has-header-cta-tel-bg-custom .header-cta-button--tel,
.site-header.has-header-cta-tel-bg-custom .header-tel__link{
  background: var(--anchor-header-cta-tel-bg-custom) !important;
  background-image: none !important;
}

.site-header.has-header-cta-contact-bg-custom .header-cta-button--contact,
.site-header.has-header-cta-contact-bg-custom .header-contact__link{
  background: var(--anchor-header-cta-contact-bg-custom) !important;
  background-image: none !important;
}

.site-header.has-header-cta-tel-text-custom .header-cta-button--tel,
.site-header.has-header-cta-tel-text-custom .header-tel__link,
.site-header.has-header-cta-tel-text-custom .header-tel__label,
.site-header.has-header-cta-tel-text-custom .header-tel__number,
.site-header.has-header-cta-tel-text-custom .header-tel__time{
  color: var(--anchor-header-cta-tel-text-custom) !important;
}

.site-header.has-header-cta-contact-text-custom .header-cta-button--contact,
.site-header.has-header-cta-contact-text-custom .header-contact__link,
.site-header.has-header-cta-contact-text-custom .header-contact__label,
.site-header.has-header-cta-contact-text-custom .header-contact__sub{
  color: var(--anchor-header-cta-contact-text-custom) !important;
}

.site-header.has-header-cta-tel-border-custom .header-cta-button--tel,
.site-header.has-header-cta-tel-border-custom .header-tel__link{
  border-color: var(--anchor-header-cta-tel-border-custom) !important;
}

.site-header.has-header-cta-contact-border-custom .header-cta-button--contact,
.site-header.has-header-cta-contact-border-custom .header-contact__link{
  border-color: var(--anchor-header-cta-contact-border-custom) !important;
}

/*
  背景色を指定した時も、05/06/07の「形を作る装飾」は消さない。
  2.8.02では指定色優先のために疑似要素まで非表示にしていたが、
  その結果、斜めアクセント / サイドバーアクセント / チケット穴が消えていた。
  ここではプリセット02の余計な背景グラデーションだけを抑制し、
  05〜07の疑似要素は下の2.8.04補正で表示を維持する。
*/
.site-header.has-header-cta-tel-bg-custom.header-cta-style-solid .header-cta-button--tel,
.site-header.has-header-cta-tel-bg-custom.header-cta-style-solid .header-tel__link,
.site-header.has-header-cta-contact-bg-custom.header-cta-style-solid .header-cta-button--contact,
.site-header.has-header-cta-contact-bg-custom.header-cta-style-solid .header-contact__link{
  background-image: none !important;
}

/* =========================================================
   Header CTA preset 02 color-priority balance 2.8.03
   - 指定色優先のまま、プリセット02の「ブランド塗り分け」らしさは残す
   - 指定色と無関係な紫/黒を混ぜず、指定色に白いハイライトだけを重ねる
   - #ffffff 指定時は白の見た目を崩さない
   ========================================================= */
.site-header.has-header-cta-tel-bg-custom.header-cta-style-solid .header-cta-button--tel,
.site-header.has-header-cta-tel-bg-custom.header-cta-style-solid .header-tel__link{
  background-color: var(--anchor-header-cta-tel-bg-custom) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 44%, rgba(255,255,255,0) 100%) !important;
}

.site-header.has-header-cta-contact-bg-custom.header-cta-style-solid .header-cta-button--contact,
.site-header.has-header-cta-contact-bg-custom.header-cta-style-solid .header-contact__link{
  background-color: var(--anchor-header-cta-contact-bg-custom) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 44%, rgba(255,255,255,0) 100%) !important;
}


/* =========================================================
   Header CTA preset shape restore 2.8.04
   - 指定色優先でも、05/06/07のプリセット形状は残す
   - 05: 斜めアクセント / 06: サイドバーアクセント / 07: チケット風
   ========================================================= */

/* 05: 斜めアクセントを常に表示 */
.site-header.header-cta-style-dark .header-cta-button--tel,
.site-header.header-cta-style-dark .header-tel__link,
.site-header.header-cta-style-dark .header-cta-button--contact,
.site-header.header-cta-style-dark .header-contact__link{
  isolation: isolate;
  overflow: hidden;
}

.site-header.header-cta-style-dark .header-cta-button--tel::before,
.site-header.header-cta-style-dark .header-tel__link::before,
.site-header.header-cta-style-dark .header-cta-button--contact::before,
.site-header.header-cta-style-dark .header-contact__link::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -38% auto -38% -30px;
  width: 60px;
  transform: rotate(14deg);
  z-index: 0;
  opacity: .95;
  pointer-events: none;
}

.site-header.header-cta-style-dark .header-cta-button--tel::before,
.site-header.header-cta-style-dark .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-dark .header-cta-button--contact::before,
.site-header.header-cta-style-dark .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

.site-header.header-cta-style-dark .header-cta-button--tel > *,
.site-header.header-cta-style-dark .header-tel__link > *,
.site-header.header-cta-style-dark .header-cta-button--contact > *,
.site-header.header-cta-style-dark .header-contact__link > *{
  position: relative;
  z-index: 1;
}

/* 06: サイドバーアクセントを常に表示 */
.site-header.header-cta-style-minimal .header-cta-button--tel,
.site-header.header-cta-style-minimal .header-tel__link,
.site-header.header-cta-style-minimal .header-cta-button--contact,
.site-header.header-cta-style-minimal .header-contact__link{
  isolation: isolate;
  overflow: hidden;
  padding-left: max(var(--anchor-header-cta-padding-x), 18px);
}

.site-header.header-cta-style-minimal .header-cta-button--tel::before,
.site-header.header-cta-style-minimal .header-tel__link::before,
.site-header.header-cta-style-minimal .header-cta-button--contact::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

.site-header.header-cta-style-minimal .header-cta-button--tel::before,
.site-header.header-cta-style-minimal .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-minimal .header-cta-button--contact::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

.site-header.header-cta-style-minimal .header-cta-button--tel > *,
.site-header.header-cta-style-minimal .header-tel__link > *,
.site-header.header-cta-style-minimal .header-cta-button--contact > *,
.site-header.header-cta-style-minimal .header-contact__link > *{
  position: relative;
  z-index: 1;
}

/* 07: チケット風を分かりやすくする */
.site-header.header-cta-style-glass .header-cta-button--tel,
.site-header.header-cta-style-glass .header-tel__link,
.site-header.header-cta-style-glass .header-cta-button--contact,
.site-header.header-cta-style-glass .header-contact__link{
  isolation: isolate;
  overflow: visible;
  border-style: dashed !important;
  border-width: 2px !important;
  border-radius: 14px !important;
}

.site-header.header-cta-style-glass .header-cta-button--tel,
.site-header.header-cta-style-glass .header-tel__link{
  border-color: var(--anchor-header-cta-tel-border-active) !important;
}

.site-header.header-cta-style-glass .header-cta-button--contact,
.site-header.header-cta-style-glass .header-contact__link{
  border-color: var(--anchor-header-cta-contact-border-active) !important;
}

.site-header.header-cta-style-glass .header-cta-button--tel::before,
.site-header.header-cta-style-glass .header-tel__link::before,
.site-header.header-cta-style-glass .header-cta-button--contact::before,
.site-header.header-cta-style-glass .header-contact__link::before,
.site-header.header-cta-style-glass .header-cta-button--tel::after,
.site-header.header-cta-style-glass .header-tel__link::after,
.site-header.header-cta-style-glass .header-cta-button--contact::after,
.site-header.header-cta-style-glass .header-contact__link::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--anchor-color-header-bg, #ffffff) !important;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

.site-header.header-cta-style-glass .header-cta-button--tel::before,
.site-header.header-cta-style-glass .header-tel__link::before,
.site-header.header-cta-style-glass .header-cta-button--contact::before,
.site-header.header-cta-style-glass .header-contact__link::before{
  left: -10px;
}

.site-header.header-cta-style-glass .header-cta-button--tel::after,
.site-header.header-cta-style-glass .header-tel__link::after,
.site-header.header-cta-style-glass .header-cta-button--contact::after,
.site-header.header-cta-style-glass .header-contact__link::after{
  right: -10px;
}

.site-header.header-cta-style-glass .header-tel__texts,
.site-header.header-cta-style-glass .header-contact__texts{
  border-left: 1px dashed currentColor;
  padding-left: 12px;
  margin-left: 2px;
}


/* =========================================================
   Header CTA accent color separation 2.8.05
   - 枠線色とは別に「アクセント色」を持たせる
   - 05: 斜めアクセント / 06: 左サイド帯 / 07: チケット風の区切り線
   ========================================================= */
.site-header.header-cta-style-dark .header-cta-button--tel::before,
.site-header.header-cta-style-dark .header-tel__link::before,
.site-header.header-cta-style-minimal .header-cta-button--tel::before,
.site-header.header-cta-style-minimal .header-tel__link::before{
  background: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-dark .header-cta-button--contact::before,
.site-header.header-cta-style-dark .header-contact__link::before,
.site-header.header-cta-style-minimal .header-cta-button--contact::before,
.site-header.header-cta-style-minimal .header-contact__link::before{
  background: var(--anchor-header-cta-contact-accent-active) !important;
}

.site-header.header-cta-style-glass .header-tel__texts{
  border-left-color: var(--anchor-header-cta-tel-accent-active) !important;
}

.site-header.header-cta-style-glass .header-contact__texts{
  border-left-color: var(--anchor-header-cta-contact-accent-active) !important;
}

/* カスタマイザー：ヘッダーCTA文字サイズ・行間 */
.site-header .header-tel__label{
  font-size: var(--anchor-header-tel-label-font-size, 10px);
  line-height: var(--anchor-header-tel-label-line-height, 1.2);
}
.site-header .header-tel__number{
  font-size: var(--anchor-header-tel-number-font-size, 15px);
  line-height: var(--anchor-header-tel-number-line-height, 1.2);
}
.site-header .header-tel__time{
  font-size: var(--anchor-header-tel-time-font-size, 10px);
  line-height: var(--anchor-header-tel-time-line-height, 1.3);
}
.site-header .header-contact__label{
  font-size: var(--anchor-header-contact-label-font-size, 13px);
  line-height: var(--anchor-header-contact-label-line-height, 1.2);
}
.site-header .header-contact__sub{
  font-size: var(--anchor-header-contact-sub-font-size, 10px);
  line-height: var(--anchor-header-contact-sub-line-height, 1.25);
}

/* 2.8.33 ヘッダーCTA：各テキスト要素の個別文字色 */
.site-header{
  --anchor-header-cta-tel-label-text-active: var(--anchor-header-cta-tel-label-text-custom, var(--anchor-header-cta-tel-text-active));
  --anchor-header-cta-tel-number-text-active: var(--anchor-header-cta-tel-number-text-custom, var(--anchor-header-cta-tel-text-active));
  --anchor-header-cta-tel-time-text-active: var(--anchor-header-cta-tel-time-text-custom, var(--anchor-header-cta-tel-text-active));
  --anchor-header-cta-contact-label-text-active: var(--anchor-header-cta-contact-label-text-custom, var(--anchor-header-cta-contact-text-active));
  --anchor-header-cta-contact-sub-text-active: var(--anchor-header-cta-contact-sub-text-custom, var(--anchor-header-cta-contact-text-active));
}

.site-header .header-tel__label{
  color: var(--anchor-header-cta-tel-label-text-active) !important;
}
.site-header .header-tel__number{
  color: var(--anchor-header-cta-tel-number-text-active) !important;
}
.site-header .header-tel__time{
  color: var(--anchor-header-cta-tel-time-text-active) !important;
}
.site-header .header-contact__label{
  color: var(--anchor-header-cta-contact-label-text-active) !important;
}
.site-header .header-contact__sub{
  color: var(--anchor-header-cta-contact-sub-text-active) !important;
}

/* 2.8.34 ヘッダーCTA：個別文字色の反映優先度修正 */
.site-header,
.drawer-menu,
.header-drawer,
.global-nav,
body{
  --anchor-header-cta-tel-label-text-active: var(--anchor-header-cta-tel-label-text-custom, var(--anchor-header-cta-tel-text-active, var(--anchor-header-cta-tel-text-preset)));
  --anchor-header-cta-tel-number-text-active: var(--anchor-header-cta-tel-number-text-custom, var(--anchor-header-cta-tel-text-active, var(--anchor-header-cta-tel-text-preset)));
  --anchor-header-cta-tel-time-text-active: var(--anchor-header-cta-tel-time-text-custom, var(--anchor-header-cta-tel-text-active, var(--anchor-header-cta-tel-text-preset)));
  --anchor-header-cta-contact-label-text-active: var(--anchor-header-cta-contact-label-text-custom, var(--anchor-header-cta-contact-text-active, var(--anchor-header-cta-contact-text-preset)));
  --anchor-header-cta-contact-sub-text-active: var(--anchor-header-cta-contact-sub-text-custom, var(--anchor-header-cta-contact-text-active, var(--anchor-header-cta-contact-text-preset)));
}

/* 既存の .has-header-cta-*-text-custom より後・同等以上の詳細度で上書き */
.site-header.site-header .header-tel__label,
.site-header.has-header-cta-tel-text-custom .header-tel__label,
.header-tel .header-tel__label{
  color: var(--anchor-header-cta-tel-label-text-active) !important;
}
.site-header.site-header .header-tel__number,
.site-header.has-header-cta-tel-text-custom .header-tel__number,
.header-tel .header-tel__number{
  color: var(--anchor-header-cta-tel-number-text-active) !important;
}
.site-header.site-header .header-tel__time,
.site-header.has-header-cta-tel-text-custom .header-tel__time,
.header-tel .header-tel__time{
  color: var(--anchor-header-cta-tel-time-text-active) !important;
}
.site-header.site-header .header-contact__label,
.site-header.has-header-cta-contact-text-custom .header-contact__label,
.header-contact .header-contact__label{
  color: var(--anchor-header-cta-contact-label-text-active) !important;
}
.site-header.site-header .header-contact__sub,
.site-header.has-header-cta-contact-text-custom .header-contact__sub,
.header-contact .header-contact__sub{
  color: var(--anchor-header-cta-contact-sub-text-active) !important;
}

/* 2.8.37 ヘッダーCTA：電話番号と受付時間の文字色 fallback 分離 */
.site-header,
.drawer-menu,
.header-drawer,
.global-nav,
body{
  --anchor-header-cta-tel-label-text-active: var(--anchor-header-cta-tel-label-text-custom, var(--anchor-header-cta-tel-text-preset));
  --anchor-header-cta-tel-number-text-active: var(--anchor-header-cta-tel-number-text-custom, var(--anchor-header-cta-tel-text-preset));
  --anchor-header-cta-tel-time-text-active: var(--anchor-header-cta-tel-time-text-custom, var(--anchor-header-cta-tel-text-preset));
  --anchor-header-cta-contact-label-text-active: var(--anchor-header-cta-contact-label-text-custom, var(--anchor-header-cta-contact-text-preset));
  --anchor-header-cta-contact-sub-text-active: var(--anchor-header-cta-contact-sub-text-custom, var(--anchor-header-cta-contact-text-preset));
}

.site-header.site-header .header-tel__label,
.site-header.has-header-cta-tel-label-text-custom .header-tel__label,
.site-header.has-header-cta-tel-text-custom .header-tel__label,
.header-tel .header-tel__label{
  color: var(--anchor-header-cta-tel-label-text-active) !important;
}

.site-header.site-header .header-tel__number,
.site-header.has-header-cta-tel-text-custom .header-tel__number,
.header-tel .header-tel__number{
  color: var(--anchor-header-cta-tel-number-text-active) !important;
}

.site-header.site-header .header-tel__time,
.site-header.has-header-cta-tel-time-text-custom .header-tel__time,
.site-header.has-header-cta-tel-text-custom .header-tel__time,
.header-tel .header-tel__time{
  color: var(--anchor-header-cta-tel-time-text-active) !important;
}

.site-header.site-header .header-contact__label,
.site-header.has-header-cta-contact-label-text-custom .header-contact__label,
.site-header.has-header-cta-contact-text-custom .header-contact__label,
.header-contact .header-contact__label{
  color: var(--anchor-header-cta-contact-label-text-active) !important;
}

.site-header.site-header .header-contact__sub,
.site-header.has-header-cta-contact-text-custom .header-contact__sub,
.header-contact .header-contact__sub{
  color: var(--anchor-header-cta-contact-sub-text-active) !important;
}