/* ===== HERO（既存） ===== */
.hero {
  background: var(--bg);
  color: var(--fg);
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(48px, 6vw, 96px);
  background-image:
    radial-gradient(80% 60% at 70% 20%, color-mix(in srgb, var(--acc) 16%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #000 8%), var(--bg));
}
.hero::after {
  content: ""; position: absolute; inset: -10% -20% auto -20%; height: 140%;
  background: conic-gradient(from 270deg,
    color-mix(in srgb, var(--acc) 12%, transparent),
    transparent 40% 80%,
    color-mix(in srgb, var(--focus) 10%, transparent));
  opacity: .15; filter: blur(40px); z-index: -1;
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.hero__copy { display: grid; align-content: start; gap: clamp(10px, 1.4vw, 16px); }
.hero__kicker { margin: 0; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero__title { margin: 0; font-weight: 800; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.15; }
.hero__accent { color: var(--acc); }
/* 可読性UP：leadはほぼfg寄り */
.hero__lead { margin: .25rem 0 0; color: color-mix(in srgb, var(--fg) 96%, var(--muted)); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.7; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(12px, 1.6vw, 20px); }
.hero__bullets { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0; margin: clamp(8px, 1.4vw, 14px) 0 0; list-style: none; color: var(--muted); font-size: .95rem; }
.hero__bullets li { position: relative; padding-left: 1.1em; }
.hero__bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--acc); }
.hero__visual { display: grid; place-items: center; }
.hero__visual img, .hero__visual svg { width: min(520px, 100%); height: auto; filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--acc) 25%, transparent)); }
@media (max-width: 900px){ .hero__inner { grid-template-columns: 1fr; } .hero__visual { order: -1; } }
@media (prefers-reduced-motion: reduce){ .hero::after { transition:none !important; animation:none !important; } }

/* ===== PC SERVICE（2番目セクション：BEM補完） ===== */
.pcsvc { background: var(--bg); color: var(--fg); padding-block: clamp(40px, 6vw, 88px); border-top: 1px solid var(--line);
  background-image: radial-gradient(60% 40% at 20% 0%, color-mix(in srgb, var(--acc) 7%, transparent) 0%, transparent 60%),
                    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 98%, #000 2%)); }
.pcsvc__inner { display: grid; gap: clamp(20px, 3vw, 32px); }
.pcsvc__head { display: grid; gap: .5rem; }
.pcsvc__title { margin: 0; font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; line-height: 1.2; }
/* 可読性UP：leadはfg寄り */
.pcsvc__lead { margin: .25rem 0 0; color: color-mix(in srgb, var(--fg) 96%, var(--muted)); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.7; }

/* features */
.pcsvc__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.pcsvc__card { border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 2vw, 20px);
  background: color-mix(in srgb, var(--bg) 96%, #fff 4%); box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 60%, transparent);
  transition: transform .15s ease, box-shadow .25s ease; }
.pcsvc__card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--acc) 18%, transparent); }
.pcsvc__card-title { margin: 0 0 .35rem; font-size: clamp(16px, 1.6vw, 18px); font-weight: 800; }
/* 本文のコントラスト強化 */
.pcsvc__card-text { margin: 0; color: color-mix(in srgb, var(--fg) 92%, var(--muted)); line-height: 1.7; }

/* flow */
.pcsvc__sub { margin: 0; font-size: clamp(16px, 1.8vw, 20px); font-weight: 800; }
.pcsvc__flow { display: grid; gap: .8rem; }
.pcsvc__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcsvc__step { border: 1px solid var(--line); border-radius: 14px; padding: clamp(12px, 1.8vw, 16px);
  background: color-mix(in srgb, var(--bg) 96%, #fff 4%); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  transition: transform .15s ease, box-shadow .25s ease; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 60%, transparent); }
.pcsvc__step:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--acc) 14%, transparent); }
.pcsvc__step-num { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 800;
  background: var(--acc); color: #F2F5FA; box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 25%, transparent); }
.pcsvc__step-title { margin: 0 0 .2rem; font-size: 1rem; font-weight: 800; }
.pcsvc__step-text  { margin: 0; color: color-mix(in srgb, var(--fg) 92%, var(--muted)); line-height: 1.6; }
.pcsvc__cta { display: flex; gap: 12px; margin-top: clamp(8px, 1.8vw, 14px); }

@media (max-width: 1024px){ .pcsvc__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcsvc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .pcsvc__features { grid-template-columns: 1fr; } .pcsvc__steps { grid-template-columns: 1fr; } .pcsvc__step { grid-template-columns: auto 1fr; } }

/* ===== SOFTWARE & GAMES ===== */
.soft__title, .posts__title, .about__title, .cta-band__title { margin: 0; font-weight: 800; line-height: 1.2; font-size: clamp(22px, 3.2vw, 34px); }
/* 可読性UP */
.soft__lead, .posts__lead, .about__lead, .cta-band__lead { margin: .25rem 0 0; color: color-mix(in srgb, var(--fg) 96%, var(--muted)); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.7; }
.soft__card-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.soft__card-text  { margin: 0; color: color-mix(in srgb, var(--fg) 92%, var(--muted)); line-height: 1.7; }
.badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #F2F5FA;
  background: color-mix(in srgb, var(--acc) 88%, #fff 12%); border: 1px solid color-mix(in srgb, var(--acc) 70%, transparent); }

/* ===== ARTICLES ===== */
.posts__list { padding: 0; list-style: none; }
.posts__item-title { margin: 0 0 .25rem; font-weight: 800; font-size: 1rem; }
.posts__item-text  { margin: 0; color: color-mix(in srgb, var(--fg) 92%, var(--muted)); line-height: 1.7; }

/* ===== ABOUT（ダーク） ===== */
#about { border-top: 1px solid var(--line); }
.about__visual img { width: min(420px, 100%); height: auto; filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--acc) 22%, transparent)); }

/* ===== CONTACT BAND ===== */
.cta-band { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #000 4%), var(--bg)); border-top: 1px solid var(--line); text-align: center; }

/* ===== 微ユーティリティ ===== */
.mt-2 { margin-top: 1rem; }

/* セクションの下地にごく弱い階調（hero/about以外） */
section:not(.hero):not(#about) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg) 100%, transparent), color-mix(in srgb, var(--bg) 98%, #000 2%));
}