

.oem-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  margin-top: var(--header-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--gutter);
  overflow: hidden;
}
.oem-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hero-oem-1) 0%, var(--hero-oem-2) 40%, var(--text) 100%);
}
.oem-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(var(--overlay-light-rgb), 0.012) 2px, rgba(var(--overlay-light-rgb), 0.012) 4px);
}
.oem-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(var(--text-rgb), 0.6) 0%, rgba(var(--text-rgb), 0.0) 60%);
}
.oem-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.oem-hero__breadcrumb { grid-column: 1 / -1; margin-bottom: var(--space-lg); }
.oem-hero__label {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-inv);
  display: block;
  margin-bottom: 0.6em;
}
.oem-hero__title {
  font-family: var(--font-sans-ja);
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--text-inv);
  margin-bottom: var(--space-md);
}
.oem-hero__lead {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--text-inv);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-lg);
  max-width: 480px;
}
.oem-hero__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.oem-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(var(--overlay-dim-rgb), 0.3);
  border: 1px solid rgba(var(--overlay-dim-rgb), 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat-card {
  background: rgba(var(--text-rgb), 0.7);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  backdrop-filter: blur(4px);
}
.stat-card__num {
  font-family: var(--font-serif-en);
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--warm);
  line-height: 1;
  display: block;
  margin-bottom: 0.3em;
}
.stat-card__unit { font-family: var(--font-sans-en); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-inv); letter-spacing: var(--ls-wide); }
.stat-card__label { font-family: var(--font-serif-ja); font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--text-inv); line-height: var(--lh-heading); }
.what-we-do { padding: var(--section-py) var(--gutter); }
.what-we-do__inner { max-width: var(--max-width); margin: 0 auto; }
.what-we-do__intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-xl);
}
.what-we-do__body { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--text-mid); line-height: var(--lh-loose); display: flex; flex-direction: column; gap: var(--space-md); }

.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap-sm); }
.capability-card:nth-child(3) { grid-column: 1 / -1; }
.capability-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.capability-card:hover { border-color: var(--warm-pale); box-shadow: var(--shadow-md); }
.capability-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 48px; background: var(--warm); border-radius: 0 0 var(--radius-sm) 0; }
.capability-card__icon { font-family: var(--font-serif-en); font-size: var(--fs-h1); font-style: italic; color: var(--gold-brown); line-height: 1; display: block; margin-bottom: var(--space-sm); }
.capability-card__title { margin-bottom: var(--space-sm); }
.capability-card__text { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-mid); line-height: var(--lh-loose); }
.capability-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.cap-tag { font-family: var(--font-sans-en); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 0.2em 0.7em; border-radius: var(--radius-full); background: var(--warm-pale); color: var(--gold-brown); white-space: nowrap; }

.specs { padding: var(--section-py) var(--gutter); background: var(--bg-warm); }
.specs__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.specs__img { aspect-ratio: 4/3; background: var(--bg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans-en); font-size: var(--fs-xs); letter-spacing: var(--ls-widest); color: var(--text-light); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th { font-family: var(--font-serif-ja); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); text-align: left; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; vertical-align: top; width: 8em; white-space: nowrap; }
.specs-table td { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-mid); padding: var(--space-sm) 0; vertical-align: top; line-height: var(--lh-body); }
.specs-table td strong { font-weight: var(--fw-medium); color: var(--text); }

.flow { padding: var(--section-py) var(--gutter); }
.flow__inner { max-width: var(--max-width); margin: 0 auto; }

