/**
 * Three Sets — Human Architecture — three-sets.css
 *
 * 設計思想:
 *   - #ts-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSS カスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 深宇宙ブラック × エレクトリックブルー × エメラルド × アンバー
 *   - フォント: Cinzel (欧文Display) + Noto Serif JP (日本語) + Noto Sans JP (UI)
 *
 * @package cocoon-child-master
 */

/* ================================================================
   1. COCOON 干渉リセット
   ================================================================ */
.three-sets .article,
.three-sets .entry-content,
.three-sets .main,
.three-sets .content,
.three-sets .wrap,
.three-sets #main,
.three-sets #body-in,
.three-sets #container,
.three-sets #container-in,
.three-sets #contents,
.three-sets #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;
}

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

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

/* ================================================================
   2. CSS カスタムプロパティ（全色・全値）
   ================================================================ */
#ts-root {
  /* ─ カラーパレット ─ */
  --ts-bg:         #07080D;
  --ts-bg-2:       #0D0F18;
  --ts-bg-card:    rgba(255, 255, 255, 0.04);
  --ts-bg-card-h:  rgba(255, 255, 255, 0.07);

  /* 3セット アクセントカラー */
  --ts-mindset:      #60A5FA;
  --ts-mindset-dim:  rgba(96, 165, 250, 0.15);
  --ts-mindset-glow: rgba(96, 165, 250, 0.30);

  --ts-skillset:      #4ADE80;
  --ts-skillset-dim:  rgba(74, 222, 128, 0.15);
  --ts-skillset-glow: rgba(74, 222, 128, 0.30);

  --ts-toolset:      #FB923C;
  --ts-toolset-dim:  rgba(251, 146, 60, 0.15);
  --ts-toolset-glow: rgba(251, 146, 60, 0.30);

  --ts-danger:      rgba(239, 68, 68, 0.15);
  --ts-danger-text: #F87171;
  --ts-success:     rgba(74, 222, 128, 0.15);

  /* ─ テキスト ─ */
  --ts-text:    #F0F2F8;
  --ts-text-2:  #8892A4;
  --ts-text-3:  #4B5568;

  /* ─ ボーダー ─ */
  --ts-border:   rgba(255, 255, 255, 0.08);
  --ts-border-s: rgba(255, 255, 255, 0.14);

  /* ─ タイポグラフィ ─ */
  --ts-font-sans:    'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
  --ts-font-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --ts-font-display: 'Cinzel', 'Times New Roman', serif;
  --ts-font-en:      'Cinzel', 'SF Pro Display', system-ui, sans-serif;

  /* ─ スペーシング ─ */
  --ts-section-py:       clamp(4rem, 8vw, 8rem);
  --ts-container-max:    760px;
  --ts-container-wide:   1100px;
  --ts-radius:           16px;
  --ts-radius-sm:        10px;
  --ts-radius-lg:        24px;

  /* ─ トランジション ─ */
  --ts-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ts-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

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

#ts-root {
  background-color: var(--ts-bg);
  color: var(--ts-text);
  font-family: var(--ts-font-sans);
  font-weight: 400;
  line-height: 1.85;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: auto-phrase;
}

/* ================================================================
   4. ブロッククォート・テーブル 白抜き完全解消
   ================================================================ */
#ts-root blockquote {
  background: var(--ts-bg-card) !important;
  border-left: 3px solid var(--ts-mindset) !important;
  border-right: none !important;
  color: var(--ts-text) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--ts-radius-sm) !important;
}
#ts-root blockquote::before,
#ts-root blockquote::after { display: none !important; }

.ts-table-wrap {
  overflow-x: auto;
  margin-block: 1rem;
  border-radius: var(--ts-radius-sm);
  border: 1px solid var(--ts-border);
  background: var(--ts-bg-card) !important;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: var(--ts-bg-card) !important;
  color: var(--ts-text) !important;
}
.ts-table thead tr {
  background: rgba(255, 255, 255, 0.06) !important;
}
.ts-table thead th {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ts-text) !important;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ts-border-s) !important;
  border-color: var(--ts-border-s) !important;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ts-table tbody tr {
  background: transparent !important;
}
.ts-table tbody td {
  background: transparent !important;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--ts-border) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-2) !important;
  vertical-align: top;
  line-height: 1.65;
  font-size: 0.8125rem;
}
.ts-table tbody tr:last-child td { border-bottom: none !important; }
.ts-table tbody tr:hover td {
  background: rgba(96, 165, 250, 0.06) !important;
  color: var(--ts-text) !important;
}

