/* ==========================================================
   自動生成（06_wordpress/_tools/build_wp.py）— 手で直さない
   元：05_coding/assets/css/components.css
   変更点：各セレクタの頭に :is(.kk-wp, .editor-styles-wrapper) を足しただけ（値は同じ）。.kk-wp は SWELL の #body_wrap に付く
   SWELL の .post_content h2 などより詳細度を上げ、管理画面のエディタにも同じ見た目を出すため
   ========================================================== */
/* ==========================================================
   components.css — 共通部品（全ページで使う）
   命名：.kk-c-<部品>__<要素>--<変化>（FLOCSS 風・BEM）
   値は tokens.css の変数だけを使う。Figma の px 指定は「px ÷ 文字サイズ」で em に直して書いている
   第2段階（下層ページ）で各担当が parts/ に作った部品も 24〜33 に統合済み（2026-10-13）。parts/ は廃止
   ========================================================== */
/* =========================================================
   1. ボタン（Figma: Button 16:43）
   2026-10-16 形を変更：角丸（ピル型）＋右端の丸いアイコン。色は従来のまま（ユーザー指示）
   アイコンの丸は、ボタンの高さから上下の余白を引いた大きさ。右の余白＝上下の余白
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--kk-radius-pill);
  font-family: var(--kk-ff-base);
  font-weight: var(--kk-fw-bold);
  letter-spacing: var(--kk-ls-button);
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  transition: color var(--kk-dur-base) var(--kk-ease-base),
              background-color var(--kk-dur-fast) var(--kk-ease-base),
              border-color var(--kk-dur-base) var(--kk-ease-base),
              box-shadow var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button__arrow {
  flex: none;
  font-weight: var(--kk-fw-regular);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* Primary・Fill・Secondary：幅が足りないときだけ文字を折り返す（はみ出し防止 2026-10-16） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary { white-space: normal; word-break: auto-phrase; } /* auto-phrase：文節で折り返す（Chrome 119+。ほかは通常の折り返し） */

/* 丸いアイコン（Primary・Fill・Secondary。Text は矢印だけのまま） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary .kk-c-button__arrow {
  display: inline-grid;
  place-items: center;
  width: var(--kk-btn-icon);
  height: var(--kk-btn-icon);
  border-radius: 50%;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color var(--kk-dur-base) var(--kk-ease-base),
              color var(--kk-dur-base) var(--kk-ease-base),
              box-shadow var(--kk-dur-base) var(--kk-ease-base),
              transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:focus-visible .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill:hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill:focus-visible .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:focus-visible .kk-c-button__arrow { transform: translateX(3px); }

/* 矢印：シェブロン（>）を CSS で描く（2026-10-16 ユーザー指示）。HTML の「→」は aria-hidden なので文字は隠すだけ */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button:is(.kk-c-button--primary, .kk-c-button--fill, .kk-c-button--secondary) .kk-c-button__arrow {
  --kk-chev: calc(var(--kk-btn-icon) * 0.2);
  font-size: 0;
  position: relative;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary .kk-c-button__arrow { --kk-chev: calc(var(--kk-btn-icon-s) * 0.22); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button:is(.kk-c-button--primary, .kk-c-button--fill, .kk-c-button--secondary) .kk-c-button__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--kk-chev);
  height: var(--kk-chev);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: translate(-65%, -50%) rotate(45deg);
}

