/* ============================================================
   Pixelstyle — グローバルCSS
   #ps-front 配下にスコープし SWELL とのCSSを完全分離します
   ============================================================ */

/* ── ローカルフォント ── */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── CSS変数 ── */
#ps-front,
.ps-footer {
  --ps-bg:            #ffffff;
  --ps-bg-surface:    #f8fafc;
  --ps-bg-card:       #ffffff;
  --ps-primary:       #0891b2;
  --ps-primary-dim:   rgba(8, 145, 178, 0.08);
  --ps-primary-glow:  rgba(8, 145, 178, 0.25);
  --ps-secondary:     #7c3aed;
  --ps-secondary-dim: rgba(124, 58, 237, 0.08);
  --ps-accent:        #d97706;
  --ps-text:          #0f172a;
  --ps-text-muted:    #64748b;
  --ps-border:        rgba(15, 23, 42, 0.1);
  --ps-shadow:        0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ps-shadow-lg:     0 8px 30px rgba(0,0,0,0.08);
  --ps-radius:        12px;
  --ps-radius-lg:     20px;
  --ps-font-sans:     'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --ps-font-display:  'Space Grotesk', 'Hiragino Sans', system-ui, sans-serif;

  font-family: var(--ps-font-sans);
  color: var(--ps-text);
  background: var(--ps-bg);
  line-height: 1.7;
}

/* ── リセット（スコープ内のみ） ── */
/* ※ padding: 0 は除外（.ps-container 等クラスセレクターより特異度が高くなるため） */
#ps-front *,
#ps-front *::before,
#ps-front *::after,
.ps-footer *,
.ps-footer *::before,
.ps-footer *::after {
  box-sizing: border-box;
}

/* テキスト系要素だけ margin / padding をリセット */
#ps-front h1, #ps-front h2, #ps-front h3, #ps-front h4, #ps-front h5, #ps-front h6,
#ps-front p, #ps-front ul, #ps-front ol, #ps-front li, #ps-front figure,
.ps-footer h1, .ps-footer h2, .ps-footer h3,
.ps-footer p, .ps-footer ul, .ps-footer ol, .ps-footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ps-front a,
.ps-footer a { color: inherit; text-decoration: none; }

#ps-front img { max-width: 100%; height: auto; display: block; }

/* ── コンテナ ── */
/* SWELL の CSS に負けないよう !important を付与 */
#ps-front .ps-container,
.ps-footer .ps-container {
  width: 100% !important;
  max-width: 1100px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
  float: none !important;
}

/* ── セクション共通 ── */
/* 特異度を #ps-front 付きで統一し SWELL からの影響を遮断 */
#ps-front .ps-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

#ps-front .ps-section > .ps-container {
  position: relative;
  z-index: 1;
}

#ps-front .ps-section-header { margin-bottom: 56px; }

#ps-front .ps-section-label {
  display: inline-block;
  font-family: var(--ps-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ps-primary);
  border: 1px solid var(--ps-border);
  background: var(--ps-primary-dim);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

#ps-front .ps-section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

#ps-front .ps-section-sub {
  color: var(--ps-text-muted);
  font-size: 1rem;
  max-width: 540px;
}

/* ── グラデーションテキスト ── */
#ps-front .ps-gradient-text,
.ps-footer .ps-gradient-text {
  background: linear-gradient(135deg, var(--ps-primary), var(--ps-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── ボタン ── */
#ps-front .ps-btn,
.ps-footer .ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  font-family: var(--ps-font-sans);
  text-decoration: none;
}

#ps-front .ps-btn-primary,
.ps-footer .ps-btn-primary {
  background: linear-gradient(135deg, var(--ps-primary), var(--ps-secondary));
  color: #fff;
  box-shadow: 0 0 24px var(--ps-primary-glow);
}
#ps-front .ps-btn-primary:hover,
.ps-footer .ps-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px var(--ps-primary-glow);
  color: #fff;
}

#ps-front .ps-btn-ghost,
.ps-footer .ps-btn-ghost {
  background: transparent;
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
}
#ps-front .ps-btn-ghost:hover,
.ps-footer .ps-btn-ghost:hover {
  border-color: var(--ps-primary);
  color: var(--ps-primary);
  background: var(--ps-primary-dim);
}

/* ── カラーバリアント共通 ── */
#ps-front .ps-color-cyan   { --c: var(--ps-primary);   --c-dim: var(--ps-primary-dim); }
#ps-front .ps-color-purple { --c: var(--ps-secondary); --c-dim: var(--ps-secondary-dim); }
#ps-front .ps-color-amber  { --c: var(--ps-accent);    --c-dim: rgba(217,119,6,0.08); }
#ps-front .ps-color-green  { --c: #16a34a;             --c-dim: rgba(22,163,74,0.08); }
#ps-front .ps-color-red    { --c: #ef4444;             --c-dim: rgba(239,68,68,0.08); }
.ps-color-gray   { --c: var(--ps-text-muted); --c-dim: rgba(100,116,139,0.08); }