/* Cocoon テーマ側の table/th/td 色干渉を #ts-root スコープで完全上書き */
#ts-root table:not([class]),
#ts-root .ts-table,
#ts-root .ts-table th,
#ts-root .ts-table td {
  background-color: unset;
  color: unset;
}
#ts-root .ts-table-wrap *,
#ts-root .ts-table-wrap table,
#ts-root .ts-table-wrap th,
#ts-root .ts-table-wrap td {
  background-color: transparent !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-2) !important;
}
#ts-root .ts-table-wrap thead th {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ts-text) !important;
  border-bottom-color: var(--ts-border-s) !important;
}
#ts-root .ts-table-wrap tbody tr:hover td {
  background-color: rgba(96, 165, 250, 0.06) !important;
}

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

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

.ts-section {
  padding-block: var(--ts-section-py);
  position: relative;
  z-index: 1;
}

.ts-section--alt {
  background: linear-gradient(180deg, transparent, var(--ts-bg-2) 10%, var(--ts-bg-2) 90%, transparent);
}

.ts-divider {
  width: 100%;
  height: 1px;
  background: var(--ts-border);
  position: relative;
  z-index: 1;
}

/* ================================================================
   6. スクロールリビール
   ================================================================ */
.ts-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s var(--ts-ease),
    transform 0.7s var(--ts-ease);
}
.ts-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ts-reveal[data-delay="1"] { transition-delay: 0.10s; }
.ts-reveal[data-delay="2"] { transition-delay: 0.20s; }
.ts-reveal[data-delay="3"] { transition-delay: 0.30s; }
.ts-reveal[data-delay="4"] { transition-delay: 0.40s; }

/* ================================================================
   7. セクション共通ヘッダー
   ================================================================ */
.ts-section-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ts-section-eyebrow {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ts-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.125rem;
}
.ts-section-eyebrow::before,
.ts-section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.ts-section-title {
  font-family: var(--ts-font-serif);
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ts-text);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.ts-section-desc {
  color: var(--ts-text-2);
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.85;
  max-width: 540px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* ================================================================
   8. BACKGROUND MESH (fixed atmospheric layer)
   ================================================================ */
.ts-bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(96, 165, 250, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(74, 222, 128, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(251, 146, 60, 0.04) 0%, transparent 70%);
}

/* ================================================================
   9. HERO / COVER
   ================================================================ */
.ts-cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(7rem, 15vw, 10rem) clamp(5rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.ts-cover__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Eyebrow badge */
.ts-cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border: 1px solid var(--ts-border);
  border-radius: 100px;
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-text-2);
  margin-bottom: 2.5rem;
}

.ts-cover__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-mindset);
  animation: ts-pulse-dot 2.4s ease-in-out infinite;
}

@keyframes ts-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(.65); }
}

/* Main title */
.ts-cover__title {
  font-family: var(--ts-font-en);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ts-text);
  margin-bottom: 0.75rem;
}
.ts-cover__title-dash {
  color: var(--ts-text-3);
}

/* Sub */
.ts-cover__sub {
  font-family: var(--ts-font-serif);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--ts-text-2);
  margin-bottom: 2rem;
}

/* Crystal stack */
.ts-crystal-stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2rem;
}

