.detail-page {
  background: var(--color-white);
}

.detail-hero {
  padding: 56px 0 72px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FF 45%, #DAE8FF 100%);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: var(--color-primary);
  font-size: 0.92rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.detail-hero-content {
  max-width: 860px;
}

.detail-badge,
.tech-tag,
.result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(218, 232, 255, 0.75);
  color: var(--color-primary);
  border: 1px solid rgba(3, 57, 166, 0.16);
  font-size: 0.9rem;
  font-weight: 700;
}

.detail-title,
.section-heading,
.section-heading h2 {
  color: var(--color-primary);
}

.detail-title {
  margin-top: 18px;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
}

.detail-subtitle {
  max-width: 72ch;
  margin-top: 22px;
  color: var(--color-text-secondary);
  font-size: 1.04rem;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(3, 57, 166, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-primary-dark);
  font-weight: 500;
}

.visual-impact-section,
.detail-visual-impact,
.detail-section,
.detail-cta {
  padding: 80px 0;
}

.detail-visual-impact,
.detail-section.bg-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 55%, #DAE8FF 100%);
}

.visual-wrapper,
.detail-content,
.cta-content {
  display: grid;
  gap: 28px;
}

.main-visual,
.comparison-card,
.overview-card,
.challenge-item,
.tech-feature,
.tech-category,
.screenshot-item,
.signal-item,
.solution-card,
.impact-item,
.value-card,
.feature-card,
.metric-card,
.exp-card,
.cost-card,
.scale-item,
.skill-category,
.process-card,
.feature-box,
.screenshot-box,
.kpi-card {
  background: #FFFFFF;
  border: 1px solid rgba(3, 57, 166, 0.14);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(2, 40, 116, 0.08);
}

.main-visual {
  position: relative;
  overflow: hidden;
}

.main-image,
.screenshot-item img {
  width: 100%;
  height: auto;
  display: block;
}

.visual-overlay {
  position: absolute;
  inset: auto 20px 20px 20px;
}

.trust-signals,
.before-after,
.overview-grid,
.screenshots-gallery,
.challenges-grid,
.tech-features,
.tech-stack,
.solution-cards,
.impact-grid,
.value-cards,
.feature-cards,
.metrics-grid,
.experience-cards,
.cost-cards,
.scale-features,
.skills-categories,
.skill-items,
.screenshots-grid,
.feature-showcase,
.kpi-cards {
  display: grid;
  gap: 20px;
}

.trust-signals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signal-item,
.comparison-card,
.overview-card,
.challenge-item,
.tech-feature,
.tech-category,
.solution-card,
.impact-item,
.value-card,
.feature-card,
.metric-card,
.exp-card,
.cost-card,
.scale-item,
.skill-category,
.process-card,
.feature-box,
.screenshot-box,
.kpi-card {
  padding: 24px;
}

.signal-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.signal-item i,
.section-heading i,
.challenge-item i,
.impact-header i,
.value-icon,
.feature-icon-large,
.feature-number,
.process-number {
  color: var(--color-gold);
}

.before-after,
.overview-grid,
.tech-features,
.tech-stack,
.solution-cards,
.impact-grid,
.value-cards,
.feature-cards,
.metrics-grid,
.experience-cards,
.cost-cards,
.skills-categories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparison-card.before {
  border-top: 4px solid rgba(191, 144, 4, 0.9);
}

.comparison-card.after {
  border-top: 4px solid rgba(3, 57, 166, 0.9);
}

.comparison-card h4,
.overview-card h3,
.challenge-item h4,
.tech-feature h3,
.tech-category h4,
.solution-card h3,
.impact-item h3,
.value-card h3,
.feature-card h3,
.exp-card h4,
.scale-item h4,
.skill-category h3,
.process-card h3,
.kpi-title {
  color: var(--color-primary-dark);
  line-height: 1.4;
}

.comparison-card ul,
.detail-list,
.feature-list,
.tech-challenges {
  list-style: none;
}

.comparison-card li,
.detail-list li,
.feature-list li,
.tech-challenges li {
  margin-top: 10px;
  color: var(--color-text-secondary);
}

.lead-text,
.tech-feature p,
.tech-category p,
.solution-card p,
.impact-item p,
.value-card p,
.feature-card p,
.exp-card p,
.scale-item p,
.skill-item p,
.kpi-description,
.metric-label {
  color: var(--color-text-secondary);
}

.screenshots-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.screenshot-item {
  overflow: hidden;
}

.screenshot-caption {
  padding: 18px 20px 22px;
}

.screenshot-caption h5 {
  color: var(--color-primary-dark);
}

.screenshot-caption p {
  margin-top: 10px;
  color: var(--color-text-secondary);
}

.challenge-item {
  display: grid;
  gap: 10px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.detail-cta {
  background: var(--color-white);
}

.detail-cta .cta-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.detail-cta h2 {
  color: var(--color-primary-dark);
}

.detail-cta p {
  color: var(--color-text-secondary);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.value-icon,
.feature-icon-large,
.feature-number,
.process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(218, 232, 255, 0.75);
  border: 1px solid rgba(3, 57, 166, 0.16);
  font-weight: 800;
}

.impact-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scale-features,
.screenshots-grid {
  grid-template-columns: 1fr;
}

.kpi-section,
.impact-category {
  display: grid;
  gap: 18px;
}

.kpi-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-value,
.kpi-value {
  display: grid;
  gap: 8px;
}

.metric-from,
.metric-to,
.kpi-number {
  color: var(--color-primary-dark);
  font-size: 1.15rem;
  font-weight: 800;
}

/* ----------------------------------------------------------------
   Section spacing adjustments
   ---------------------------------------------------------------- */

/* セクション見出し（h2）直下の余白 */
.detail-content .section-heading {
  margin-bottom: 28px;
}

/* bg-light セクション内の見出し下余白を縮小 */
.detail-section.bg-light .detail-content .section-heading {
  margin-bottom: 24px;
}

/* overview-card / tech-feature 内の h3 直下の余白 */
.overview-card h3,
.tech-feature h3 {
  margin-bottom: 14px;
}

/* background-content 内の lead-text 段落間余白 */
.background-content .lead-text {
  margin-bottom: 20px;
}

/* background-content 内の最後の lead-text（次セクションとの間） */
.background-content .lead-text:last-of-type {
  margin-bottom: 36px;
}

/* tech-feature ブロック内の段落下余白 */
.tech-feature p {
  margin-bottom: 0;
}