.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.flow-steps::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: rgba(var(--overlay-light-rgb), 0.25); z-index: 0; }
.flow-step { position: relative; z-index: 1; padding: 0 var(--space-sm) var(--space-lg); text-align: center; }
.flow-step__num { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-full); border: 1px solid rgba(var(--overlay-light-rgb), 0.4); background: rgba(var(--overlay-light-rgb), 0.08); font-family: var(--font-serif-en); font-size: var(--fs-h2); font-style: italic; color: var(--text-inv); margin: 0 auto var(--space-md); flex-shrink: 0; transition: background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.flow-step:hover .flow-step__num { background: rgba(var(--overlay-light-rgb), 0.18); border-color: var(--text-inv); }
.flow-step__body { flex: 1; }
.flow-step__title { font-family: var(--font-sans-ja); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-inv); margin-bottom: 0.4em; line-height: var(--lh-heading); }
.flow-step__text { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-inv); line-height: var(--lh-body); }
.flow-step__duration { display: inline-block; font-family: var(--font-sans-en); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-inv); background: rgba(var(--overlay-light-rgb), 0.1); border: 1px solid rgba(var(--overlay-light-rgb), 0.3); padding: 0.2em 0.7em; border-radius: var(--radius-full); margin-top: 0.5em; }

.faq { padding: var(--section-py) var(--gutter); }
.faq__inner { max-width: var(--max-width-narrow); margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item__q { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) 0; cursor: pointer; user-select: none; list-style: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-mark { font-family: var(--font-serif-en); font-size: var(--fs-body); font-style: italic; color: var(--gold-brown); flex-shrink: 0; width: 1.5em; line-height: 1; }
.faq-item__q-text { font-family: var(--font-serif-ja); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text); flex: 1; line-height: var(--lh-heading); }
.faq-item__toggle { font-family: var(--font-sans-en); font-size: var(--fs-body); color: var(--text-light); flex-shrink: 0; transition: transform var(--duration-base) var(--ease); line-height: 1; }
details[open] .faq-item__toggle { transform: rotate(45deg); }
.faq-item__a { padding: 0 0 var(--space-md) calc(1.5em + var(--space-sm)); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-mid); line-height: var(--lh-loose); }

.inquiry-cta { background: var(--bg-accent); padding: var(--section-py) var(--gutter); text-align: center; position: relative; overflow: hidden; }
.inquiry-cta::before { content: 'OEM'; position: absolute; font-family: var(--font-serif-en); font-size: clamp(8rem, 18vw, 18rem); font-style: italic; font-weight: var(--fw-regular); color: var(--accent); left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; pointer-events: none; user-select: none; }
.inquiry-cta__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.inquiry-cta__label { font-family: var(--font-sans-en); font-size: var(--fs-xs); font-weight: var(--fw-light); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-inv); display: block; margin-bottom: 0.5em; }
.inquiry-cta__title { margin-bottom: var(--space-sm); }
.inquiry-cta__text { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-inv); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.inquiry-cta__note { margin-top: var(--space-xs); font-family: var(--font-serif-ja); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-inv); line-height: var(--lh-body); }
.inquiry-cta__tel { margin-top: var(--space-sm); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.inquiry-cta__tel-num { font-family: var(--font-serif-en); font-size: var(--fs-h2); font-weight: var(--fw-regular); letter-spacing: 0.05em; color: var(--text-inv); }
.inquiry-cta__tel-label { font-family: var(--font-serif-ja); font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--text-inv); line-height: var(--lh-body); }
.accent-line--inv { background: rgba(var(--warm-rgb), 0.6); }
.accent-line--center { margin-left: auto; margin-right: auto; margin-bottom: var(--space-md); }

.oem-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .oem-hero__content { grid-template-columns: 1fr; gap: var(--space-lg); }
  .oem-hero { min-height: auto; padding: calc(var(--header-height-sp) + var(--space-lg)) var(--gutter) var(--space-xl); }
}

@media (max-width: 768px) { .what-we-do__intro { grid-template-columns: 1fr; gap: var(--space-lg); } }

@media (max-width: 768px) { .specs__inner { grid-template-columns: 1fr; gap: var(--space-lg); } }

@media (max-width: 768px) { .flow-steps { grid-template-columns: 1fr; } .flow-steps::before { display: none; } }

@media (max-width: 768px) { .flow-step { text-align: left; display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-bottom: 1px solid rgba(var(--overlay-dim-rgb), 0.3); } .flow-step:last-child { border-bottom: none; } }

@media (max-width: 768px) { .flow-step__num { margin: 0; width: 60px; height: 60px; } }

@media (max-width: 768px) { .capability-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) { .oem-hero__stats { grid-template-columns: 1fr; } .stat-card { padding: var(--space-md); } }
