/**
 * AI Kitchen — 深夜の厨房論 — ai-kitchen.css
 *
 * 設計思想:
 *   - #aik-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSSカスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 「深夜の厨房」— 深いエスプレッソブラウン×銅(カッパー)×セージグリーン
 *   - フォント: Shippori Mincho（明朝・和の情緒）+ Zen Kaku Gothic New（本文）+ Cormorant Garamond（欧文Display）
 *   - 行間設計: デバイス別 line-height 完全最適化（Section 5.10）
 *   - 配色アクセシビリティ: コントラスト比 4.5:1 以上保証（Section 5.8）
 *   - テキスト中央配置: Flexboxラッパー構造（Section 5.9）
 *
 * @package cocoon-child-master
 */


/* ================================================================
   1. COCOON 干渉リセット
   ================================================================ */
.ai-kitchen .article,
.ai-kitchen .entry-content,
.ai-kitchen .main,
.ai-kitchen .content,
.ai-kitchen .wrap,
.ai-kitchen #main,
.ai-kitchen #body-in,
.ai-kitchen #container,
.ai-kitchen #container-in,
.ai-kitchen #contents,
.ai-kitchen #contents-in {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  position: static !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

.ai-kitchen #sidebar,
.ai-kitchen .sidebar,
.ai-kitchen #sidebar-scroll,
.ai-kitchen .sidebar-top,
.ai-kitchen .sidebar-bottom {
  display: none !important;
}

.ai-kitchen #footer:not(.tp-footer),
.ai-kitchen .site-footer:not(.tp-footer),
.ai-kitchen .footer:not(.tp-footer) {
  display: none !important;
}


/* ================================================================
   2. CSSカスタムプロパティ（全色・全値）
   ================================================================ */
#aik-root {
  /* ─ カラーパレット：「深夜の厨房」深いエスプレッソブラウン × 銅（カッパー） ─ */
  --aik-bg:          #14100b;
  --aik-bg-2:        #1c1610;
  --aik-bg-card:     #241d15;
  --aik-gold:        #c17d43;   /* 銅（カッパー） */
  --aik-gold-bright: #e0a668;   /* 明るい銅 */
  --aik-gold-light:  #f0dcc0;   /* 薄い銅 */
  --aik-sage:        #8a9c7d;   /* セージグリーン（副アクセント） */
  --aik-text:        #efe6d8;
  --aik-text-2:      #c9bda5;
  --aik-text-3:      #a89c85;
  --aik-border:      rgba(193, 125, 67, 0.2);

  /* ─ タイポグラフィ ─ */
  --aik-font-sans:    'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --aik-font-serif:   'Shippori Mincho', serif;
  --aik-font-display: 'Cormorant Garamond', serif;

  /* ─ 行間設計（モバイル基準値）─ */
  --aik-lh-body:     1.9;
  --aik-lh-lead:     2.0;
  --aik-lh-h1:       1.25;
  --aik-lh-h2:       1.3;
  --aik-lh-h3:       1.4;
  --aik-lh-caption:  1.7;

  /* ─ 文字間隔（モバイル基準値）─ */
  --aik-ls-body:     0.03em;
  --aik-ls-heading:  -0.01em;
  --aik-ls-display:   0.05em;
  --aik-ls-caption:   0.02em;

  /* ─ スペーシング ─ */
  --aik-section-py:    clamp(3.5rem, 7vw, 7rem);
  --aik-container-max: 900px;
  --aik-container-wide: 1100px;
  --aik-radius:         12px;
  --aik-radius-sm:      8px;
  --aik-radius-lg:      20px;

  /* ─ 段落・見出し余白 ─ */
  --aik-p-gap:         1.25em;
  --aik-heading-mb:    0.8em;
  --aik-list-gap:      0.5em;

  /* ─ トランジション ─ */
  --aik-transition:      0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --aik-transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ================================================================
   3. GLOBAL RESET — #aik-root スコープ
   ================================================================ */
#aik-root,
#aik-root *,
#aik-root *::before,
#aik-root *::after {
  box-sizing: border-box;
}

#aik-root h1,
#aik-root h2,
#aik-root h3,
#aik-root h4,
#aik-root h5,
#aik-root h6,
#aik-root p,
#aik-root ul,
#aik-root ol,
#aik-root li,
#aik-root figure,
#aik-root blockquote,
#aik-root dl,
#aik-root dd {
  margin: 0;
  padding: 0;
}