.ts-crystal {
  border-radius: var(--ts-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px;
  height: 96px;
  cursor: default;
  transition: transform 0.45s var(--ts-ease), box-shadow 0.45s;
  backdrop-filter: blur(20px);
}
.ts-crystal:hover { transform: translateY(-10px) scale(1.04); }

.ts-crystal--mindset {
  background: linear-gradient(145deg, rgba(96,165,250,.28), rgba(96,165,250,.08));
  border: 1px solid rgba(96,165,250,.35);
  box-shadow: 0 8px 32px rgba(96,165,250,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.ts-crystal--skillset {
  background: linear-gradient(145deg, rgba(74,222,128,.28), rgba(74,222,128,.08));
  border: 1px solid rgba(74,222,128,.35);
  box-shadow: 0 8px 32px rgba(74,222,128,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.ts-crystal--toolset {
  background: linear-gradient(145deg, rgba(251,146,60,.28), rgba(251,146,60,.08));
  border: 1px solid rgba(251,146,60,.35);
  box-shadow: 0 8px 32px rgba(251,146,60,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.ts-crystal__icon { font-size: 1.625rem; }
.ts-crystal__label {
  font-family: var(--ts-font-en);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ts-crystal--mindset  .ts-crystal__label { color: var(--ts-mindset); }
.ts-crystal--skillset .ts-crystal__label { color: var(--ts-skillset); }
.ts-crystal--toolset  .ts-crystal__label { color: var(--ts-toolset); }

/* Lead text */
.ts-cover__lead {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--ts-text-2);
  font-size: clamp(0.875rem, 1.6vw, 0.9375rem);
  line-height: 1.9;
}
.ts-cover__lead strong { color: var(--ts-text); }

/* Pills */
.ts-hero-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.ts-hero-pill {
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--ts-font-en);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ts-hero-pill--mindset  { background: var(--ts-mindset-dim);  color: var(--ts-mindset);  border: 1px solid rgba(96,165,250,.22); }
.ts-hero-pill--skillset { background: var(--ts-skillset-dim); color: var(--ts-skillset); border: 1px solid rgba(74,222,128,.22); }
.ts-hero-pill--toolset  { background: var(--ts-toolset-dim);  color: var(--ts-toolset);  border: 1px solid rgba(251,146,60,.22); }
.ts-hero-arrow { color: var(--ts-text-3); font-size: 1.125rem; }

/* CTA in cover */
.ts-cover__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

/* Scroll indicator */
.ts-cover__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ts-text-3);
  font-family: var(--ts-font-en);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ts-cover__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--ts-text-3), transparent);
  animation: ts-scroll-line 2s ease-in-out infinite;
}
@keyframes ts-scroll-line {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ================================================================
   10. CTA ボタン共通
   ================================================================ */
.ts-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2.5rem;
  border-radius: 100px;
  font-family: var(--ts-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: transform var(--ts-transition), box-shadow var(--ts-transition), filter var(--ts-transition);
  position: relative;
  overflow: hidden;
}
.ts-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
}
.ts-cta-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.ts-cta-btn--large {
  padding: 1.125rem 3rem;
  font-size: 1.0625rem;
}

.ts-cta-subtext {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ts-text-3);
  text-transform: uppercase;
}

/* ================================================================
   11. THREE LAYERS セクション
   ================================================================ */
.ts-layers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ts-layer-card {
  border-radius: var(--ts-radius);
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--ts-border);
  background: var(--ts-bg-card);
  transition: background var(--ts-transition), border-color var(--ts-transition), transform 0.45s var(--ts-ease);
  position: relative;
  overflow: hidden;
}
.ts-layer-card:hover { transform: translateY(-4px); }
.ts-layer-card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.ts-layer-card:hover .ts-layer-card__glow { opacity: 1; }

.ts-layer-card--mindset {
  border-color: rgba(96,165,250,.22);
}
.ts-layer-card--mindset .ts-layer-card__glow {
  background: radial-gradient(ellipse at 30% 20%, rgba(96,165,250,.10) 0%, transparent 70%);
}
.ts-layer-card--mindset:hover { border-color: rgba(96,165,250,.45); }

.ts-layer-card--skillset {
  border-color: rgba(74,222,128,.22);
}
.ts-layer-card--skillset .ts-layer-card__glow {
  background: radial-gradient(ellipse at 30% 20%, rgba(74,222,128,.10) 0%, transparent 70%);
}
.ts-layer-card--skillset:hover { border-color: rgba(74,222,128,.45); }

.ts-layer-card--toolset {
  border-color: rgba(251,146,60,.22);
}
.ts-layer-card--toolset .ts-layer-card__glow {
  background: radial-gradient(ellipse at 30% 20%, rgba(251,146,60,.10) 0%, transparent 70%);
}
.ts-layer-card--toolset:hover { border-color: rgba(251,146,60,.45); }

.ts-layer-num {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 1.25rem;
  opacity: 0.5;
}
.ts-layer-card--mindset  .ts-layer-num { color: var(--ts-mindset); }
.ts-layer-card--skillset .ts-layer-num { color: var(--ts-skillset); }
.ts-layer-card--toolset  .ts-layer-num { color: var(--ts-toolset); }

.ts-layer-title-en {
  font-family: var(--ts-font-en);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  line-height: 1.15;
}
.ts-layer-card--mindset  .ts-layer-title-en { color: var(--ts-mindset); }
.ts-layer-card--skillset .ts-layer-title-en { color: var(--ts-skillset); }
.ts-layer-card--toolset  .ts-layer-title-en { color: var(--ts-toolset); }

.ts-layer-title-jp {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ts-text-2);
  margin-bottom: 0.25rem;
}
.ts-layer-subtitle {
  font-size: 0.75rem;
  color: var(--ts-text-3);
  margin-bottom: 1.25rem;
}
.ts-layer-divider {
  width: 40px;
  height: 1px;
  margin-bottom: 1.25rem;
}
.ts-layer-card--mindset  .ts-layer-divider { background: var(--ts-mindset); }
.ts-layer-card--skillset .ts-layer-divider { background: var(--ts-skillset); }
.ts-layer-card--toolset  .ts-layer-divider { background: var(--ts-toolset); }

