/* ==========================================================
   自動生成（06_wordpress/_tools/build_wp.py）— 手で直さない
   元：05_coding/assets/css/base.css
   変更点：各セレクタの頭に :is(.kk-wp, .editor-styles-wrapper) を足しただけ（値は同じ）。.kk-wp は SWELL の #body_wrap に付く
   SWELL の .post_content h2 などより詳細度を上げ、管理画面のエディタにも同じ見た目を出すため
   ========================================================== */
/* ==========================================================
   base.css — 心灯サイト共通の土台
   - リセットはすべて .kk-root の中に閉じ込める（SWELL 本体・プラグインに影響させない）
   - :where() で詳細度 0 にしているので、コンポーネント側の指定が必ず勝つ
   - レイアウト（.kk-l-*）とユーティリティ（.kk-u-*）もここ
   ========================================================== */
/* ---------- ページ全体（静的HTML用。WordPress では SWELL のカスタマイザーで背景色を合わせる） ---------- */


/* ---------- ラッパー内のリセット ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-root {
  position: relative;
  background: var(--kk-color-base);
  color: var(--kk-color-text);
  font-family: var(--kk-ff-base);
  font-size: var(--kk-fs-body);
  font-weight: var(--kk-fw-regular);
  line-height: var(--kk-lh-body);
  letter-spacing: var(--kk-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  line-break: strict;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(*, *::before, *::after) { box-sizing: border-box; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(ul, ol) { padding: 0; list-style: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(a) { color: inherit; text-decoration: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(img, svg, video, canvas) { display: block; max-width: 100%; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(img) { height: auto; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(em) { font-style: normal; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where([hidden]) { display: none !important; }
:is(.kk-wp, .editor-styles-wrapper) .kk-root :where(a, button, summary, input, select, textarea):focus-visible {
  outline: var(--kk-focus-outline);
  outline-offset: var(--kk-focus-offset);
}

/* ---------- アクセシビリティ ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 300;
  padding: 12px 16px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-accent);
  color: var(--kk-color-text);
  font-size: var(--kk-fs-small);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-c-skip-link:focus { top: 16px; }

/* ---------- レイアウト ---------- */
/* コンテナ：最大1280px＋左右 gutter（80 / tab48 / sp24） */
:is(.kk-wp, .editor-styles-wrapper) .kk-l-container {
  width: 100%;
  max-width: calc(var(--kk-container-max) + var(--kk-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--kk-gutter);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-l-container--narrow { max-width: calc(var(--kk-container-narrow) + var(--kk-gutter) * 2); }
:is(.kk-wp, .editor-styles-wrapper) .kk-l-container--text { max-width: calc(var(--kk-container-text) + var(--kk-gutter) * 2); }

/* セクション（1セクション＝WordPress の1グループブロック） */
:is(.kk-wp, .editor-styles-wrapper) .kk-l-section {
  position: relative;
  padding-block: var(--kk-space-section);
  background: var(--kk-color-base);
  border-top: 1px solid var(--kk-color-border);
  scroll-margin-top: 24px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-l-section--sub { background: var(--kk-color-base-sub); }
:is(.kk-wp, .editor-styles-wrapper) .kk-l-section--deep { background: var(--kk-color-base-deep); }
:is(.kk-wp, .editor-styles-wrapper) .kk-l-section--flush { border-top: 0; }
/* セクション内の縦の流れ（見出し → 中身 = block 64/32） */
:is(.kk-wp, .editor-styles-wrapper) .kk-l-stack { display: flex; flex-direction: column; gap: var(--kk-space-block); }
:is(.kk-wp, .editor-styles-wrapper) .kk-l-stack > * { min-width: 0; }

/* ---------- ユーティリティ ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-u-pc-only { display: revert; }
:is(.kk-wp, .editor-styles-wrapper) .kk-u-sp-only { display: none; }
:is(.kk-wp, .editor-styles-wrapper) br.kk-u-sp-only { display: none; }
.kk-wp .kk-u-hidden { display: none !important; }   /* 一旦非表示にするセクション（2026-10-21）。サイトでは出さない */
.editor-styles-wrapper .kk-u-hidden { opacity: 0.4; outline: 1px dashed currentColor; }   /* エディタでは薄く出す（編集・戻しやすく） */
:is(.kk-wp, .editor-styles-wrapper) br.kk-u-pc-only { display: inline; }
:is(.kk-wp, .editor-styles-wrapper) .kk-u-nowrap { white-space: nowrap; }
:is(.kk-wp, .editor-styles-wrapper) .kk-u-accent { color: var(--kk-color-accent); }
:is(.kk-wp, .editor-styles-wrapper) .kk-u-tbd { color: var(--kk-color-label-gold); } /* 【要確認】の目印（公開前に外す） */
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-u-pc-only,
:is(.kk-wp, .editor-styles-wrapper) br.kk-u-pc-only { display: none; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-u-sp-only { display: revert; }
  :is(.kk-wp, .editor-styles-wrapper) br.kk-u-sp-only { display: inline; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-root :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}