#aik-root ul,
#aik-root ol {
  list-style: none;
}

#aik-root {
  background-color: var(--aik-bg);
  color: var(--aik-text);
  font-family: var(--aik-font-sans);
  font-weight: 400;
  line-height: var(--aik-lh-body, 1.9);
  letter-spacing: var(--aik-ls-body, 0.03em);
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  word-break: auto-phrase;
}

#aik-root img,
#aik-root svg { display: block; max-width: 100%; }

#aik-root a { color: inherit; text-decoration: none; }

#aik-root ::selection { background: var(--aik-gold-bright); color: var(--aik-bg); }

#aik-root :focus-visible {
  outline: 2px solid var(--aik-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

#aik-root h1,
#aik-root h2,
#aik-root h3 {
  font-family: var(--aik-font-serif);
  font-weight: 700;
  color: var(--aik-text);
}

#aik-root hr {
  border: none;
  border-top: 1px solid var(--aik-border);
  margin: 0;
}


/* ================================================================
   4. ベースコンポーネント
   ================================================================ */
.aik-container {
  max-width: var(--aik-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.aik-container--wide {
  max-width: var(--aik-container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.aik-section {
  padding-block: var(--aik-section-py);
  position: relative;
}

.aik-section--alt {
  background-color: var(--aik-bg-2);
}

.aik-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--aik-font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--aik-gold-bright);
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.aik-kicker::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: var(--aik-gold);
  display: inline-block;
}


/* ================================================================
   5. スクロールリビール
   ================================================================ */
.aik-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.aik-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.aik-reveal[data-delay="1"] { transition-delay: 0.1s; }
.aik-reveal[data-delay="2"] { transition-delay: 0.2s; }
.aik-reveal[data-delay="3"] { transition-delay: 0.3s; }
.aik-reveal[data-delay="4"] { transition-delay: 0.4s; }


/* ================================================================
   6. テーブル・ブロッククォート白抜き対策（独自コンポーネント）
   ================================================================ */
#aik-root blockquote {
  background: var(--aik-bg-card) !important;
  border-left: 3px solid var(--aik-gold) !important;
  border-right: none !important;
  color: var(--aik-text) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--aik-radius-sm) !important;
}

#aik-root blockquote::before,
#aik-root blockquote::after {
  display: none !important;
}

.aik-table-wrap {
  overflow-x: auto;
  margin-block: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--aik-container-wide);
  border-radius: var(--aik-radius);
  border: 1px solid var(--aik-border);
}

.aik-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: transparent !important;
}

.aik-table thead th {
  background: var(--aik-bg-card) !important;
  color: var(--aik-text-2);
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--aik-border);
  line-height: var(--aik-lh-body);
}

.aik-table tbody td {
  background: transparent !important;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(193, 125, 67, 0.08);
  color: var(--aik-text-2);
  vertical-align: top;
  line-height: var(--aik-lh-body);
}

.aik-table tbody tr:last-child td { border-bottom: none; }

.aik-table tbody tr:hover td {
  background: rgba(193, 125, 67, 0.04) !important;
}


/* ================================================================
   8. アクセシビリティ配色仕様（Cocoonストライプリセット含む）
      ★省略禁止。全コード必須出力。
   ================================================================ */

/* ──
   【最重要】Cocoonテーブルストライプ背景の強制リセット
   tr:nth-of-type(even/odd) によるグレー・白の自動付与を完全無効化する
   ── */
#aik-root .entry-content table,
#aik-root table {
  background-color: transparent !important;
  border-collapse: collapse;
}

#aik-root .entry-content table tr,
#aik-root .entry-content table tr:nth-of-type(even),
#aik-root .entry-content table tr:nth-of-type(odd),
#aik-root table tr,
#aik-root table tr:nth-of-type(even),
#aik-root table tr:nth-of-type(odd) {
  background-color: var(--aik-bg-card) !important;
  color: var(--aik-text) !important;
}

#aik-root .entry-content table th,
#aik-root .entry-content table td,
#aik-root table th,
#aik-root table td {
  color: inherit !important;
  border-color: var(--aik-border) !important;
}

/* ──
   Cocoonが注入した白背景のblockquoteを安全なグレーに強制置換
   ── */