.ts-layer-body {
  font-size: 0.875rem;
  color: var(--ts-text-2);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.ts-layer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-layer-tag {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.ts-layer-card--mindset  .ts-layer-tag { background: var(--ts-mindset-dim);  color: var(--ts-mindset); }
.ts-layer-card--skillset .ts-layer-tag { background: var(--ts-skillset-dim); color: var(--ts-skillset); }
.ts-layer-card--toolset  .ts-layer-tag { background: var(--ts-toolset-dim);  color: var(--ts-toolset); }

/* Contribution bars */
.ts-contrib {
  background: var(--ts-bg-card);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 2rem 1.75rem;
}

.ts-contrib__label {
  font-size: 0.75rem;
  color: var(--ts-text-3);
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ts-contrib__bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ts-contrib__bar-wrap {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  gap: 12px;
}

.ts-contrib__name {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ts-contrib__name--mindset  { color: var(--ts-mindset); }
.ts-contrib__name--skillset { color: var(--ts-skillset); }
.ts-contrib__name--toolset  { color: var(--ts-toolset); }

.ts-contrib__bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 100px;
  overflow: hidden;
}

.ts-contrib__fill {
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-contrib__fill--mindset  { background: var(--ts-mindset); }
.ts-contrib__fill--skillset { background: var(--ts-skillset); }
.ts-contrib__fill--toolset  { background: var(--ts-toolset); }

.ts-contrib__pct {
  font-family: var(--ts-font-en);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ts-text-2);
  text-align: right;
}

/* ================================================================
   12. ANALOGY セクション（スマホ図）
   ================================================================ */
.ts-phone-diagram {
  max-width: 680px;
  margin: 0 auto;
  border-radius: var(--ts-radius);
  border: 1px solid var(--ts-border);
  overflow: hidden;
  background: var(--ts-bg-card);
}

.ts-phone-layer {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--ts-border);
  transition: background var(--ts-transition);
}
.ts-phone-layer:last-child { border-bottom: none; }
.ts-phone-layer:hover { background: rgba(255,255,255,.025); }

.ts-phone-layer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  min-height: 96px;
}
.ts-phone-layer--mindset  .ts-phone-layer__bar { background: rgba(96,165,250,.14); color: var(--ts-mindset); }
.ts-phone-layer--skillset .ts-phone-layer__bar { background: rgba(74,222,128,.14); color: var(--ts-skillset); }
.ts-phone-layer--toolset  .ts-phone-layer__bar { background: rgba(251,146,60,.14); color: var(--ts-toolset); }

.ts-phone-layer__content {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.ts-phone-layer__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-phone-layer__name {
  font-family: var(--ts-font-en);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ts-phone-layer--mindset  .ts-phone-layer__name { color: var(--ts-mindset); }
.ts-phone-layer--skillset .ts-phone-layer__name { color: var(--ts-skillset); }
.ts-phone-layer--toolset  .ts-phone-layer__name { color: var(--ts-toolset); }

.ts-phone-layer__arrow { font-size: 0.75rem; color: var(--ts-text-3); }
.ts-phone-layer__eq {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.ts-phone-layer--mindset  .ts-phone-layer__eq { background: var(--ts-mindset-dim);  color: var(--ts-mindset); }
.ts-phone-layer--skillset .ts-phone-layer__eq { background: var(--ts-skillset-dim); color: var(--ts-skillset); }
.ts-phone-layer--toolset  .ts-phone-layer__eq { background: var(--ts-toolset-dim);  color: var(--ts-toolset); }

.ts-phone-layer__desc {
  font-size: 0.8125rem;
  color: var(--ts-text-2);
  line-height: 1.75;
}

/* ================================================================
   13. GROWTH SEQUENCE セクション
   ================================================================ */
.ts-phases {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.ts-phases::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 50px;
  bottom: 50px;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--ts-mindset),
    var(--ts-skillset) 50%,
    var(--ts-toolset));
  opacity: 0.3;
}

.ts-phase {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-radius: var(--ts-radius-sm);
  transition: background var(--ts-transition);
}
.ts-phase:hover { background: rgba(255,255,255,.02); }

.ts-phase__num-wrap {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.ts-phase__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}
.ts-phase--01 .ts-phase__num {
  background: var(--ts-mindset-dim);
  color: var(--ts-mindset);
  border: 1.5px solid var(--ts-mindset);
}
.ts-phase--02 .ts-phase__num {
  background: var(--ts-skillset-dim);
  color: var(--ts-skillset);
  border: 1.5px solid var(--ts-skillset);
}
.ts-phase--03 .ts-phase__num {
  background: var(--ts-toolset-dim);
  color: var(--ts-toolset);
  border: 1.5px solid var(--ts-toolset);
}

.ts-phase__title {
  font-family: var(--ts-font-en);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.ts-phase--01 .ts-phase__title { color: var(--ts-mindset); }
.ts-phase--02 .ts-phase__title { color: var(--ts-skillset); }
.ts-phase--03 .ts-phase__title { color: var(--ts-toolset); }

.ts-phase__desc {
  font-size: 0.875rem;
  color: var(--ts-text-2);
  line-height: 1.8;
}

/* ================================================================
   14. CONTRAST セクション
   ================================================================ */
.ts-contrast-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 840px;
  margin: 0 auto 3rem;
}

.ts-contrast-card {
  border-radius: var(--ts-radius);
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--ts-border);
}
.ts-contrast-card--wrong {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.22);
}
.ts-contrast-card--correct {
  background: rgba(74, 222, 128, 0.04);
  border-color: rgba(74, 222, 128, 0.22);
}