/* Primary：橙の1px枠。ホバーで左から橙が流れ込む（380ms） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary {
  width: var(--kk-btn-primary-w);
  max-width: 100%;
  min-height: var(--kk-btn-primary-h);
  padding-inline: var(--kk-btn-primary-px) calc((var(--kk-btn-primary-h) - var(--kk-btn-icon)) / 2);
  border: 1px solid var(--kk-color-main);
  color: var(--kk-color-accent-light);
  font-size: var(--kk-fs-button);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary .kk-c-button__arrow {
  font-size: 20px;
  background: var(--kk-color-main);
  color: var(--kk-color-button-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kk-color-main);
  transform: translateX(-102%);
  transition: transform var(--kk-dur-wipe) var(--kk-ease-wipe);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:focus-visible { color: var(--kk-color-button-text); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:hover::before,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:focus-visible::before { transform: translateX(0); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary:focus-visible .kk-c-button__arrow {
  background: var(--kk-color-text);
  color: var(--kk-color-main);
}

/* Fill：橙の塗り（共通CTA・送信）。左が明るい橙→右が濃い橙のグラデーション */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill {
  width: var(--kk-btn-fill-w);
  max-width: 100%;
  min-height: var(--kk-btn-fill-h);
  padding-inline: var(--kk-btn-fill-px) calc((var(--kk-btn-fill-h) - var(--kk-btn-icon)) / 2);
  background: var(--kk-gradient-button-fill);
  box-shadow: var(--kk-shadow-button-fill);
  color: var(--kk-color-button-text);
  font-size: var(--kk-fs-button-l);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill .kk-c-button__arrow {
  font-size: 20px;
  background: var(--kk-color-text);
  color: var(--kk-color-main);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill:focus-visible {
  background: var(--kk-gradient-button-fill-hover);
  box-shadow: var(--kk-shadow-button-fill-hover);
}

/* Secondary：白20%の枠（LINE・副CTA）。丸は線だけ、ホバーで橙に塗る */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary {
  width: 320px;
  max-width: 100%;
  min-height: var(--kk-btn-secondary-h);
  padding-inline: var(--kk-btn-secondary-px) calc((var(--kk-btn-secondary-h) - var(--kk-btn-icon-s)) / 2);
  border: 1px solid var(--kk-color-border-strong);
  color: var(--kk-color-text);
  font-size: var(--kk-fs-button);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary .kk-c-button__arrow {
  width: var(--kk-btn-icon-s);
  height: var(--kk-btn-icon-s);
  font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:focus-visible {
  border-color: var(--kk-color-accent);
  color: var(--kk-color-accent-light);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary:focus-visible .kk-c-button__arrow {
  background: var(--kk-color-accent);
  box-shadow: none;
  color: var(--kk-color-button-text);
}

:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--tall { min-height: var(--kk-btn-fill-h); }

/* Text：下線つきのテキストリンク（「詳しく見る →」など） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text {
  justify-content: flex-start;
  gap: 8px;
  padding-block: var(--kk-btn-text-py);
  border-bottom: 1px solid var(--kk-color-text-link-line);
  border-radius: 0;
  color: var(--kk-color-text-link);
  font-size: 14px;
  font-weight: var(--kk-fw-regular);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  overflow: visible;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text:focus-visible { color: var(--kk-color-accent-light); border-color: var(--kk-color-accent); }
/* Text の矢印もシェブロン（>）。ボタンと同じ描き方（2026-10-16 ユーザー指示） */
:is(.kk-wp, .editor-styles-wrapper) :is(.kk-c-button--text, .kk-p-top-hero__link, .kk-p-works-card-more) .kk-c-button__arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  transition: transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) :is(.kk-c-button--text, .kk-p-top-hero__link, .kk-p-works-card-more) .kk-c-button__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  border-radius: 1px;
  transform: translate(-65%, -50%) rotate(45deg);
}
:is(.kk-wp, .editor-styles-wrapper) :is(.kk-c-button--text, .kk-p-top-hero__link, .kk-p-works-card-more):hover .kk-c-button__arrow,
:is(.kk-wp, .editor-styles-wrapper) :is(.kk-c-button--text, .kk-p-top-hero__link, .kk-p-works-card-more):focus-visible .kk-c-button__arrow { transform: translateX(3px); }
/* 下向き（ページ内リンク「フォームへ進む」など） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text .kk-c-button__arrow--down::before { transform: translate(-50%, -75%) rotate(135deg); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text:hover .kk-c-button__arrow--down,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-button--text:focus-visible .kk-c-button__arrow--down { transform: translateY(3px); }

/* ボタンの並び */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary { width: 100%; }
}

/* 幅の狭い SP（〜400px）：文字の入る幅を広げる 2026-10-16 */
@media (max-width: 400px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary,
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill,
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary {
    gap: 8px;
    padding-inline-start: 20px;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--primary,
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--fill,
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary { --kk-btn-icon: 32px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-button--secondary { --kk-btn-icon-s: 28px; }
}

/* =========================================================
   2. 英字ラベル・セクション見出し（SectionHeading 16:67 / SectionTop 16:68）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-label {
  display: block;
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-label--gold { color: var(--kk-color-label-gold); }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-heading { display: flex; flex-direction: column; gap: var(--kk-space-label-to-heading); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-heading__title {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h2);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-heading);
  line-height: var(--kk-lh-heading);
  color: var(--kk-color-text);
}

:is(.kk-wp, .editor-styles-wrapper) .kk-c-section-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-section-top__intro {
  font-size: var(--kk-fs-body);
  line-height: var(--kk-lh-intro);
  letter-spacing: var(--kk-ls-body);
  color: var(--kk-color-text-muted);
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-section-top { flex-direction: column; align-items: stretch; gap: 24px; }
}

/* =========================================================
   3. ヘッダー（Header 17:56 / NavDropdown 17:77 / SPMenu 17:112）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--kk-header-h);
  padding-inline: var(--kk-header-px);
  border-bottom: 1px solid var(--kk-color-border-header);
  background: var(--kk-color-base);
}
/* トップ：ヒーローの上に透明で重ねる */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header--top {
  position: fixed; /* 2026-10-15 ユーザー指示：ヘッダーは固定 */
  inset: 0 0 auto;
  height: var(--kk-header-h-top);
  background: transparent;
  transition: background-color var(--kk-dur-base) var(--kk-ease-base);
}
/* スクロールしてヒーローを離れたら背景色を付ける（common.js が .is-scrolled を付ける） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header--top.is-scrolled { background: var(--kk-color-base); }
/* 下層：上部に固定 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header--lower { position: sticky; top: 0; }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-header__brand { display: block; flex: none; width: var(--kk-header-logo-w); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header__brand img { width: 100%; height: auto; }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav { display: flex; align-items: stretch; gap: var(--kk-header-nav-gap); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__item { position: relative; display: flex; }
/* 2026-10-16 ユーザー指示：日本語をメイン、英語をサブに入れ替え */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  font-family: var(--kk-ff-base);
  font-size: var(--kk-fs-nav);
  font-weight: var(--kk-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--kk-color-text);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__link small {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-nav-sub);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-en);
  line-height: 1.2;
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__link:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__link:focus-visible,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__item--has-sub:hover > .kk-c-nav__link { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__link[aria-current="page"] { color: var(--kk-color-accent-light); }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__contact {
  display: grid;
  place-items: center;
  min-width: var(--kk-btn-nav-contact-w);
  min-height: var(--kk-btn-nav-contact-h);
  align-self: center;
  border: 1px solid var(--kk-color-main);
  color: var(--kk-color-accent-light);
  font: var(--kk-fw-bold) 12px/1 var(--kk-ff-base); /* 「お問い合わせ」2026-10-16 */
  letter-spacing: 0.1em;
  transition: background-color var(--kk-dur-fast) var(--kk-ease-base), color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__contact:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__contact:focus-visible { background: var(--kk-color-main); color: var(--kk-color-button-text); }

/* SERVICE のドロップダウン：ホバーとキーボードフォーカスで開く */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 70;
  width: 340px;
  padding-top: 16px; /* 項目とパネルの間のすき間（マウスが外れないように） */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--kk-dur-base) var(--kk-ease-base),
              transform var(--kk-dur-base) var(--kk-ease-base),
              visibility var(--kk-dur-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__item--has-sub:hover > .kk-c-dropdown,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__item--has-sub:focus-within > .kk-c-dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
}
/* Esc で閉じる（common.js が付ける。マウスが外れる・フォーカスが出ると外す。QA C-1） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__item--has-sub.is-dismissed > .kk-c-dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__panel {
  padding-block: 16px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--kk-color-border);
}
/* 区切り線は全項目に（旧 :last-of-type は div の「Webマーケ」に当たり、その下の線が消えていた。2026-10-20） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__item .kk-c-label { color: var(--kk-color-label-gold); font-size: 12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__name {
  font-size: 14px;
  line-height: var(--kk-lh-small);
  letter-spacing: var(--kk-ls-body);
  color: var(--kk-color-text);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__sub {
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-muted);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown a:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown a:focus-visible { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-dropdown__all {
  display: block;
  padding: 14px 24px;
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-link);
}

/* SP：ハンバーガー */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 46px;
  height: 46px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-header__toggle span { display: block; width: 19px; height: 1px; background: var(--kk-color-text); }

@media (max-width: 1050px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-nav { gap: 18px; }
  /* 英字ラベルは狭い幅でも消さない（2026-10-23 ユーザー指示） */
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-nav__contact { min-width: 90px; }
}
/* 761〜900px：英字ラベルを出したままでもロゴとナビの間をあける（2026-10-23） */
@media (min-width: 761px) and (max-width: 900px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-header { padding-inline: 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-header__brand { width: 160px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-nav { gap: 14px; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-nav { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-header__toggle { display: flex; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-header--lower { padding-inline: 20px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-header--lower .kk-c-header__brand { width: 140px; }
}

/* SP メニュー（全画面） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kk-color-base-sub);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--kk-dur-base) var(--kk-ease-base), transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu.is-open { opacity: 1; transform: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--kk-color-border-header);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__head .kk-c-header__brand { width: 140px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--kk-color-border-strong);
  font-size: 16px;
  line-height: 1;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__nav { padding: 16px 30px 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 17px;
  border-bottom: 1px solid var(--kk-color-border-header);
  font-family: var(--kk-ff-base);
  font-size: 15px;
  font-weight: var(--kk-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__link small {
  font-family: var(--kk-ff-en);
  font-size: 10px;
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-en);
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__link--parent { border-bottom: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 17px 16px;
  border-bottom: 1px solid var(--kk-color-border-header);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__sub a {
  font-size: 13px;
  line-height: var(--kk-lh-small);
  letter-spacing: var(--kk-ls-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__actions { display: flex; flex-direction: column; gap: 12px; padding: 24px 30px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__actions .kk-c-button { width: 100%; min-height: 56px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-sp-menu__actions .kk-c-button--fill { padding-inline-start: 32px; font-size: 16px; }

.kk-is-locked { overflow: hidden; }

/* =========================================================
   4. パンくず（Breadcrumb 16:81）— SWELL のパンくずもこの見た目に合わせる
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--kk-fs-caption);
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb li { display: flex; align-items: center; gap: 10px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb li + li::before { content: "/"; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb [aria-current="page"] { color: var(--kk-color-text-muted); }

/* =========================================================
   5. 下層ページヘッダー（PageHeader 17:151 ＋ サービスの写真版 52:6677 ほか）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--kk-color-base-hero);
  border-bottom: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-top: 40px;
  padding-bottom: var(--kk-space-page-header-pc-bottom);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--kk-ff-en);
  font-size: 12px;
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-eyebrow);
  line-height: 1;
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__title {
  max-width: 720px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-page-title);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-page-title);
  line-height: var(--kk-lh-page-title);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__lead {
  max-width: 760px;
  font-size: var(--kk-fs-lead);
  font-weight: var(--kk-fw-medium);
  letter-spacing: var(--kk-ls-lead);
  line-height: 2.03; /* Figma Lead 34.5 / 17 */
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--kk-color-main);
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-accent-light);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kk-color-main); }

/* 灯と糸のモチーフ（標準） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  z-index: 0;
  width: min(900px, 62.5%);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pageheader-ember.webp") center / cover no-repeat;
  opacity: .9;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,19,16,0) 70%, rgba(21,19,16,.9) 100%),
              linear-gradient(90deg, #151310 0%, rgba(21,19,16,0) 22%);
}

/* 写真版（サービスページ）：画像は --kk-ph-* で切り抜き位置を指定する */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--photo .kk-c-page-header__inner {
  min-height: 560px;
  gap: var(--kk-space-page-header-photo-gap); /* パンくず → 英字 120（Figma 54:6651・54:6737 ほか：間24＋余白72＋間24）／SP 56 */
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--kk-ph-left, 37.5%);
  z-index: 0;
  overflow: hidden;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__media img {
  position: absolute;
  max-width: none;
  width: var(--kk-ph-w, 100%);
  height: var(--kk-ph-h, 100%);
  left: var(--kk-ph-x, 0);
  top: var(--kk-ph-y, 0);
  object-fit: cover;
  filter: var(--kk-photo-filter);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--kk-ph-fade), linear-gradient(90deg, rgba(21,19,16,var(--kk-ph-veil, .3)), rgba(21,19,16,var(--kk-ph-veil, .3)));
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kk-photo-tint);
  mix-blend-mode: multiply;
}
/* 写真版では灯と糸（火花）を重ねない（2026-10-14 ユーザー指示）。標準版のページヘッダーでは使う */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--photo .kk-c-page-header__motif { display: none; }

/* サービスごとの画像と切り抜き（Figma の数値。PC 1440 基準） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--asuraku {
  --kk-ph-fade: linear-gradient(90deg, #151310 36%, rgba(21,19,16,.6) 56%, rgba(21,19,16,.1) 75%, rgba(21,19,16,.15) 100%);
  --kk-ph-veil: .3;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--hitodasuke {
  --kk-ph-left: 30.556%;
  --kk-ph-w: 142.86%;
  --kk-ph-h: auto;
  --kk-ph-x: -42.86%;
  --kk-ph-y: -22.57%;
  --kk-ph-fade: linear-gradient(90deg, #151310 30.556%, rgba(21,19,16,.5) 42.556%, rgba(21,19,16,.05) 56.556%, rgba(21,19,16,.1) 100%);
  --kk-ph-veil: .12;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--web-marketing {
  --kk-ph-w: 128.21%;
  --kk-ph-h: auto;
  --kk-ph-x: -28.21%;
  --kk-ph-fade: linear-gradient(90deg, #151310 37.5%, rgba(21,19,16,.45) 63.5%, rgba(21,19,16,.05) 78.5%, rgba(21,19,16,.1) 100%);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--human-resource {
  --kk-ph-left: 50%;
  --kk-ph-w: 142.86%;
  --kk-ph-h: auto;
  --kk-ph-y: -4.9%;
  --kk-ph-fade: linear-gradient(90deg, #151310 50%, rgba(21,19,16,.45) 60%, rgba(21,19,16,.05) 75%, rgba(21,19,16,.1) 100%);
  --kk-ph-veil: .25;
}
/* ホームページ制作・SEO対策：写真は未決定。生成画像を仮に使う（object-fit: cover） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--web-creation,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--seo {
  --kk-ph-fade: linear-gradient(90deg, #151310 37.5%, rgba(21,19,16,.45) 63.5%, rgba(21,19,16,.05) 78.5%, rgba(21,19,16,.1) 100%);
}

/* 47扇子：資料の画像（小さいので拡大しない）＋鶴 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--sensu .kk-c-page-header__inner { min-height: 660px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-crane {
  position: absolute;
  left: 45.97%;
  top: 132px;
  z-index: 0;
  width: 300px;
  height: 567px;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .16;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-fan {
  position: absolute;
  right: var(--kk-gutter);
  top: 48px;
  z-index: 0;
  width: 448px;
  height: 563px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-fan img { width: 100%; height: 100%; object-fit: cover; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-fan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #151310 0%, rgba(21,19,16,0) 14%),
              linear-gradient(180deg, #151310 0%, rgba(21,19,16,0) 16%),
              linear-gradient(270deg, #151310 0%, rgba(21,19,16,0) 16%),
              linear-gradient(90deg, #151310 0%, rgba(21,19,16,0) 22%),
              rgba(42,29,21,.15);
}

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-crane { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-fan { width: 36%; height: auto; aspect-ratio: 448 / 563; }
}

@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__inner { gap: 40px; padding-top: 20px; padding-bottom: var(--kk-space-page-header-sp-bottom); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__body { gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__eyebrow { font-size: var(--kk-fs-label); } /* tokens label（SP 11）。旧 10px 直書き（QA B-3）。12 だと 375 幅で長い英字が2行になる */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__eyebrow::before { width: 25px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__lead { line-height: var(--kk-lh-lead); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__body .kk-c-button--primary { width: 100%; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif {
    top: auto;
    width: 100%;
    height: 260px;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif::before { background-image: url("../img/pageheader-ember-sp.webp"); opacity: .55; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__motif::after { background: linear-gradient(180deg, #151310 0%, rgba(21,19,16,.2) 50%, rgba(21,19,16,.6) 100%); }

  /* 写真版 SP：上に写真、下に向かって背景色へ */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--photo .kk-c-page-header__inner { min-height: 0; padding-top: 300px; padding-bottom: var(--kk-space-page-header-photo-sp-bottom); } /* Figma 54:6757 content 下 40 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__media {
    left: 0;
    bottom: auto;
    height: var(--kk-ph-sp-h, 360px);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__media img {
    width: var(--kk-ph-sp-w, 100%);
    height: var(--kk-ph-sp-hh, 100%);
    left: var(--kk-ph-sp-x, 0);
    top: var(--kk-ph-sp-y, 0);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__overlay {
    bottom: auto;
    height: 100%;
    background: var(--kk-ph-sp-fade, linear-gradient(180deg, rgba(21,19,16,.45) 0%, rgba(21,19,16,.15) 23.684%, rgba(21,19,16,.85) 50.329%, #151310 59.211%, #151310 100%));
  }

  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--asuraku {
    --kk-ph-sp-h: 446px;
    --kk-ph-sp-fade: linear-gradient(180deg, rgba(21,19,16,.45) 0%, rgba(21,19,16,.15) 25%, rgba(21,19,16,.85) 55%, #151310 62%, #151310 100%);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--hitodasuke {
    --kk-ph-sp-w: 212.77%;
    --kk-ph-sp-hh: 146%;
    --kk-ph-sp-x: -59.57%;
    --kk-ph-sp-y: -17.52%;
    --kk-ph-sp-fade: linear-gradient(180deg, rgba(21,19,16,.45) 0%, rgba(21,19,16,.15) 20.31%, rgba(21,19,16,.85) 43.159%, #151310 50.776%, #151310 100%);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--web-marketing {
    --kk-ph-sp-w: 188.68%;
    --kk-ph-sp-hh: 110.55%;
    --kk-ph-sp-x: -84.91%;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--human-resource {
    --kk-ph-sp-w: 181.82%;
    --kk-ph-sp-hh: 126.26%;
    --kk-ph-sp-x: -7.27%;
    --kk-ph-sp-y: -5.05%;
  }

  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header--sensu .kk-c-page-header__inner { min-height: 0; padding-top: 465px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-crane { display: block; left: -40px; top: 20px; width: 200px; height: 378px; opacity: .12; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-header__sensu-fan { left: 50%; right: auto; top: 64px; width: 300px; height: 377px; transform: translateX(-50%); }
}

/* =========================================================
   6. 写真の枠（PhotoFrame 34:5225）／画像の仮枠（ImagePlaceholder 18:29）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-photo {
  position: relative;
  overflow: hidden;
  background: var(--kk-color-surface-card);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--kk-photo-filter); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kk-photo-fade);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--kk-photo-tint);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* 生成画像・ストック写真は左下に「イメージ」 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-photo__note {
  position: absolute;
  left: 16px;
  bottom: 16.8px;
  z-index: 2;
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-muted);
}

:is(.kk-wp, .editor-styles-wrapper) .kk-c-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  background: var(--kk-color-surface-card);
  border: 1px solid var(--kk-color-border);
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  text-align: center;
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-placeholder__en { font-family: var(--kk-ff-en); font-weight: var(--kk-fw-en-medium); letter-spacing: var(--kk-ls-label); }

/* =========================================================
   7. タグ（Tag 16:46）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tags { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--kk-color-border);
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-muted);
}

/* =========================================================
   8. サービスカード（ServiceCard 18:152）
      並びは .kk-c-service-grid（gap:1px＋背景で1pxの線。2026-10-20 から1行1枚・左に事業フェーズ）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 2026-10-20 1行1枚（旧：3列の格子）。線は gap:1px＋背景 */
  gap: 1px;
  padding: 1px;
  background: var(--kk-color-border-strong);
}
/* =========================================================
   サービス一覧の「事業フェーズ」（2026-10-20）
   - フェーズは同じフェーズの先頭カード（--phase-start）だけに置き、枠の外（左）・カードの上端にそろえる
   - 縦線は一覧全体で1本。薄い線の上を、スクロールに合わせて橙の線が伸びる（common.js が --kk-line-progress を更新）
   - アイコン＋ひとこと（__point）はカードの中
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid { --kk-service-phase-w: 200px; --kk-line-progress: 1; position: relative; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid::before,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid::after {                                 /* 線：before＝薄い線（下地）／after＝橙（進み具合） */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--kk-service-phase-w) * -1);
  width: 1px;
  background: var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid::after {
  background: var(--kk-color-main);
  transform: scaleY(var(--kk-line-progress));
  transform-origin: top;
  transition: transform 120ms linear;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card { position: relative; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__phase {
  position: absolute;
  grid-column: auto;            /* グリッドの領域ではなくカード全体を基準にする */
  grid-row: auto;
  top: 48px;                    /* カードの上の余白にそろえる（＝写真・英字ラベルの上端） */
  left: calc(var(--kk-service-phase-w) * -1 - 1px);
  width: calc(var(--kk-service-phase-w) - 24px);
  padding-left: 24px;
  border-left: 0;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__phase::before {    /* 線の上の点 */
  content: "";
  position: absolute;
  top: 3px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kk-color-main);
}
@media (min-width: 761px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid { margin-left: var(--kk-service-phase-w); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: 48px;
    align-content: start;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > * { grid-column: 2; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__thumb { grid-column: 1; grid-row: 1 / span 14; align-self: start; width: 100%; height: 220px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__point { margin-top: 0; }
}
/* 761〜1200px：写真の下に本文（横並びだと本文が細くなる） */
@media (min-width: 761px) and (max-width: 1200px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid { --kk-service-phase-w: 150px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card { grid-template-columns: minmax(0, 1fr); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > * { grid-column: 1; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__thumb { grid-column: 1; grid-row: auto; height: 220px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__point { margin-top: 24px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__phase { top: 32px; }   /* TAB のカードの上の余白 */
}
/* フェーズの文字 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase-num {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-en);
  line-height: 1.4;
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase-num span { display: block; margin-top: 2px; color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase-name {
  font-family: var(--kk-ff-heading);
  font-size: 22px;
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-mincho);
  line-height: 1.4;
}
/* カードの中：アイコン＋ひとこと */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__point {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-muted);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__point-icon { flex: none; width: 24px; height: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__en { margin-top: 14px; }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card {
  display: flex;
  flex-direction: column;
  padding: 48px 40px 40px;
  background: var(--kk-color-base-sub);
  transition: background-color var(--kk-dur-card) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card:hover { background: var(--kk-color-surface-hover); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__thumb { height: 190px; flex: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__en { margin-top: 28px; color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__title {
  margin-top: 24px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3-card);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-card);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__theme {
  margin-top: 16px;
  font-size: var(--kk-fs-theme);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-mincho);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__desc {
  margin-top: 16px;
  font-size: var(--kk-fs-body-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub { padding-top: 16px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub a {
  display: block;
  font-size: 14px;
  line-height: var(--kk-lh-small);
  letter-spacing: var(--kk-ls-body);
  color: var(--kk-color-text-link);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub a::before { content: "— "; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card .kk-c-tags { padding: 24px 0 32px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__spacer { flex: 1 1 auto; } /* details と links を下に揃える */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details { padding: 20px 0 8px; border-top: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary::-webkit-details-marker { display: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary::after {
  content: "＋";
  font-size: 18px;
  line-height: 1.7;
  color: var(--kk-color-accent);
  transition: transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details[open] summary::after { transform: rotate(45deg); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details p {
  padding-top: 12px;
  font-size: var(--kk-fs-body-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px; }

@media (max-width: 1000px) {
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card { padding: 32px; }
}
@media (max-width: 760px) {
  /* SP：左に1本の線。フェーズはカードの上（枠の外）。枠線はカードごとの border に切り替え */
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid { --kk-service-phase-w: 20px; margin-left: 20px; gap: 0; padding: 64px 0 0; background: none; } /* 上の 64px＝最初のフェーズの文字の場所（2026-10-23：カードの margin だと WordPress で効かず、見出しの文に重なった） */
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card { border: 1px solid var(--kk-color-border-strong); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card + .kk-c-service-card { border-top: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card.kk-c-service-card--phase-start { margin-top: 72px; border-top: 1px solid var(--kk-color-border-strong); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card.kk-c-service-card--phase-start:first-of-type { margin-top: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__phase { top: -56px; flex-direction: row; align-items: baseline; gap: 12px; width: auto; padding-left: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-grid > .kk-c-service-card > .kk-c-service-card__phase::before { top: 6px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase-num span { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__phase-name { font-size: 18px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card { padding: 32px 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__thumb { height: 160px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__title { line-height: var(--kk-lh-card); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__desc { line-height: var(--kk-lh-body); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary { font-size: 13px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary::after { font-size: 16px; }
}

/* =========================================================
   9. サービスの関係図（Diagram/ServiceMap 37:5699）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__axis {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1fr; /* 個人2・事業2（Webマーケ・心灯講座）・組織2（経営指針塾・人材育成）・地域1（2026-10-20） */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kk-color-border-strong);
  font-size: 14px;
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-label-gold);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__axis li { display: flex; gap: 8px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__axis li:not(:last-child)::after { content: "→"; color: var(--kk-color-text-faint); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__nodes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 20px 0; /* 縦線と文字の間に余白（2026-10-16 ユーザー指示） */
  border-left: 1px solid var(--kk-color-border); /* 左側に線（1列目にも線が出る） */
}
/* 点は上の横線と縦線の交点に置く（中心を線の上に。2026-10-16 ユーザー指示） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__node::before { content: ""; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__icon { width: var(--kk-icon-size); height: var(--kk-icon-size); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__text { display: flex; flex-direction: column; gap: 10px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__en { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__en span { display: none; } /* SP だけ「個人 / 」を出す */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__name {
  font-family: var(--kk-ff-heading);
  font-size: 20px;
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__desc { font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }

@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__axis { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__nodes { grid-template-columns: minmax(0, 1fr); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__node {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid var(--kk-color-border);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__node:last-child { border-bottom: 1px solid var(--kk-color-border); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__node::before { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__text { gap: 4px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__en span { display: inline; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__name { font-size: 18px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-service-map__desc { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); }
}

/* =========================================================
   10. 帯（MissionStrip 19:268）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-mission {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 34px;
  border-block: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-mission .kk-c-label { flex: none; color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-mission__text {
  font-size: var(--kk-fs-mission);
  letter-spacing: var(--kk-ls-mincho);
  line-height: var(--kk-lh-mission);
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-mission { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 25px; }
}

/* =========================================================
   11. 心灯について（AboutStatement 44:6358）— トップと /company/ の冒頭
       線画は assets/img/about-lineart.png を差し替えるだけで変わる
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about {
  position: relative;
  overflow: hidden;
  padding: var(--kk-about-padding);
  background: var(--kk-color-base);
  border-top: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__watermark {
  position: absolute;
  left: -28px;
  top: 47px;
  margin: 0;
  font-family: var(--kk-ff-en);
  font-size: var(--kk-about-watermark-fs);
  font-weight: var(--kk-fw-en-semibold);
  letter-spacing: var(--kk-ls-watermark);
  line-height: 1;
  white-space: nowrap;
  color: var(--kk-color-text);
  opacity: var(--kk-about-watermark-opacity);
  pointer-events: none;
  user-select: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: clamp(24px, 13.89vw, 200px);   /* 1440 で 200 */
  padding-right: clamp(24px, 12.22vw, 176px);  /* 1440 で 176 */
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kk-about-paragraph-gap);
  width: var(--kk-about-body-w);
  max-width: 100%;
  padding-top: 150px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__body p:not([class]) {
  font-size: var(--kk-fs-body-about);
  letter-spacing: var(--kk-ls-body-about);
  line-height: var(--kk-lh-body-about);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__signature {
  font-size: 14px;
  letter-spacing: 0.15em;
  line-height: var(--kk-lh-small);
  color: var(--kk-color-label-gold);
}
/* 「詳しく見る」は共通のテキストリンク（.kk-c-button--text）を使う。旧 Read More＋丸の専用スタイルは削除（2026-10-16 ユーザー指示） */

/* 縦書き：キャッチ＋ラベル（writing-mode: vertical-rl） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__vertical { display: flex; align-items: flex-start; gap: var(--kk-about-catch-gap); flex: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__catch {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-vertical);
  font-weight: var(--kk-fw-heading-display);
  letter-spacing: 0.25em;                                   /* 1字 = 1.25em（tokens lineHeight.vertical） */
  line-height: calc(1em + 4px + var(--kk-about-catch-gap)); /* 列の幅＝文字＋4px（Figma 44/34）＋列の間 */
  margin-block: calc((4px + var(--kk-about-catch-gap)) / -2);
  margin-top: -0.125em;
  color: var(--kk-color-text);
  white-space: nowrap;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__catch em { color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__label {
  writing-mode: vertical-rl;
  padding: 14px 8px;
  background: var(--kk-color-text);
  color: var(--kk-color-base);
  font-size: var(--kk-fs-vertical-label);
  font-weight: var(--kk-fw-medium);
  letter-spacing: 0.4667em; /* 1字 22px（15px） */
  line-height: 1.0667;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__label span { margin-bottom: -0.4667em; display: inline-block; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-about__art {
  position: absolute;
  right: -40px;
  bottom: -30px;
  z-index: 0;
  width: 900px;
  max-width: none;
  height: 425px;
  object-fit: cover;
  pointer-events: none;
}

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__art { width: 70%; height: auto; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__watermark { left: -6px; top: 35px; letter-spacing: -0.012em; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__content { flex-direction: column-reverse; align-items: stretch; gap: 48px; padding: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__vertical { align-self: flex-end; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__body { padding-top: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__signature { font-size: 13px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__label { padding: 10px 6px; letter-spacing: 0.4615em; line-height: 1.0769; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-about__art { right: -15px; bottom: -20px; width: 560px; height: 265px; }
}

/* =========================================================
   12. 実績スライドショー（WorksSlider 49:6439）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider { display: flex; flex-direction: column; gap: 40px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__track { display: grid; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 760fr) minmax(0, 448fr);
  gap: 72px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--kk-works-shift));
  transition: opacity var(--kk-works-dur) var(--kk-ease-reveal),
              transform var(--kk-works-dur) var(--kk-ease-reveal),
              visibility 0s linear var(--kk-works-dur);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide.is-leaving { transform: translateX(calc(var(--kk-works-shift) * -1)); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide.is-from-left { transform: translateX(calc(var(--kk-works-shift) * -1)); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide.is-from-left.is-active { transform: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide.is-leaving-right { transform: translateX(var(--kk-works-shift)); }

/* PC と SP の画面を重ねたモック */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock { position: relative; aspect-ratio: 760 / 470; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__pc {
  position: absolute;
  left: 0;
  top: 0;
  width: 89.474%;   /* 680 / 760 */
  height: 90.426%;  /* 425 / 470 */
  overflow: hidden;
  background: var(--kk-color-surface-card);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__pc::before { /* ブラウザのバー */
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: 1;
  width: calc(100% + 2px);
  height: 20px;
  background: var(--kk-color-base-deep);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__sp {
  position: absolute;
  left: 78.684%;   /* 598 / 760 */
  top: 28.085%;    /* 132 / 470 */
  width: 20.526%;  /* 156 / 760 */
  height: 71.915%; /* 338 / 470 */
  overflow: hidden;
  background: var(--kk-color-surface-card);
  border: 6px solid var(--kk-color-base);
  outline: 1px solid var(--kk-color-border-strong);
  outline-offset: -6px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__sp::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--kk-color-border-strong);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__note {
  position: absolute;
  left: 16px;
  top: 36px;
  z-index: 2;
  font-size: 12px;
  line-height: var(--kk-lh-label);
  letter-spacing: var(--kk-ls-caption);
  color: var(--kk-color-text-faint);
}

:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info { display: flex; flex-direction: column; align-items: flex-start; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__index {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-number-l);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__en { margin-top: 20px; color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__name {
  margin-top: 12px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3-works);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__meta { margin-top: 12px; font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__scope {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  margin-top: 24px;
  padding-block: 16px;
  border-block: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__scope dt { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__scope dd { font-size: var(--kk-fs-body); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-body); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__result { margin-top: 20px; font-size: var(--kk-fs-body-small); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-body); color: var(--kk-color-text-sub); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info .kk-c-button--text { margin-top: 28px; }

/* 操作列 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__nav { display: flex; align-items: center; gap: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__arrow,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border: 1px solid var(--kk-color-border-strong);
  transition: border-color var(--kk-dur-fast) var(--kk-ease-base), color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__arrow { width: 52px; font-size: 18px; line-height: 1; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__arrow:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause:hover { border-color: var(--kk-color-accent); color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__counter { display: flex; align-items: center; gap: 20px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__count {
  font-family: var(--kk-ff-en);
  font-size: 12px;
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  font-variant-numeric: tabular-nums;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__progress { position: relative; width: 240px; height: 1px; overflow: hidden; background: var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--kk-color-main);
  transform-origin: left center;
  transform: scaleX(var(--kk-progress, .25));
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider.is-playing .kk-c-works-slider__progress-fill {
  animation: kk-works-progress var(--kk-works-autoplay) linear forwards;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider.is-held .kk-c-works-slider__progress-fill { animation-play-state: paused; }
@keyframes kk-works-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause {
  width: 116px;
  padding-inline: 14px;
  font-size: 12px;
  letter-spacing: var(--kk-ls-caption);
  line-height: var(--kk-lh-label);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause-label { color: var(--kk-color-text-sub); }

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock { max-width: 760px; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider { gap: 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slide { gap: 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock { aspect-ratio: 327 / 250; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__pc { width: 88.685%; height: 72.4%; }           /* 290x181 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__pc::before { height: 12px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__sp { left: 72.477%; top: 27.2%; width: 25.688%; height: 72.8%; border-width: 4px; outline-offset: -4px; } /* 84x182 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__sp::after { inset: -4px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-mock__note { top: 22px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__en { margin-top: 12px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__name { line-height: 1.6; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__meta { font-size: 13px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__scope { margin-top: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info__result { margin-top: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-info .kk-c-button--text { margin-top: 20px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__controls { padding-top: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__nav { gap: 12px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__arrow { width: 44px; height: 44px; font-size: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__counter { gap: 10px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__count { font-size: 11px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__progress { width: 72px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause { width: 44px; height: 44px; padding: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-slider__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* =========================================================
   13. 実績カード（WorksCard 18:205：Panel / Card）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card { display: flex; flex-direction: column; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__media { position: relative; aspect-ratio: 405 / 253; overflow: hidden; background: var(--kk-color-surface-card); border: 1px solid var(--kk-color-border); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__caption {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__name { font-family: var(--kk-ff-heading); font-size: var(--kk-fs-h4); font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-card); line-height: 1.6; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__services { font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) a.kk-c-works-card:hover .kk-c-works-card__name { color: var(--kk-color-accent-light); }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel { flex-direction: row; border: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__media { border: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__media { flex: 0 0 56.5625%; aspect-ratio: auto; min-height: 440px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__name { margin-top: 16px; font-size: var(--kk-fs-h3-works); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__services { margin-top: 12px; color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card__result { margin-top: 20px; font-size: var(--kk-fs-body); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-body); color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-button--text { margin-top: 24px; }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel { flex-direction: column; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__media { flex: none; min-height: 184px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-works-card--panel .kk-c-works-card__copy { padding: 32px 24px; }
}

/* =========================================================
   14. ブログのテーマカード（JournalCard 19:193）／記事カード（PostCard 19:144）
   ========================================================= */
/* 記事カード・実績カード・メンバー：PC 列の間 32（Figma post-list ほか）。テーマカード（408×3）は --journal で 28 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kk-space-grid-gap); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-card-grid--journal { gap: 28px; } /* Figma JournalCard の並び 408×3＋28×2＝1280 */
@media (max-width: 1000px) { :is(.kk-wp, .editor-styles-wrapper) .kk-c-card-grid,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-card-grid--journal { gap: 16px; } }
@media (max-width: 760px) { :is(.kk-wp, .editor-styles-wrapper) .kk-c-card-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card { display: flex; flex-direction: column; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 270px;
  padding: 28px;
  overflow: hidden;
  border-top: 1px solid var(--kk-color-border-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(141.27deg, rgba(45,35,28,.55) 14.184%, rgba(23,22,20,.9) 85.106%);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover > :not(img) { position: relative; z-index: 1; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover .kk-c-label { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__title {
  font-family: var(--kk-ff-mincho);
  font-size: var(--kk-fs-h3-mincho);
  font-weight: var(--kk-fw-heading-statement);
  letter-spacing: var(--kk-ls-mincho);
  line-height: var(--kk-lh-mincho);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 22px;
  border-bottom: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__category { font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__more { flex: none; font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-text-link); transition: color var(--kk-dur-fast) var(--kk-ease-base); }
:is(.kk-wp, .editor-styles-wrapper) a.kk-c-journal-card:hover .kk-c-journal-card__more { color: var(--kk-color-accent-light); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover { height: 172px; padding: 25px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover::after { background: linear-gradient(147.67deg, rgba(45,35,28,.55) 14.184%, rgba(23,22,20,.9) 85.106%); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__caption { padding-block: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__category { font-size: 13px; }
}

:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card { display: flex; flex-direction: column; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  padding: 20px;
  overflow: hidden;
  border-top: 1px solid var(--kk-color-accent);
  background: linear-gradient(145.89deg, #2D231C 14.184%, #171614 85.106%);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb .kk-c-label { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__caption { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 24px; border-bottom: 1px solid var(--kk-color-border); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__category { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__title { font-family: var(--kk-ff-heading); font-size: var(--kk-fs-h4); font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-card); line-height: 1.6; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__date { font-family: var(--kk-ff-en); font-size: var(--kk-fs-label); font-weight: var(--kk-fw-en-medium); letter-spacing: var(--kk-ls-label); line-height: var(--kk-lh-label); color: var(--kk-color-text-faint); }
:is(.kk-wp, .editor-styles-wrapper) a.kk-c-post-card:hover .kk-c-post-card__title { color: var(--kk-color-accent-light); }
/* アイキャッチに写真を敷くとき：--photo を足して <img> を入れる。写真の上に暗い膜（Figma PostCard thumb 19:129）。英字ラベルはその上 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--kk-gradient-post-thumb-overlay);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb--photo img { z-index: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-post-card__thumb--photo > :not(img) { position: relative; z-index: 1; }

/* =========================================================
   15. メンバーカード（MemberCard 18:246）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card { display: flex; flex-direction: column; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__photo { aspect-ratio: 4 / 5; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__photo img { width: 100%; height: 100%; object-fit: cover; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__body { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__role { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__name { font-family: var(--kk-ff-heading); font-size: var(--kk-fs-h3-card); font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-card); line-height: var(--kk-lh-card); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__career { font-size: var(--kk-fs-small); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-member-card__comment { padding: 4px 0 4px 16px; border-left: 1px solid var(--kk-color-main); font-size: var(--kk-fs-small); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-sub); }

/* =========================================================
   16. ステップ（Step 19:83）
   ========================================================= */
/* 列の間 24（Figma：各ページの section/flow）。列数は style="--kk-steps: 4"、TAB で折り返すときは --kk-steps-tab */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-steps { display: grid; grid-template-columns: repeat(var(--kk-steps, 4), minmax(0, 1fr)); gap: var(--kk-space-m); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 32px 0; border-top: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__icon { width: var(--kk-icon-size); height: var(--kk-icon-size); } /* アイコンの直後に番号（間 0。Figma 19:76） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__num { font-family: var(--kk-ff-en); font-size: var(--kk-fs-number-l); font-weight: var(--kk-fw-en-medium); letter-spacing: 0.02em; line-height: 1; color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__body { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__title { font-family: var(--kk-ff-heading); font-size: var(--kk-fs-h4); font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-card); line-height: 1.6; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__text { font-size: var(--kk-fs-small); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }
@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-steps { grid-template-columns: repeat(var(--kk-steps-tab, var(--kk-steps, 4)), minmax(0, 1fr)); row-gap: 0; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-step { flex-direction: row; gap: 20px; padding: 20px 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-step__num { order: -1; } /* SP は 番号 → アイコン → 本文（Figma 19:82） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-step__body { flex: 1; gap: 6px; margin-top: 0; }
}

/* =========================================================
   17. FAQ（FAQItem 19:114）— details / summary。SWELL の FAQ ブロックもこの見た目に合わせる
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq { max-width: var(--kk-container-max); border-top: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__item { border-bottom: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-block: 24px;
  cursor: pointer;
  list-style: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q::-webkit-details-marker { display: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q::before,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a::before {
  flex: none;
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-number);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: 0.04em;
  line-height: 1.52; /* 見出し1行目の中央に合わせる */
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q::before { content: "Q"; color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a::before { content: "A"; color: var(--kk-color-label-gold); line-height: 1.5; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__question { flex: 1; font-family: var(--kk-ff-heading); font-size: var(--kk-fs-h4); font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-card); line-height: 1.6; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q::after { content: "＋"; flex: none; font-size: 18px; line-height: 1.7; color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__item[open] .kk-c-faq__q::after { content: "×"; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a { display: flex; gap: 24px; padding-bottom: 28px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a a { color: var(--kk-color-text-link); border-bottom: 1px solid var(--kk-color-text-link-line); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a p { flex: 1; font-size: var(--kk-fs-body); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-body); color: var(--kk-color-text-sub); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__a { gap: 14px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-faq__q::after { font-size: 16px; }
}

/* =========================================================
   18. フォーム部品（FormField 16:157 / Checkbox 16:167）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-form { display: flex; flex-direction: column; gap: var(--kk-form-field-gap); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field { display: flex; flex-direction: column; gap: var(--kk-form-label-gap); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__label { display: flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__required { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__control {
  width: 100%;
  min-height: var(--kk-form-field-h);
  padding: 0 var(--kk-form-padding);
  background: var(--kk-color-input);
  border: 1px solid var(--kk-color-border-input);
  border-radius: 0;
  color: var(--kk-color-text);
  font-size: var(--kk-form-fs);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  appearance: none;
  transition: border-color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__control::placeholder { color: var(--kk-color-text-faint); opacity: 1; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root .kk-c-field__control:focus { border-color: var(--kk-color-focus); }
/* フォーカスは共通の outline（2px #EF8245・offset 5）＋枠線の色（QA C-3） */
:is(.kk-wp, .editor-styles-wrapper) .kk-root .kk-c-field__control:focus-visible { outline: var(--kk-focus-outline); outline-offset: var(--kk-focus-offset); }
:is(.kk-wp, .editor-styles-wrapper) textarea.kk-c-field__control { min-height: var(--kk-form-textarea-min-h); padding-block: 12px; resize: vertical; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__select { position: relative; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__select::after {
  content: "⌄";
  position: absolute;
  right: var(--kk-form-padding);
  top: 50%;
  transform: translateY(-62%);
  font-size: 18px;
  line-height: 1;
  color: var(--kk-color-accent);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__select .kk-c-field__control { padding-right: 48px; cursor: pointer; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__select option { background: var(--kk-color-input); color: var(--kk-color-text); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field.is-error .kk-c-field__control,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__control[aria-invalid="true"] { border-color: var(--kk-color-error); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-field__error { font-size: 12px; letter-spacing: var(--kk-ls-caption); line-height: var(--kk-lh-label); color: var(--kk-color-error); }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-checkbox { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-sub); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-checkbox input {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--kk-color-input);
  border: 1px solid var(--kk-color-border-strong);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-checkbox input::before { content: "✓"; font-size: 12px; line-height: 1; color: var(--kk-color-button-text); opacity: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-checkbox input:checked { background: var(--kk-color-main); border-color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-checkbox input:checked::before { opacity: 1; }

/* =========================================================
   19. お知らせ（NewsItem 19:127）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-list { border-top: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 28px;
  border-bottom: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__meta { display: flex; gap: 28px; flex: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__date,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__cat {
  font-family: var(--kk-ff-en);
  font-size: 12px;
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-text-muted);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__cat { color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__title { flex: 1; font-size: var(--kk-fs-body); letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-body); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item::after { content: "→"; flex: none; font-size: 18px; line-height: 1.7; color: var(--kk-color-label-gold); transition: transform var(--kk-dur-base) var(--kk-ease-base); }
:is(.kk-wp, .editor-styles-wrapper) a.kk-c-news-item:hover .kk-c-news-item__title { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) a.kk-c-news-item:hover::after { transform: translateX(4px); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 22px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item::after { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__meta { gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__date,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-news-item__cat { font-size: 11px; }
}

/* =========================================================
   20. 共通CTA（CTACommon 17:182）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta {
  padding: var(--kk-space-section-contact) 24px;
  text-align: center;
  background: var(--kk-gradient-contact);
  border-block: 1px solid rgba(167,99,52,.25);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta .kk-c-label { display: block; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta__title {
  margin-top: 26px;
  font-family: var(--kk-ff-mincho);
  font-size: var(--kk-fs-contact-heading);
  font-weight: var(--kk-fw-heading-statement);
  letter-spacing: var(--kk-ls-mincho);
  line-height: var(--kk-lh-contact-heading);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta__title em { color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta__text {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: var(--kk-fs-body);
  letter-spacing: var(--kk-ls-body);
  line-height: 2.1;
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta .kk-c-actions { justify-content: center; margin-top: 38px; }
/* 共通CTA：LINE（Secondary）を「相談したいことを整理する」（Fill）と同じ大きさに（2026-10-16 ユーザー指示） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-cta .kk-c-button--secondary {
  --kk-btn-icon-s: var(--kk-btn-icon);
  width: var(--kk-btn-fill-w);
  min-height: var(--kk-btn-fill-h);
  padding-inline: var(--kk-btn-fill-px) calc((var(--kk-btn-fill-h) - var(--kk-btn-icon)) / 2);
  font-size: var(--kk-fs-button-l);
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-cta .kk-c-actions { max-width: 327px; margin-inline: auto; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-cta .kk-c-button:is(.kk-c-button--fill, .kk-c-button--secondary) { font-size: 16px; padding-inline-start: 32px; }
}

/* =========================================================
   21. フッター（Footer 17:253）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer {
  padding: 64px 0 24px;
  background: var(--kk-color-base-deep);
  border-top: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__top { display: flex; align-items: flex-start; gap: 56px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nap { display: flex; flex-direction: column; gap: 16px; flex: 0 1 360px; min-width: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__logo { display: block; width: 185px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__catch { font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__address { font-style: normal; font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nav { display: flex; flex: 0 1 auto; min-width: 0; gap: 56px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col { display: flex; flex-direction: column; gap: 12px; flex: 0 1 auto; width: 200px; min-width: 0; } /* 1001〜1200px でも縮んで横にはみ出さない */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col .kk-c-label { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col ul { display: flex; flex-direction: column; gap: 12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col li { display: flex; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col a { font-size: 14px; letter-spacing: var(--kk-ls-body); line-height: var(--kk-lh-small); color: var(--kk-color-text-sub); transition: color var(--kk-dur-fast) var(--kk-ease-base); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col .is-child { padding-left: 1em; }
/* SERVICE は2列。幅が足りないとき（1列が 180px 未満になるとき）は1列（2026-10-23 ユーザー指示）。
   上から下へ読む順のまま左右に分かれる。Webマーケと子（ホームページ制作・SEO対策）は同じ列に置く */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service { width: 424px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service ul { display: block; columns: 2 180px; column-gap: 24px; margin-bottom: -12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service li { margin-bottom: 12px; break-inside: avoid; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service li:has(+ .is-child) { break-after: avoid; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service .is-child { break-before: avoid; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--kk-color-border);
  font-size: 12px;
  letter-spacing: var(--kk-ls-caption);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__legal,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__meta { display: flex; gap: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__meta { gap: 28px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__meta small { font-size: inherit; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__pagetop { color: var(--kk-color-text-muted); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__bottom a:hover { color: var(--kk-color-accent-light); }
@media (max-width: 1200px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__top,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nav { gap: 40px; }
}
@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__top { flex-direction: column; gap: 40px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nap { flex: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nav { width: 100%; } /* 縦並びのとき、ナビの行を画面幅に収める（SERVICE の2列が入らなければ1列になる） */
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer { padding-top: 48px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__top { gap: 36px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__logo { width: 145px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__catch,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__address,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col a { font-size: 13px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__nav { flex-wrap: wrap; gap: 32px 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col { flex: none; width: calc(50% - 12px); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col--service { order: -1; width: 100%; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__bottom { flex-direction: column; gap: 12px; margin-top: 40px; }
}

/* =========================================================
   22. SP の追従CTA（SPFixedBar 17:267）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar { display: none; }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--kk-color-base-deep);
    border-top: 1px solid var(--kk-color-border-strong);
    transform: translateY(110%);
    transition: transform var(--kk-dur-base) var(--kk-ease-base);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar.is-visible { transform: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 64px;
    font-size: 14px;
    font-weight: var(--kk-fw-bold);
    letter-spacing: var(--kk-ls-button);
    line-height: 1.5;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar__form { flex: 1 1 0; /* 2026-10-15 ユーザー指示：半分ずつ */ background: var(--kk-color-button-fill); color: var(--kk-color-button-text); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar__line { flex: 1 1 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar__line span { color: var(--kk-color-accent); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar--line-only .kk-c-fixed-bar__form { display: none; }
  /* 矢印をシェブロン（>）に。ボタン・リンクと同じ描き方（2026-10-16 ユーザー指示） */
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar a > span[aria-hidden="true"] {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 0;
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-fixed-bar a > span[aria-hidden="true"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: translate(-65%, -50%) rotate(45deg);
  }
}

/* =========================================================
   23. 表示時のフェード（下層の見出しだけ・任意）
   ========================================================= */
.kk-js :is(.kk-wp, .editor-styles-wrapper) .kk-u-reveal { opacity: 0; transform: translateY(var(--kk-reveal-distance)); transition: opacity var(--kk-dur-reveal) var(--kk-ease-reveal), transform var(--kk-dur-reveal) var(--kk-ease-reveal); }
.kk-js :is(.kk-wp, .editor-styles-wrapper) .kk-u-reveal.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kk-js :is(.kk-wp, .editor-styles-wrapper) .kk-u-reveal { opacity: 1; transform: none; } }

/* =========================================================
   24. ページ内リンク（PageNavItem 19:235 ／ /company/ 25:655・SP 25:967）
   - ページヘッダーの直下。下1px線の帯に「ラベル ∨」（下向きシェブロン）を横並び。SP は横スクロール
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav {
  background: var(--kk-color-base);
  border-bottom: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__list {
  display: flex;
  gap: 40px;            /* Figma 25:655 itemSpacing */
  overflow-x: auto;
  scrollbar-width: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__list::-webkit-scrollbar { display: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__list li { flex: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 18px;
  white-space: nowrap;
  font-size: 14px;                       /* PC/Small（SP も 14） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-sub);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
/* 矢印：ボタンと同じシェブロンの下向き（2026-10-18 ユーザー指示） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid var(--kk-color-accent);
  border-bottom: 1.5px solid var(--kk-color-accent);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link:hover::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link:focus-visible::after { transform: translateY(2px) rotate(45deg); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__link:focus-visible { color: var(--kk-color-accent-light); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__list { gap: 24px; } /* Figma 25:967 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-page-nav__list::after { content: ""; flex: none; width: 1px; } /* 横スクロールの右端にも余白 */
}

/* =========================================================
   25. 定義リスト（DefinitionRow 19:259 ／ PC 19:254・SP 19:258）
   - 会社概要・代表プロフィール・特商法・実績の概要・本文の枠（.kk-c-entry）の表
   - <dl class="kk-c-definition-list"><div class="kk-c-definition-list__row"><dt>…</dt><dd>…</dd></div></dl>
   - 上1px＋行ごとに下1px。PC は横並び（dt 200px）、SP は縦積み
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list { border-top: 1px solid var(--kk-color-border-strong); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list__row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-block: 22px;
  border-bottom: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dt {
  flex: 0 0 200px;
  font-size: var(--kk-fs-small);         /* Small 14 / 26.6（SP 13 / 24.7） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-label-gold);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--kk-fs-body-small);    /* BodySmall 15 / 30（SP 14 / 28） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd > * + * { margin-top: 4px; }
/* 本文の下に置くテキストボタン（診断のリンクなど） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd > .kk-c-button--text { display: flex; width: fit-content; margin-top: 4px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd a:not(.kk-c-button) { text-decoration: underline; text-decoration-color: var(--kk-color-border-strong); text-underline-offset: 4px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd a:not(.kk-c-button):hover { color: var(--kk-color-accent-light); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list__row { flex-direction: column; gap: 6px; padding-block: 18px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dt { flex: none; }
}

/* =========================================================
   26. 番号つきの項目（FeatureItem 19:250）
   - 上1px線＋（アイコン）＋番号／英字＋見出し＋本文。アイコンの直後に番号（間 0）
   - <ul class="kk-c-features"><li class="kk-c-feature">
       <img class="kk-c-feature__icon">（任意）<p class="kk-c-feature__num">01</p>
       <h3 class="kk-c-feature__title">…</h3><p class="kk-c-feature__text">…</p>
       （段落・箇条書きが複数なら <div class="kk-c-feature__body">）
   - 並び：標準＝PC 3列（列数は style="--kk-features: 4"）・TAB/SP 1列（間 16）
           --2／--3＝本文の枠（.kk-c-entry）用。PC 2／3列・TAB 2列・SP 1列（間 32）
           --rows＝1列。右に画像を置く項目は .kk-c-feature--media ＋ .kk-c-feature__media
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features {
  display: grid;
  grid-template-columns: repeat(var(--kk-features, 3), minmax(0, 1fr));
  gap: var(--kk-space-grid-gap);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--2 { --kk-features: 2; row-gap: 40px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--3 { --kk-features: 3; row-gap: 40px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 28px 0 8px;
  border-top: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows .kk-c-feature { padding-bottom: 40px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__icon { width: var(--kk-icon-size); height: var(--kk-icon-size); color: var(--kk-color-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__num {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-number);        /* Number 21 / 21（SP 18） */
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-tight);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__title {
  margin-top: 16px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);            /* H4 20 / 32（SP 18 / 28.8） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature > .kk-c-feature__title:first-child { margin-top: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__text,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__body p,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__body li {
  font-size: var(--kk-fs-body-small);    /* BodySmall 15 / 30（SP 14 / 28） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-muted);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__text { margin-top: 12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__body { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__text a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__body a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--kk-color-text-link-line); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__text a:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__body a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature__media { width: 100%; margin-top: 20px; }
/* 1列で右に画像を置く形（PC） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  column-gap: 48px;
  align-items: start;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature--media > .kk-c-feature__media { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-feature--media > :not(.kk-c-feature__media) { grid-column: 1; }
/* 1列で画像が無いときは、本文の幅を680に（Body と同じ） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows .kk-c-feature:not(.kk-c-feature--media) .kk-c-feature__body { max-width: var(--kk-container-text); }

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features--2,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--kk-space-grid-gap); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features--2,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-features--3 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows { gap: 0; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-features--rows .kk-c-feature { padding-bottom: 32px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-feature--media { display: flex; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-feature--media > .kk-c-feature__media { margin-top: 20px; order: 9; }
}

/* =========================================================
   27. 悩みリスト（ProblemItem 19:202）
   - 先頭に橙の1px×24px・行ごとに下1px。PC 2列（間 40）／SP 1列
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-problem-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-problem {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 22px;
  border-bottom: 1px solid var(--kk-color-border-strong);
  font-size: var(--kk-fs-body);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-problem::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--kk-color-main); }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-problem-list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   28. 未確定情報の枠（TBDBox 19:211）— 公開前に中身を確定し、この枠は外す
   - <div class="kk-c-tbd"><p class="kk-c-tbd__label">TBD</p><p class="kk-c-tbd__text">…</p></div>
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tbd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px;
  border: 1px dashed var(--kk-color-label-gold);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tbd__label {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-caption);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tbd__text {
  font-size: var(--kk-fs-body-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-tbd { padding: 20px; } /* Figma 29:2261 から逆算 */
}

/* =========================================================
   29. 関連サービス・コースのバナー（RelatedService 19:226 ／ PC 19:218・SP 19:225）
   - <a class="kk-c-related-service">（英字ラベル・名前・一言 ＋ 右に →）。ホバーで線を accent に
   - 並べるとき：.kk-c-related-grid（PC 3＋2／TAB 2／SP 1。/company/ 25:791）
                 .kk-c-related-grid--2（PC・TAB 2列／SP 1列。人材育成のコース 32:5100）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
  transition: border-color var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service:focus-visible { border-color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service__en { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service__name {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);            /* H4 20 / 32（SP 18 / 28.8） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service__lead {
  font-size: var(--kk-fs-small);         /* Small 14 / 26.6（SP 13 / 24.7） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service__arrow {
  flex: none;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3-card);       /* 28 / 42（SP 26 / 39） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-card);
  color: var(--kk-color-accent);
  transition: transform var(--kk-dur-base) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service:hover .kk-c-related-service__arrow { transform: translateX(4px); }

:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > * { grid-column: span 2; display: flex; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid .kk-c-related-service { flex: 1 1 auto; min-width: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > :nth-child(n + 4) { grid-column: span 3; }
/* 7件（/company/ のサービス内容。2026-10-20 講座・経営指針塾を追加）＝PC 3＋2＋2 */
@media (min-width: 1001px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(7):last-child) > * { grid-column: span 4; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(7):last-child) > :nth-child(n + 4) { grid-column: span 6; }
}
/* 8件（2026-10-21 AI業務改善を追加）＝PC 3＋3＋2 */
@media (min-width: 1001px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(8):last-child) > * { grid-column: span 4; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid:has(> :nth-child(8):last-child) > :nth-child(n + 7) { grid-column: span 6; }
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kk-space-grid-gap); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 > *,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 > :nth-child(n + 4) { grid-column: auto; }

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > *,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > :nth-child(n + 4) { grid-column: span 1; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 { gap: var(--kk-space-grid-gap); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-service { gap: 16px; padding: 24px 20px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid--2 { gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-related-grid > :last-child:nth-child(odd) { grid-column: auto; }
}

/* =========================================================
   30. Webマーケの全体像（Diagram/WebFunnel 39:5741 ／ PC 39:5696・SP 39:5740）
   - 見つけてもらう → 伝わる → 問い合わせ → 続く関係。ゴール（問い合わせ）だけ mainLight の背景
   - <ol class="kk-c-web-funnel"><li class="kk-c-web-funnel__step">…</li></ol>（ゴールは --goal）
   - 1px の格子線は gap:1px ＋背景色（PC 4列／TAB 2列／SP 1列）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--kk-color-border-strong);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 32px 28px;
  background: var(--kk-color-base-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__step--goal { background: var(--kk-color-main-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__head { display: flex; align-items: center; gap: 12px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__icon { width: var(--kk-icon-size); height: var(--kk-icon-size); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__num {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-number);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-tight);
  color: var(--kk-color-label-gold);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__en { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__step--goal .kk-c-web-funnel__num,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__step--goal .kk-c-web-funnel__en { color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__name {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__text {
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-muted);
}
@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel { grid-template-columns: minmax(0, 1fr); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-web-funnel__step { padding: 20px; }  /* Figma SP 39:5740 */
}

/* =========================================================
   31. カテゴリタブ（TabItem 19:275 ／ /works/ 31:3451・/blog/ 32:4216）
   - <div class="kk-c-tabs" role="tablist"> > <button class="kk-c-tabs__item" role="tab" aria-selected="true">
   - 選択中は basesub の地＋下2pxの橙線。ほかは下1px。SP で入りきらないときは横スクロール
   - WordPress では SWELL のタブブロック／カテゴリリンクにこの見た目を当てる
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs::-webkit-scrollbar { display: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item {
  flex: none;
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--kk-color-border-strong);
  font-size: 14px;                      /* PC/Small 14 / 26.6（SP も 14） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  white-space: nowrap;
  color: var(--kk-color-text-muted);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item:focus-visible { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item[aria-selected="true"],
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item[aria-current="page"],
:is(.kk-wp, .editor-styles-wrapper) .kk-c-tabs__item.is-active {
  background: var(--kk-color-base-sub);
  border-bottom: 2px solid var(--kk-color-main);
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-root .kk-c-tabs__item:focus-visible { outline-offset: -2px; }

/* =========================================================
   32. ページ送り（/blog/ 32:4298・/news/ 32:4592）
   - <nav class="kk-c-pagination" aria-label="ページ送り"><ul><li><a aria-current="page">1</a></li>…
   - 44×44・間隔8・白20%の線。現在のページは橙の塗り（WordPress では SWELL の .c-pagination に当てる）
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kk-color-border-strong);
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);        /* Label 12（SP 11） */
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  text-indent: var(--kk-ls-label);      /* 字間ぶん右にずれるのを戻す */
  line-height: 1;
  color: var(--kk-color-text-sub);
  transition: border-color var(--kk-dur-fast) var(--kk-ease-base), color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination a:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination a:focus-visible { border-color: var(--kk-color-accent); color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-pagination [aria-current="page"] {
  background: var(--kk-color-main);
  border-color: var(--kk-color-main);
  color: var(--kk-color-button-text);
}

/* =========================================================
   33. 既存本文の流し込み枠（.kk-c-entry）
   Figma：人材育成・47扇子 共通テンプレート section/existing-content
     PC 32:5078（entry-content 32:5079）／SP 32:5195（32:5196）／47扇子 56:6548
   使うページ：/human-resource/ と子2ページ・/sensu/・/privacy-policy/
   - 1セクション（WordPress の1グループ）＝ .kk-l-section > .kk-l-container > .kk-c-entry
   - 中身：見出し（WP H2）・段落・表（25. .kk-c-definition-list）・要確認の枠（28. .kk-c-tbd）・
     番号つきの項目（26. .kk-c-features--2／--3／--rows）・カード・画像の枠・ボタン
   ========================================================= */
/* 本文の列：幅880・要素の間24（Figma entry-content gap 24。PC/SP 同じ） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: var(--kk-container-narrow);
  margin-inline: auto;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry > * { min-width: 0; }

/* 見出し（WP H2：英字ラベル＋明朝34／下に1px線） Figma 32:5083 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kk-color-border-strong);
}
/* セクションの先頭は上の32を取る（Figma では TBD 枠の下にあるための余白） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry > .kk-c-entry__head:first-child { padding-top: 0; }
/* 見出しの線のすぐ下に、線で始まる部品（表・項目・ステップ・FAQ）が来るときは線が二重に見えないよう間をあける */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__head + :is(.kk-c-definition-list, .kk-c-features, .kk-c-steps, .kk-c-faq) { margin-top: 16px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__label {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__label--gold { color: var(--kk-color-label-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__title {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3);           /* PC 34 / SP 26 */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);    /* 1.36 / 34 = 0.04em */
  line-height: var(--kk-lh-heading);    /* 51 / 34 = 1.5 */
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__kicker { /* 見出しの前に置く短い一文（例：47の地域。47の想い。） */
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
  color: var(--kk-color-text-sub);
}

/* 小見出し（h3）：H4 20/32 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__subtitle {
  margin-top: 24px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
  color: var(--kk-color-text);
}

/* 段落：Body 16/32（SP 15/30）・幅680 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text { display: flex; flex-direction: column; gap: 16px; max-width: var(--kk-container-text); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text p {
  font-size: var(--kk-fs-body);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text strong { font-weight: var(--kk-fw-medium); color: var(--kk-color-text); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text a { color: var(--kk-color-text-link); border-bottom: 1px solid var(--kk-color-text-link-line); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__text--wide { max-width: none; }

/* 補足（※〜）：Small 14 */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__note-text {
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-muted);
}

/* 箇条書き（・） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__list { display: flex; flex-direction: column; gap: 4px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__list li { position: relative; padding-left: 1.2em; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__list li::before { content: "・"; position: absolute; left: 0; color: var(--kk-color-label-gold); }

/* カード（白20%の線・basesub）。中の見出し・本文は 26. の .kk-c-feature__title／__body を使う */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__cards {
  display: grid;
  grid-template-columns: repeat(var(--kk-entry-cols, 2), minmax(0, 1fr));
  gap: var(--kk-space-grid-gap);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__cards--4 { --kk-entry-cols: 4; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--kk-space-card-sm);
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__card .kk-c-feature__title,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__card .kk-c-feature__body { margin-top: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__card-media { width: 100%; margin-bottom: 8px; }

/* 画像の枠（現行の画像は使わない。ImagePlaceholder 18:29） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__media { width: 100%; aspect-ratio: 16 / 9; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__media--wide { aspect-ratio: 880 / 320; }
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__media--card { aspect-ratio: 3 / 2; }

/* ボタン（button/primary：本文の最後） */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__cards--4 { --kk-entry-cols: 2; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__label { line-height: 1.6; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__cards { grid-template-columns: minmax(0, 1fr); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-c-entry__actions { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   34. 当たり判定（tokens tapTarget 44・QA B-2）
   見た目の大きさ・行間は変えず、疑似要素で当たり判定だけ縦横 44px 以上に広げる。
   文中のリンクは対象外（WCAG 2.5.8 の例外）。::before／::after がすでに使われている要素は空いている方を使う
   ========================================================= */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__bottom a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd > a,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary {
  position: relative;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__col a::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-footer__bottom a::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-breadcrumb a::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__sub a::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-definition-list dd > a::after,
:is(.kk-wp, .editor-styles-wrapper) .kk-c-service-card__details summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--kk-tap-target));
  height: max(100%, var(--kk-tap-target));
  transform: translate(-50%, -50%);
}