#aik-root blockquote:not([class*="aik"]),
body.ai-kitchen .entry-content blockquote {
  background-color: #F0F0F0 !important; /* Rule 4: #F5F5F5〜#E0E0E0 範囲内 ✓ */
  color:            #1A1A1A !important; /* Rule 2: 対比比 ~14:1 ✓ */
  border-left:  4px solid #555555 !important;
  border-right: none       !important;
  border-top:   none       !important;
  border-bottom:none       !important;
  padding:  1.25rem 1.5rem !important;
  margin:   0              !important;
  box-shadow: none         !important;
}

/* ──
   Cocoonが注入した白背景のtableを安全なグレーに強制置換
   （LPカスタムクラスを持たないテーブル = Cocoonデフォルト適用テーブル対象）
   ── */
#aik-root table:not([class*="aik"]) th,
body.ai-kitchen .entry-content table th {
  background-color: #E8E8E8 !important; /* Rule 4 ✓ */
  color:            #111111 !important; /* Rule 2: 対比比 ~16:1 ✓ */
  border-color:     #C0C0C0 !important;
}

#aik-root table:not([class*="aik"]) td,
body.ai-kitchen .entry-content table td {
  background-color: #F5F5F5 !important; /* Rule 4 ✓ */
  color:            #222222 !important; /* Rule 2: 対比比 ~15:1 ✓ */
  border-color:     #D0D0D0 !important;
}

/* ──
   code / pre のCocoon白抜き上書き
   ── */
#aik-root code:not([class]) {
  background-color: #EBEBEB !important; /* Rule 4 ✓ */
  color:            #1E1E1E !important; /* Rule 2: ~15:1 ✓ */
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}

#aik-root pre:not([class]) {
  background-color: #EBEBEB !important; /* Rule 4 ✓ */
  color:            #1E1E1E !important; /* Rule 2 ✓ */
  padding: 1rem 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.875em;
}

/* ──
   ダークLP内の専用blockquote（デザイン強調用）
   ── */
#aik-root .aik-blockquote {
  background-color: var(--aik-bg-card) !important;
  color:            var(--aik-text)    !important;
  border-left: 3px solid var(--aik-gold) !important;
  padding: 1.5rem 1.75rem !important;
  border-radius: var(--aik-radius-sm) !important;
}


/* ================================================================
   9. テキストブロック中央配置仕様（Flexboxラッパー構造）
      ★margin:autoではなくFlexboxラッパーを使用すること
   ================================================================ */

/* ── Flexboxラッパー（中央配置の標準パターン）── */
.aik-align-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* ブロック要素自体の水平中央配置 */
  justify-content: center;
  width: 100%;
}

.aik-align-center-wrapper .aik-content-block {
  max-width: var(--aik-container-max); /* 900px デフォルト */
  text-align: center; /* 内部テキストの中央揃え */
  width: 100%;
}

.aik-align-center-wrapper .aik-content-block--wide {
  max-width: var(--aik-container-wide); /* 1100px */
  text-align: center;
  width: 100%;
}

/* ── セクションヘッダーの中央配置（Flexboxラッパー構造） ── */
.aik-section-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.aik-section-header {
  text-align: center;
  max-width: min(640px, 90%);
  width: 100%;
}

/* セクション eyebrow ラベル */
.aik-section-eyebrow {
  text-align: center;
  display: block;
  width: fit-content;
}

/* ── CTAボタン wrap の中央配置（Flexboxラッパー構造）── */
.aik-cta-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.aik-cta-btn-wrap {
  text-align: center;
  width: fit-content;
}

/* ── blockquote の中央配置（Flexboxラッパー構造）── */
.aik-blockquote-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.aik-blockquote-center-wrap blockquote,
.aik-blockquote-center-wrap .aik-blockquote {
  text-align: center !important;
  max-width: min(680px, 90%) !important;
  width: 100% !important;
}

/* ── テーブルラッパーの中央配置（Flexboxラッパー構造）── */
.aik-table-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ── 補助ユーティリティ（Flexboxラッパーが使えない場面用）── */
.aik-text-center { text-align: center !important; }

.aik-block-center {
  margin-left:  auto !important;
  margin-right: auto !important;
  max-width: var(--aik-container-max);
}


/* ================================================================
   10. 行間設計・デバイス別最適化（★単一値設定禁止）
   ================================================================ */

/* ── 10.1 モバイル基準値（デフォルト: 〜767px）── */