.ts-contrast-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 100px;
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.ts-contrast-card--wrong   .ts-contrast-badge { background: rgba(239,68,68,.15);  color: var(--ts-danger-text); }
.ts-contrast-card--correct .ts-contrast-badge { background: var(--ts-skillset-dim); color: var(--ts-skillset); }

.ts-contrast-title {
  font-family: var(--ts-font-en);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.ts-contrast-card--wrong   .ts-contrast-title { color: var(--ts-danger-text); }
.ts-contrast-card--correct .ts-contrast-title { color: var(--ts-skillset); }

.ts-contrast-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ts-contrast-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--ts-text-2);
  line-height: 1.7;
}
.ts-contrast-step__num {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  font-weight: 700;
  padding-top: 2px;
}
.ts-contrast-card--wrong   .ts-contrast-step__num { color: var(--ts-danger-text); }
.ts-contrast-card--correct .ts-contrast-step__num { color: var(--ts-skillset); }

.ts-contrast-result {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--ts-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}
.ts-contrast-card--wrong   .ts-contrast-result { background: rgba(239,68,68,.09);  color: var(--ts-danger-text); }
.ts-contrast-card--correct .ts-contrast-result { background: var(--ts-skillset-dim); color: var(--ts-skillset); }

/* Quote / blockquote overide */
.ts-blockquote {

  position: relative;

  width: min(100%, 640px);

  margin-top: clamp(2rem, 5vw, 3rem) !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;

  transform: none !important;

  padding:
    clamp(2rem, 5vw, 3rem)
    clamp(1.5rem, 4vw, 2.5rem);

  border-radius: var(--ts-radius);

  border: 1px solid var(--ts-border);

  background: var(--ts-bg-card);

  text-align: center;

  box-sizing: border-box;
}

.ts-blockquote::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(96,165,250,.07), transparent 70%);
  pointer-events: none;
}
#ts-root .ts-blockquote {
  font-size: clamp(0.9375rem, 2.2vw, 1.3125rem) !important;
  font-family: var(--ts-font-serif) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  color: var(--ts-text) !important;
  border-left: none !important;
  padding: 3rem 2rem !important;
}
.ts-blockquote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  color: var(--ts-text-3);
  font-style: normal;
  text-transform: uppercase;
}

/* ================================================================
   15. AI ERA セクション
   ================================================================ */
.ts-ai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.ts-ai-card {
  padding: 2rem 1.75rem;
  border-radius: var(--ts-radius);
  border: 1px solid var(--ts-border);
  background: var(--ts-bg-card);
  transition: border-color var(--ts-transition), transform 0.45s var(--ts-ease);
}
.ts-ai-card:hover { transform: translateY(-4px); }
.ts-ai-card--mindset:hover  { border-color: rgba(96,165,250,.35); }
.ts-ai-card--skillset:hover { border-color: rgba(74,222,128,.35); }
.ts-ai-card--toolset:hover  { border-color: rgba(251,146,60,.35); }
.ts-ai-card--human:hover    { border-color: rgba(255,255,255,.2); }

.ts-ai-card__tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--ts-font-en);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.ts-ai-card--mindset  .ts-ai-card__tag { background: var(--ts-mindset-dim);  color: var(--ts-mindset); }
.ts-ai-card--skillset .ts-ai-card__tag { background: var(--ts-skillset-dim); color: var(--ts-skillset); }
.ts-ai-card--toolset  .ts-ai-card__tag { background: var(--ts-toolset-dim);  color: var(--ts-toolset); }
.ts-ai-card--human    .ts-ai-card__tag { background: rgba(255,255,255,.07);   color: var(--ts-text-2); }

.ts-ai-card h3 {
  font-family: var(--ts-font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.45;
  color: var(--ts-text);
}
.ts-ai-card p {
  font-size: 0.8125rem;
  color: var(--ts-text-2);
  line-height: 1.85;
}

.ts-ai-conclusion {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
  border-radius: var(--ts-radius);
  background: linear-gradient(135deg, rgba(96,165,250,.09), rgba(74,222,128,.07), rgba(251,146,60,.07));
  border: 1px solid var(--ts-border-s);
  text-align: center;
}
.ts-ai-conclusion h3 {
  font-family: var(--ts-font-serif);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--ts-text);
  line-height: 1.35;
}
.ts-ai-conclusion p {
  font-size: 0.9375rem;
  color: var(--ts-text-2);
  line-height: 1.9;
  max-width: 520px;
  margin-inline: auto;
}

/* ================================================================
   16. EVIDENCE / ACCORDION セクション
   ================================================================ */
.ts-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ts-accordion__item {
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-sm);
  overflow: hidden;
  transition: border-color var(--ts-transition);
}
.ts-accordion__item.is-open {
  border-color: rgba(96,165,250,.3);
}

.ts-accordion__head {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--ts-bg-card);
  transition: background var(--ts-transition);
  user-select: none;
  gap: 1rem;
}
.ts-accordion__head:hover { background: var(--ts-bg-card-h); }

.ts-accordion__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ts-text);
  line-height: 1.45;
}