#aik-root p,
#aik-root li {
  line-height:    var(--aik-lh-body, 1.9);
  letter-spacing: var(--aik-ls-body, 0.03em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#aik-root .aik-lead,
#aik-root .aik-cover__sub,
#aik-root .aik-section-desc {
  line-height:    var(--aik-lh-lead, 2.0);
  letter-spacing: 0.04em;
  overflow-wrap:  break-word;
}

#aik-root h1,
#aik-root .aik-cover__title {
  line-height:    var(--aik-lh-h1, 1.25);
  letter-spacing: var(--aik-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#aik-root h2,
#aik-root .aik-section-title {
  line-height:    var(--aik-lh-h2, 1.3);
  letter-spacing: var(--aik-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#aik-root h3 {
  line-height:    var(--aik-lh-h3, 1.4);
  letter-spacing: -0.005em;
  overflow-wrap:  break-word;
}

#aik-root h4,
#aik-root h5,
#aik-root h6 {
  line-height:    1.45;
  letter-spacing: -0.005em;
}

#aik-root small,
#aik-root .aik-caption,
#aik-root .aik-note,
#aik-root .aik-cta-btn__sub {
  line-height:    var(--aik-lh-caption, 1.7);
  letter-spacing: var(--aik-ls-caption, 0.02em);
}

#aik-root .aik-section-eyebrow,
#aik-root .aik-cover__eyebrow,
#aik-root [class*="aik-en-"] {
  letter-spacing: var(--aik-ls-display, 0.05em);
  line-height: 1.4;
}

/* ── 10.2 段落間・見出し後スペーシング ── */

#aik-root p + p { margin-top: var(--aik-p-gap, 1.25em); }

#aik-root h2 + p,
#aik-root h2 + .aik-section-desc,
#aik-root h3 + p {
  margin-top: 0.75em;
}

#aik-root p + ul,
#aik-root p + ol {
  margin-top: 0.75em;
}

#aik-root li + li { margin-top: var(--aik-list-gap, 0.5em); }

#aik-root h2:not(:first-child),
#aik-root h3:not(:first-child) {
  margin-top: 2em;
}

#aik-root h2,
#aik-root h3 {
  margin-bottom: var(--aik-heading-mb, 0.8em);
}

/* ── 10.3 タブレット最適化（768px〜1023px）── */
@media (min-width: 768px) {
  #aik-root {
    --aik-lh-body:    1.88;
    --aik-lh-lead:    1.95;
    --aik-lh-h1:      1.2;
    --aik-lh-h2:      1.28;
    --aik-lh-h3:      1.35;
    --aik-ls-body:    0.025em;
    --aik-p-gap:      1.3em;
  }

  #aik-root .aik-container p,
  #aik-root .aik-section-header p {
    max-width: 100%;
  }
}

/* ── 10.4 デスクトップ最適化（1024px〜）── */
@media (min-width: 1024px) {
  #aik-root {
    --aik-lh-body:    1.85;
    --aik-lh-lead:    1.9;
    --aik-lh-h1:      1.15;
    --aik-lh-h2:      1.2;
    --aik-lh-h3:      1.3;
    --aik-lh-caption: 1.65;
    --aik-ls-body:    0.02em;
    --aik-ls-heading: -0.02em;
    --aik-p-gap:      1.35em;
    --aik-heading-mb: 0.85em;
  }

  #aik-root h1,
  #aik-root .aik-cover__title {
    letter-spacing: -0.025em;
  }
}

/* ── 10.5 ワイドデスクトップ（1280px〜）── */
@media (min-width: 1280px) {
  #aik-root { --aik-lh-body: 1.85; }
}


/* ================================================================
   12. リスト要素 Cocoon干渉排除（★省略禁止）
   ================================================================ */

/* ── Cocoonデフォルトリストマーカーの完全初期化 ── */
#aik-root .entry-content ul,
#aik-root .entry-content ol,
#aik-root ul,
#aik-root ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#aik-root .entry-content li,
#aik-root li {
  position: relative;
  padding-left: 0 !important;
  margin-bottom: 0;
  list-style-type: none !important;
}

#aik-root .entry-content li::before,
#aik-root .entry-content li::after {
  content: none !important;
}

/* ── LP独自のマーカー設定（銅色ドット）── */
#aik-root .aik-list li {
  padding-left: 1.5em !important;
  margin-bottom: var(--aik-list-gap, 0.5em);
  position: relative;
}