.ts-accordion__chevron {
  font-size: 0.75rem;
  color: var(--ts-text-3);
  transition: transform 0.3s var(--ts-ease);
  flex-shrink: 0;
}
.ts-accordion__item.is-open .ts-accordion__chevron {
  transform: rotate(180deg);
  color: var(--ts-mindset);
}

.ts-accordion__body {
  padding: 1.25rem;
  border-top: 1px solid var(--ts-border);
  font-size: 0.8125rem;
  color: var(--ts-text-2) !important;
  line-height: 1.85;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--ts-bg-2) !important;
}
.ts-accordion__body a {
  color: var(--ts-mindset);
  text-decoration: none;
  transition: opacity 0.2s;
}
.ts-accordion__body a:hover { opacity: 0.8; text-decoration: underline; }

.ts-evidence-sources {
  font-size: 0.75rem;
  color: var(--ts-text-3);
}

/* ================================================================
   17. CTA セクション（ページ末尾）
   ================================================================ */
.ts-cta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ts-cta-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(96,165,250,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ts-cta-eyebrow {
  font-family: var(--ts-font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-text-3);
  margin-bottom: 1.5rem;
}

.ts-cta-headline {
  font-family: var(--ts-font-serif);
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ts-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.ts-cta-headline em {
  font-style: normal;
  color: var(--ts-mindset);
}

.ts-cta-body {
  max-width: 480px;
  margin: 0 auto 3rem;
  font-size: 0.9375rem;
  color: var(--ts-text-2);
  line-height: 1.85;
}

.ts-cta-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.ts-cta-flow__step {
  padding: 9px 20px;
  border-radius: 100px;
  font-family: var(--ts-font-en);
  font-size: 0.8125rem;
  font-weight: 700;
}
.ts-cta-flow__step--1 { background: var(--ts-mindset-dim);  color: var(--ts-mindset); }
.ts-cta-flow__step--2 { background: var(--ts-skillset-dim); color: var(--ts-skillset); }
.ts-cta-flow__step--3 { background: var(--ts-toolset-dim);  color: var(--ts-toolset); }
.ts-cta-flow__arrow   { color: var(--ts-text-3); font-size: 1.125rem; }

.ts-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}


/* =========================================================
   SECTION INNER ALIGN FIX
   ========================================================= */

/* セクション内部を完全中央基準化 */
.ts-section > .ts-container,
.ts-section > .ts-container--wide {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-inline: auto;
}

/* 子要素の横方向センタリング強制 */
.ts-section > .ts-container > *,
.ts-section > .ts-container--wide > * {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   NEXT STEP センター補正
   ========================================================= */

.ts-next-step,
.ts-next-step-box,
.ts-next-cta,
.ts-final-message,
.ts-next-section {
  width: min(100%, 760px);
  max-width: 760px;

  margin-left: auto !important;
  margin-right: auto !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* 内部テキストの行間最適化 */
.ts-next-step p,
.ts-next-step-box p,
.ts-next-cta p,
.ts-final-message p,
.ts-next-section p {
  line-height: 2;
  text-wrap: pretty;
}

/* SP最適化 */
@media (max-width: 767px) {

  .ts-next-step,
  .ts-next-step-box,
  .ts-next-cta,
  .ts-final-message,
  .ts-next-section {

    padding-inline: 1.25rem;
  }

}

/* =========================================================
   NEXT STEP ABSOLUTE CENTER FIX
   ========================================================= */

.ts-next-step,
.ts-next-section,
.ts-final-cta,
.ts-final-message,
.ts-cta-final {

  width: 100%;
  max-width: 760px;

  margin-left: auto !important;
  margin-right: auto !important;

  align-self: center !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* 見出し */
.ts-next-step h2,
.ts-next-section h2,
.ts-final-cta h2,
.ts-final-message h2 {
  text-align: center;
  margin-inline: auto;
}

/* 本文 */
.ts-next-step p,
.ts-next-section p,
.ts-final-cta p,
.ts-final-message p {
  text-align: center;
  margin-inline: auto;
}

/* Pills */
.ts-next-step .ts-hero-pills,
.ts-next-section .ts-hero-pills {
  justify-content: center;
  margin-inline: auto;
}

/* CTA */
.ts-next-step .ts-cover__cta,
.ts-next-section .ts-cover__cta {
  align-items: center;
  justify-content: center;
}


/* ================================================================
   18. RESPONSIVE
   ================================================================ */
@media (min-width: 640px) {
  .ts-contrast-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .ts-crystal { width: 100px; height: 100px; }
  .ts-phases::before { left: 23px; }
  .ts-phase {
    grid-template-columns: 56px 1fr;
    gap: 1.5rem;
  }
  .ts-phone-layer { grid-template-columns: 64px 1fr; }
  .ts-ai-grid { grid-template-columns: 1fr 1fr; }
  .ts-contrib__bar-wrap { grid-template-columns: 80px 1fr 48px; }
}

@media (min-width: 1024px) {
  .ts-layers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 440px) {
  .ts-crystal { width: 76px; height: 76px; }
  .ts-crystal__icon { font-size: 1.25rem; }
  .ts-hero-pills { gap: 6px; }
  .ts-hero-pill  { font-size: 0.6875rem; padding: 6px 12px; }
  .ts-hero-arrow { font-size: 0.875rem; }
  .ts-phone-layer { grid-template-columns: 44px 1fr; }
  .ts-phone-layer__bar { min-height: 72px; font-size: 1rem; }
  .ts-phone-layer__content { padding: 1rem 1.125rem; }
}

/* ================================================================
   19. セクション挿入画像（.ts-section-image）
   ================================================================ */

/*
 * 基本余白:
 *   上 — コンテンツ（テキスト・カード）との間を十分に空け、
 *        画像が「息継ぎのある区切り」として機能する間隔
 *   下 — セクション padding-bottom との合計がちょうど良い
 *        呼吸量になるよう、負のバランスで補正
 *        （セクション padding-bottom が clamp(4rem,8vw,8rem) のため
 *          画像下マージンは控えめにしてトータルで均等に見せる）
 */
.ts-section-image {

  margin:
    clamp(3rem, 6vw, 5rem)
    0
    clamp(1.25rem, 3vw, 2.25rem);

  border-radius: var(--ts-radius);

  overflow: hidden;

  border: 1px solid var(--ts-border);

  line-height: 0;

  box-shadow:
    0 -24px 48px -12px rgba(0, 0, 0, 0.45),
    0  16px 32px -16px rgba(0, 0, 0, 0.32);
}

.ts-section-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ts-ease);
}

.ts-section-image:hover img {
  transform: scale(1.025);
}

/*
 * Analogy セクション画像
 * — スマホ図（.ts-phone-diagram）の直後に来るため
 *   上余白をやや大きくとり、図解→画像の流れに間を持たせる
 */
#analogy .ts-section-image {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  margin-bottom: 0;
  box-shadow:
    0 -20px 40px -10px rgba(0, 0, 0, 0.4),
    0  20px 40px -10px rgba(0, 0, 0, 0.4);
}

/*
 * Contrast セクション画像
 * — コントラストカード群の後・blockquote の前に位置する
 *   画像→blockquote 間は blockquote 側の margin-top で調整済みのため
 *   画像下マージンは 0 とし blockquote に委ねる
 */
#contrast .ts-section-image,
.ts-section--alt .ts-section-image {
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: 0;
}

/*
 * AI Era セクション画像
 * — .ts-ai-conclusion ボックスの直後に来る
 *   conclusion の下に適度な「間」を置いてから画像へ続く設計
 */
#ai .ts-section-image {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  margin-bottom: 0;
}

/* セクション末尾に画像がある場合（コンテナ直下 last-child）
   セクション padding-bottom との二重余白を相殺して
   ページ全体のリズムを均等に保つ */
.ts-container > .ts-section-image:last-child,
.ts-container--wide > .ts-section-image:last-child {
  margin-bottom: calc(var(--ts-section-py) * -0.35);
}

/* ヒーロー内の画像（大きめ・上下マージン調整） */
.ts-cover__hero-image {
  width: 100%;
  max-width: 760px;
  margin: 2rem auto;
  border-radius: var(--ts-radius);
  overflow: hidden;
  border: 1px solid var(--ts-border-s);
  line-height: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ts-cover__hero-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}