#aik-root .aik-list li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--aik-gold);
  font-size: 0.6em;
  line-height: var(--aik-lh-body);
}

/* ── チェックマーク型リスト ── */
#aik-root .aik-list--check li::before {
  content: '✓';
  color: var(--aik-gold);
  font-weight: 700;
  font-size: 0.85em;
}

/* ── ナンバリングリスト ── */
#aik-root .aik-list--numbered { counter-reset: aik-counter; }
#aik-root .aik-list--numbered li { counter-increment: aik-counter; }
#aik-root .aik-list--numbered li::before {
  content: counter(aik-counter);
  font-family: var(--aik-font-display);
  color: var(--aik-gold);
  font-weight: 600;
  font-size: 0.9em;
}

/* ── チップリスト（フラット・タグ風）── */
#aik-root .aik-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
#aik-root .aik-chip-list li {
  font-size: .82rem;
  color: var(--aik-text-2);
  background: var(--aik-bg-card);
  border: 1px solid var(--aik-border);
  border-radius: 100px;
  padding: .35rem .9rem !important;
  margin-bottom: 0;
}


/* ================================================================
   13. カバーセクション（ファーストビュー）
   ================================================================ */
.aik-cover {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
  background:
    linear-gradient(to right, rgba(20, 16, 11, .92) 0%, rgba(20, 16, 11, .72) 45%, rgba(20, 16, 11, .45) 100%),
    url('https://www.turning-point.today/wp-content/uploads/2026/08/ai-kitchen_1.webp') center right / cover no-repeat,
    var(--aik-bg);
}


.aik-cover__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.01) 0px, transparent 1px, transparent 2px);
}

.aik-cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--aik-gold-bright);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.aik-cover__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aik-gold-bright);
  box-shadow: 0 0 12px rgba(224,166,104,.7);
  display: inline-block;
}

.aik-cover__title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  margin-bottom: 1.6rem;
}
.aik-cover__title em {
  font-style: normal;
  color: var(--aik-gold-bright);
  border-bottom: 1px solid rgba(224,166,104,.5);
}

.aik-cover__sub {
  max-width: 44rem;
  color: var(--aik-text-2);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.08rem);
  margin-inline: auto;
  margin-bottom: 2.6rem;
}

.aik-cover__diagram { margin: 0 auto 2.2rem; max-width: 30rem; }

.aik-cover__scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-size: .75rem;
  letter-spacing: .18em;
  color: var(--aik-text-3);
  margin-top: 2.4rem;
}
.aik-cover__scroll .ln {
  width: 0; height: 34px;
  border-left: 1px solid var(--aik-border);
  position: relative;
}
.aik-cover__scroll .ln::after {
  content: "";
  position: absolute; left: -2px; top: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--aik-gold-bright);
  animation: aik-drip 2.4s ease-in-out infinite;
}
@keyframes aik-drip {
  0%   { top: 0;   opacity: 0; }
  15%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 28px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aik-cover__scroll .ln::after { animation: none; opacity: 1; top: 12px; }
}


/* ================================================================
   14. CTAボタン
   ================================================================ */
.aik-cta-btn,
.aik-cover__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--aik-font-serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--aik-bg);
  padding: 1.05rem 2.6rem;
  border-radius: 100px;
  box-shadow: 0 14px 34px -12px rgba(193,125,67,.5);
  transition: transform var(--aik-transition), box-shadow var(--aik-transition), filter var(--aik-transition);
  will-change: transform;
}
.aik-cta-btn:hover,
.aik-cover__cta-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 18px 42px -12px rgba(193,125,67,.65);
}
.aik-cta-btn__sub {
  color: var(--aik-text-3);
  font-size: .78rem;
  margin-top: 1rem !important;
  text-align: center;
}


/* ================================================================
   15. 本編プローズ(エッセイ)共通
   ================================================================ */
.aik-prose h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
}
.aik-prose h3 {
  font-size: 1.15rem;
  color: var(--aik-gold-bright);
}
.aik-prose p { color: var(--aik-text); }
.aik-prose p.aik-soft { color: var(--aik-text-2); }

.aik-lines {
  font-weight: 500;
  color: var(--aik-text-2);
  margin: 1.6rem 0;
}
.aik-lines span { display: block; }

.aik-pull {
  font-family: var(--aik-font-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.8;
  color: var(--aik-text);
  border-left: 3px solid var(--aik-gold);
  padding: .2rem 0 .2rem 1.4rem;
  margin: 2.4rem 0;
}
.aik-pull strong { color: var(--aik-gold-bright); }

.aik-pull--center {
  border-left: none;
  border-top: 1px solid var(--aik-border);
  border-bottom: 1px solid var(--aik-border);
  padding: 2rem 0;
  text-align: center;
  font-size: 1.35rem;
}

.aik-formula {
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--aik-bg-card);
  border: 1px solid var(--aik-border);
  border-radius: var(--aik-radius-sm);
  padding: 1.3rem 1.5rem;
  color: var(--aik-text);
  font-size: .98rem;
  line-height: 1.9;
  margin: 1.8rem 0;
}
.aik-formula small {
  display: block;
  font-weight: 500;
  color: var(--aik-text-3);
  font-size: .72rem;
  letter-spacing: .12em;
  margin-bottom: .5rem;
}


/* ================================================================
   16. 9つの層
   ================================================================ */
.aik-layer {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.6rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--aik-border);
}
.aik-layer:first-of-type { border-top: none; }
.aik-layer__num {
  font-family: var(--aik-font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--aik-border);
  line-height: 1;
  position: relative;
  top: .15rem;
}
.aik-layer__body h3 { margin-bottom: .9rem !important; }
.aik-layer__body p { color: var(--aik-text-2); font-size: .98rem; }
.aik-layer__tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--aik-sage);
  border: 1px solid var(--aik-sage);
  border-radius: 100px;
  padding: .2rem .7rem;
  margin-bottom: .9rem;
}

@media (max-width: 640px) {
  .aik-layer { grid-template-columns: 1fr; gap: .6rem; }
  .aik-layer__num { font-size: 2rem; }
}

/* ================================================================
   16.5 インセット画像（編集記事風 figure — プラン2 / プラン4共用）
   ================================================================ */
.aik-figure {
  max-width: var(--aik-container-max);
  margin-inline: auto;
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.aik-figure img {
  width: 100%;
  height: auto;
  border-radius: 0; /* 角丸なし — 編集記事らしい佇まい */
  filter: saturate(.82) brightness(.92) sepia(.12); /* --aik-sage×--aik-gold の中間トーンに馴染ませる */
}
.aik-figure figcaption {
  margin-top: .9rem;
  font-size: .78rem;
  line-height: var(--aik-lh-caption, 1.7);
  letter-spacing: var(--aik-ls-caption, 0.02em);
  color: var(--aik-text-3);
  padding-left: 1rem;
  border-left: 2px solid var(--aik-border);
}

/* ── プラン4用バリエーション：レシピカード同系の枠線付き ── */
.aik-figure--lined {
  max-width: 44rem; /* レシピカードと同じ幅に揃える */
}
.aik-figure--lined img {
  border: 1px solid var(--aik-border);
  background: var(--aik-bg-card);
  padding: .6rem; /* クリーム系カードに額装したような馴染み */
}


/* ================================================================
   17. Q&A
   ================================================================ */
.aik-qa {
  border-top: 1px solid var(--aik-border);
  padding: 2.6rem 0;
}
.aik-qa:first-of-type { border-top: none; }
.aik-qa__q {
  display: flex; align-items: baseline; gap: .9rem;
  margin-bottom: 1.2rem;
}
.aik-qa__q .aik-mark {
  font-family: var(--aik-font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--aik-bg);
  background: var(--aik-gold-bright);
  border-radius: 50%;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.aik-qa__q h3 { font-size: 1.18rem; margin: 0 !important; }
.aik-qa__a { color: var(--aik-text-2); font-size: .98rem; }
.aik-qa__a strong { color: var(--aik-text); }
.aik-answer-badge {
  display: inline-block;
  font-family: var(--aik-font-serif);
  font-weight: 700;
  color: var(--aik-gold-bright);
  border-bottom: 1px solid var(--aik-gold);
  margin-bottom: 1rem;
  padding-bottom: .1rem;
}

.aik-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.8rem 0;
}
@media (max-width: 640px) { .aik-split { grid-template-columns: 1fr; } }
.aik-split__col {
  background: var(--aik-bg-card);
  border: 1px solid var(--aik-border);
  border-radius: var(--aik-radius-sm);
  padding: 1.5rem 1.6rem;
}
.aik-split__col h4 {
  font-size: .78rem;
  letter-spacing: .1em;
  font-weight: 700;
  margin: 0 0 .9rem !important;
  color: var(--aik-text-3);
}
.aik-split__col--accent h4 { color: var(--aik-sage); }
.aik-split__col li {
  font-size: .9rem;
  color: var(--aik-text-2);
  padding-left: 1.1em !important;
  position: relative;
}
.aik-split__col li::before {
  content: "—";
  position: absolute; left: 0; color: var(--aik-text-3);
}

.aik-tiers { display: grid; gap: .7rem; margin: 1.8rem 0; }
.aik-tier {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--aik-bg-card);
  border: 1px solid var(--aik-border);
  border-radius: var(--aik-radius-sm);
  padding: .9rem 1.2rem;
}
.aik-tier b {
  font-family: var(--aik-font-serif);
  font-size: .85rem;
  color: var(--aik-gold-bright);
}
.aik-tier span { font-size: .9rem; color: var(--aik-text-2); }
@media (max-width: 520px) { .aik-tier { grid-template-columns: 1fr; } }


/* ================================================================
   18. レベルの梯子 (Level 1-10)
   ================================================================ */
.aik-ladder-head p { color: var(--aik-text-2); max-width: 30rem; }
.aik-ladder {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--aik-border);
}
.aik-rung {
  display: grid;
  grid-template-columns: 3.6rem 10rem 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--aik-border);
}
.aik-rung__n { font-family: var(--aik-font-serif); font-size: 1.3rem; color: var(--aik-text-3); }
.aik-rung__name { font-weight: 700; font-size: .95rem; color: var(--aik-text); }
.aik-rung__desc { font-size: .85rem; color: var(--aik-text-2); }
.aik-rung--core { background: rgba(224,166,104,.07); }
.aik-rung--core .aik-rung__n,
.aik-rung--core .aik-rung__name { color: var(--aik-gold-bright); }
@media (max-width: 640px) {
  .aik-rung { grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; }
  .aik-rung__desc { grid-column: 2; }
}
.aik-ladder-note {
  margin-top: 2.4rem;
  text-align: center;
  color: var(--aik-text-2);
  font-size: .92rem;
}
.aik-ladder-note strong { color: var(--aik-gold-bright); }

/* ================================================================
   18.5 中間フルブリード — 視覚的な「間」（プラン3）
   ================================================================ */
.aik-breath {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
  background:
    linear-gradient(rgba(20, 16, 11, .55), rgba(20, 16, 11, .55)),
    url('https://www.turning-point.today/wp-content/uploads/2026/08/ai-kitchen_4.webp') center / cover no-repeat,
    var(--aik-bg);
  /* background-attachment: fixed は使用しない（iOS Safari 不具合回避） */
}
.aik-breath__quote {
  font-family: var(--aik-font-serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  line-height: 1.8;
  letter-spacing: .03em;
  text-align: center;
  color: var(--aik-text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  max-width: 34rem;
  margin: 0;
}
.aik-breath__quote strong { color: var(--aik-gold-bright); }


/* ================================================================
   19. レシピカード（署名要素）
   ================================================================ */
.aik-recipe-card {
  position: relative;
  max-width: 44rem;
  width: 100%;
  background: var(--aik-bg-card);
  border: 1px solid var(--aik-border);
  border-radius: var(--aik-radius-sm);
  padding: 2.6rem 2.2rem 2.2rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.aik-stamp {
  position: absolute;
  top: 1.6rem; right: 1.6rem;
  width: 5.4rem; height: 5.4rem;
  border: 1.5px dashed var(--aik-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg);
  text-align: center;
}
.aik-stamp span {
  font-size: .55rem;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--aik-gold-bright);
  line-height: 1.3;
}
.aik-recipe-card__title {
  font-family: var(--aik-font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aik-text-3);
  letter-spacing: .06em;
  margin-bottom: 1.7rem !important;
}
.aik-recipe-list { display: flex; flex-direction: column; }
.aik-recipe-list li {
  display: grid;
  grid-template-columns: 1fr 1.6rem 1fr;
  align-items: center;
  gap: .6rem;
  padding: .62rem 0 !important;
  border-bottom: 1px dashed var(--aik-border);
  font-size: .88rem;
  margin-bottom: 0 !important;
}
.aik-recipe-list li:last-child { border-bottom: none; }
.aik-recipe-list .k { color: var(--aik-sage); font-weight: 700; text-align: right; }
.aik-recipe-list .arrow { color: var(--aik-text-3); text-align: center; }
.aik-recipe-list .v { color: var(--aik-gold-bright); font-weight: 700; }
@media (max-width: 560px) {
  .aik-recipe-list li { grid-template-columns: 1fr; gap: .15rem; text-align: left; padding: .9rem 0 !important; }
  .aik-recipe-list .k { text-align: left; }
  .aik-recipe-list .arrow { display: none; }
}

.aik-hier {
  max-width: 34rem;
  display: flex; flex-direction: column;
}
.aik-hier__step {
  display: grid; grid-template-columns: 1.3rem 1fr;
  gap: 1rem; padding: .55rem 0;
}
.aik-hier__step .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--aik-gold); margin-top: .55rem;
}
.aik-hier__step span { font-size: .92rem; color: var(--aik-text-2); }
.aik-hier__step b { color: var(--aik-text); }


/* ================================================================
   20. クロージング
   ================================================================ */
.aik-closing {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 166, 104, .14), transparent 60%),
    linear-gradient(rgba(20, 16, 11, .78), rgba(20, 16, 11, .72)),
    url('https://www.turning-point.today/wp-content/uploads/2026/08/ai-kitchen_5.webp') center / cover no-repeat,
    var(--aik-bg-2);
  text-align: center;
}

.aik-closing p { color: var(--aik-text-2); max-width: 36rem; font-size: 1rem; }
.aik-closing__quote {
  font-family: var(--aik-font-serif);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.85;
  color: var(--aik-text);
  max-width: 38rem;
  margin: 1.6rem auto 2.2rem;
}
.aik-closing__quote strong { color: var(--aik-gold-bright); }
.aik-title-badge {
  display: inline-block;
  font-family: var(--aik-font-serif);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--aik-gold-bright);
  border-top: 1px solid var(--aik-border);
  border-bottom: 1px solid var(--aik-border);
  padding: 1.1rem 0;
  margin: 1.6rem 0;
}
.aik-title-badge small {
  display: block;
  font-family: var(--aik-font-sans);
  font-size: .7rem;
  letter-spacing: .24em;
  color: var(--aik-text-3);
  margin-top: .4rem;
}


/* ================================================================
   21. エビデンス（開示型アコーディオン）
   ================================================================ */
.aik-evidence-head { max-width: 38rem; }
.aik-evidence-head p { color: var(--aik-text-2); font-size: .94rem; }

#aik-root details.aik-ev {
  border-top: 1px solid var(--aik-border);
  padding: 1.1rem 0;
}
#aik-root details.aik-ev:last-of-type { border-bottom: 1px solid var(--aik-border); }
#aik-root details.aik-ev summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--aik-font-serif);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--aik-text);
}
#aik-root details.aik-ev summary::-webkit-details-marker { display: none; }
#aik-root details.aik-ev summary .aik-plus {
  font-family: var(--aik-font-sans);
  font-size: 1.3rem;
  color: var(--aik-gold-bright);
  flex: none;
  transition: transform .2s ease;
}
#aik-root details.aik-ev[open] summary .aik-plus { transform: rotate(45deg); }
.aik-ev__body {
  padding-top: 1rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.aik-ev__item {
  font-size: .88rem;
  color: var(--aik-text-2);
  padding-left: 1rem;
  border-left: 2px solid var(--aik-border);
}
.aik-ev__item .aik-src {
  display: block;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--aik-text-3);
  margin-bottom: .25rem;
}
.aik-ev__item a { color: var(--aik-gold-bright); text-decoration: underline; text-decoration-color: var(--aik-border); }


/* ================================================================
   22. ゲシュタルト用の区切りドット
   ================================================================ */
.aik-divider-dot {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.4rem 0;
}
.aik-divider-dot span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--aik-border);
}


/* ================================================================
   23. レスポンシブ微調整
   ================================================================ */
@media (max-width: 640px) {
  .aik-section { padding-block: clamp(2.6rem, 10vw, 4.2rem); }
}

#aik-root .u-sp-only { display: inline; }
@media (min-width: 768px) {
  #aik-root .u-sp-only { display: none; }
}