/*
|---------------------------------------------------------------
| qinc2026-top-services.css - 3つのサービス紹介
|---------------------------------------------------------------
*/

/* ==========================================================================
   Section
   ========================================================================== */
.top-services {
  padding: 100px clamp(16px, 2.5vw, 48px);
}

/* ==========================================================================
   Item (共通)
   ========================================================================== */
.top-services__item {
  position: relative;
  border: 1px solid var(--color-blue-grey);
  overflow: hidden;
}

.top-services__item + .top-services__item {
  margin-top: -1px;
}

/* --------------------------------------------------------------------------
   Decoration - Number / Label / Corner
   -------------------------------------------------------------------------- */
.top-services__item-num {
  position: absolute;
  top: 10px;
  left: 11px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-blue-grey);
}

.top-services__item-label {
  position: absolute;
  top: 50px;
  left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-blue-grey);
  writing-mode: vertical-lr;
}

/* L-corner */
.top-services__item::before {
  content: '';
  position: absolute;
  top: 37px;
  left: 38px;
  width: 0;
  height: calc(100% - 37px);
  border-left: 1px dashed var(--color-blue-grey);
}

.top-services__item::after {
  content: '';
  position: absolute;
  top: 37px;
  left: 0;
  width: 38px;
  border-top: 1px solid var(--color-blue-grey);
}

/* Reverse: decoration on right */
.top-services__item--reverse .top-services__item-num {
  left: auto;
  right: 11px;
}

.top-services__item--reverse .top-services__item-label {
  left: auto;
  right: 6px;
  writing-mode: vertical-lr;
}

.top-services__item--reverse::before {
  left: auto;
  right: 38px;
  border-left: none;
  border-right: 1px dashed var(--color-blue-grey);
}

.top-services__item--reverse::after {
  left: auto;
  right: 0;
}

/* Container padding override (clear decorations at ~38px) */
.top-services__item .container {
  padding: 0 clamp(24px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   Item Body (flex layout)
   -------------------------------------------------------------------------- */
.top-services__item-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 4vw, 80px);
  padding: 150px 0;
}

.top-services__item--reverse .top-services__item-body {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   Item Content (text side)
   -------------------------------------------------------------------------- */
.top-services__item-content {
  flex: 1 1 0;
  min-width: 0;
}

/* Heading */
.top-services__item-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.top-services__item-name {
  margin: 0;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: var(--color-blue01);
}

.top-services__item-name-en {
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-blue01);
}

/* Tagline */
.top-services__item-tagline {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #0367a5;
}

/* Description */
.top-services__item-desc {
  margin: 0 0 32px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-blue01);
  max-width: 577px;
}

.top-services__item-desc p {
  margin: 0 0 8px;
}

.top-services__item-desc p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.top-services__item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 263px;
  max-width: 100%;
  height: 50px;
  background-color: var(--color-blue01);
  color: var(--color-white);
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease;
}

.top-services__item-btn:hover {
  opacity: 0.8;
  color: var(--color-white);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Item Visual (shared)
   -------------------------------------------------------------------------- */
.top-services__item-visual {
  flex: 0 1 576px;
  min-width: 0;
}

/* ==========================================================================
   01: カチノテ - Features List
   ========================================================================== */
.top-services__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.top-services__feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.top-services__feature-icon-wrap {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  background-color: var(--color-bg-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.top-services__feature-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.top-services__feature-text {
  padding-top: 6px;
}

.top-services__feature-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.33;
  color: var(--color-blue01);
}

.top-services__feature-sub {
  margin: 0;
  font-weight: 350;
  font-size: 14px;
  line-height: 1.43;
  color: var(--color-blue01);
}

/* ==========================================================================
   01: カチノテ - DMAIC Card
   ========================================================================== */
.top-services__dmaic-card {
  background-color: var(--color-white);
  border-radius: 24px;
  box-shadow: 0 0 20px rgba(2, 5, 60, 0.1);
  padding: 41px;
}

.top-services__dmaic-title {
  margin: 0 0 32px;
  font-family: var(--font-family-en), var(--font-family-ja);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1.6px;
  color: var(--color-blue01);
  text-align: center;
}

.top-services__dmaic-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.top-services__dmaic-step {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 80px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid;
  border-left-width: 4px;
  background-color: var(--color-white);
}

.top-services__dmaic-step--blue {
  border-color: #0367a5;
}

.top-services__dmaic-step--gold {
  border-color: var(--color-gold);
}

.top-services__dmaic-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-white);
}

.top-services__dmaic-step--blue .top-services__dmaic-badge {
  background-color: #0367a5;
}

.top-services__dmaic-step--gold .top-services__dmaic-badge {
  background-color: var(--color-gold);
}

.top-services__dmaic-step-name {
  display: block;
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-blue01);
}

.top-services__dmaic-step-desc {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  color: var(--color-blue01);
}

.top-services__dmaic-arrow {
  display: flex;
  justify-content: center;
}

.top-services__dmaic-footer {
  display: flex;
  gap: 16px;
}

.top-services__dmaic-footer-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  text-align: center;
}

.top-services__dmaic-footer-name {
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-blue01);
}

.top-services__dmaic-footer-desc {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-blue01);
}

/* ==========================================================================
   02: ECコネクター - Spec Cards
   ========================================================================== */
.top-services__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
  max-width: 577px;
}

.top-services__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 23px;
  background-color: var(--color-white);
  border: 1px solid var(--color-blue01);
  border-left-width: 4px;
  border-radius: 4px;
}

.top-services__spec-value {
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.33;
  color: var(--color-blue01);
}

.top-services__spec-label {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  color: var(--color-blue01);
}

/* ==========================================================================
   02: ECコネクター - Connector Card
   ========================================================================== */
.top-services__connector-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: #003176;
  border-radius: 24px;
  box-shadow: 0 0 20px rgba(2, 5, 60, 0.1);
  overflow: hidden;
}

.top-services__connector-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
}

.top-services__connector-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.top-services__connector-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 29%;
  aspect-ratio: 1;
  background-color: #010658;
  border-radius: 50%;
}

.top-services__connector-ec {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--color-white);
}

.top-services__connector-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--color-white);
  margin-top: 4px;
}

.top-services__connector-node {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  background-color: var(--color-white);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: var(--font-family-en), var(--font-family-ja);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: var(--color-blue01);
  white-space: nowrap;
}

.top-services__connector-node br {
  display: none;
}

.top-services__connector-node--top {
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
}

.top-services__connector-node--bottom {
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
}

.top-services__connector-node--left {
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
}

.top-services__connector-node--right {
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
}

/* ==========================================================================
   03: ミギカタアガリ - Badges
   ========================================================================== */
.top-services__badges {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  width: 100%;
}

.top-services__badge {
  flex: 1;
}

.top-services__badge-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 1/1;
  background-color: var(--color-bg-light);
  border-radius: 50%;
}

.top-services__badge-icon {
  max-width: 62px;
  max-height: 50px;
  object-fit: contain;
}

.top-services__badge-label {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-blue01);
  text-align: center;
}

/* ==========================================================================
   03: ミギカタアガリ - Commitment Card
   ========================================================================== */
.top-services__commit-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: #003176;
  border-radius: 24px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.top-services__commit-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.top-services__commit-body {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-white);
}

.top-services__commit-title {
  margin: 0 0 24px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 2.4px;
}

.top-services__commit-sub {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1200px) {
  .top-services__item-visual {
    flex-basis: 400px;
  }

  .top-services__item-name {
    font-size: 36px;
  }

  .top-services__item-name-en {
    font-size: 20px;
  }

  /* Hide decorations (keep ::after for border overlay) */
  .top-services__item-num,
  .top-services__item-label,
  .top-services__item::before {
    display: none;
  }

  /* Border overlay via ::after so frame stays on top of content */
  .top-services__item {
    border-color: transparent;
  }

  .top-services__item::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border: 1px solid var(--color-blue-grey);
    z-index: 2;
    pointer-events: none;
  }

  .top-services__item--reverse::after {
    left: 0;
  }

  /* Connector: reposition nodes on ring for 400px square card
     Ring 70% → edge at 15% from each side */
  .top-services__connector-node {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    height: auto;
    font-size: 11px;
    padding: 4px 10px;
    width: 88px;
  }

  .top-services__connector-node br {
    display: inline;
  }

  .top-services__connector-node--top {
    top: 15%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--bottom {
    bottom: auto;
    top: 85%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--left {
    left: 15%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--right {
    right: auto;
    left: 85%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 1024px) {
  .top-services {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .top-services__item-body {
    flex-direction: column;
    align-items: center;
    padding: 80px 0 60px;
    gap: 40px;
  }

  .top-services__item--reverse .top-services__item-body {
    flex-direction: column;
  }

  /* Flatten content wrapper for reorder */
  .top-services__item-content {
    display: contents;
  }

  /* Order: heading → tagline → visual → desc → features/specs/badges → btn */
  .top-services__item-heading {
    order: 1;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
  }

  .top-services__item-tagline {
    order: 2;
    text-align: center;
    width: 100%;
    font-size: 18px;
    margin-top: -16px;
    margin-bottom: 0;
  }

  .top-services__item-visual {
    order: 3;
    flex-basis: auto;
    width: 100%;
    max-width: 576px;
  }

  .top-services__item-desc {
    order: 4;
    text-align: center;
    margin-bottom: 0;
  }

  .top-services__features,
  .top-services__specs {
    order: 5;
    margin-bottom: 0;
  }

  .top-services__badges {
    order: 5;
    justify-content: center;
    margin-bottom: 0;
    max-width: 640px;
  }

  .top-services__badge-circle {
    margin: auto;
  }

  .top-services__item-btn {
    order: 6;
  }

  .top-services__specs {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }

  .top-services__spec {
    min-width: 0;
  }

  .top-services__connector-card,
  .top-services__commit-card {
    aspect-ratio: 4 / 3;
  }

  /* Connector: precise layout for 4:3 card
     Ring 56% of width → in 4:3 card (height=75%W):
       ring top  = (75% - 56%) / 2 = 9.5%W → 12.67% of height
       ring left = (100% - 56%) / 2 = 22% of width
     Center 22% of width → radius 11%W, leaves clearance to ring edge (28%W - 11%W = 17%W)
     At 320px (card ~240×180): ring=134px, center=53px, top-node@23px, left-node@53px ✓ */
  .top-services__connector-ring {
    width: 56%;
  }

  .top-services__connector-center {
    width: 22%;
  }

  .top-services__connector-node {
    white-space: nowrap;
    font-size: 11px;
    padding: 0 14px;
    height: 32px;
    line-height: 32px;
    width: 136px;
  }

  .top-services__connector-node br {
    display: none;
  }

  /* Position node centers exactly on ring circumference */
  .top-services__connector-node--top {
    top: 12.67%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--bottom {
    bottom: auto;
    top: 87.33%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--left {
    left: 22%;
    transform: translate(-50%, -50%);
  }

  .top-services__connector-node--right {
    right: auto;
    left: 78%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 768px) {
  .top-services {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .top-services__item-body {
    padding: 48px 0 40px;
    gap: 32px;
  }

  .top-services__item-heading {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .top-services__item-name {
    font-size: 28px;
  }

  .top-services__item-name-en {
    font-size: 16px;
  }

  .top-services__item-tagline {
    font-size: 16px;
  }

  .top-services__item-desc {
    font-size: 14px;
  }

  .top-services__item-btn {
    width: 100%;
    max-width: 300px;
  }

  /* Features */
  .top-services__feature-icon-wrap {
    width: 64px;
    height: 64px;
  }

  .top-services__feature-icon {
    width: 32px;
    height: 32px;
  }

  .top-services__feature-title {
    font-size: 16px;
  }

  /* Specs: tighter for 4-col in narrow viewports */
  .top-services__specs {
    gap: 8px;
  }

  .top-services__spec {
    padding: 10px 6px;
  }

  .top-services__spec-value {
    font-size: clamp(14px, 3vw, 18px);
    overflow-wrap: break-word;
  }

  .top-services__spec-label {
    font-size: clamp(10px, 2vw, 12px);
  }

  /* DMAIC */
  .top-services__dmaic-card {
    padding: 24px 20px 28px;
  }

  .top-services__dmaic-step {
    height: auto;
    padding: 12px;
  }

  /* Connector: further shrink text for small viewports */
  .top-services__connector-ec {
    font-size: clamp(14px, 4vw, 20px);
  }

  .top-services__connector-name {
    font-size: clamp(10px, 3vw, 14px);
  }

  .top-services__connector-node {
    font-size: 10px;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    width: 128px;
  }

  /* Badges */
  .top-services__badges {
    align-items: center;
    gap: 16px;
    max-width: 520px;
  }

  .top-services__badge-icon {
    max-width: 44px;
    max-height: 36px;
  }

  .top-services__badge-label {
    font-size: 11px;
  }

  .top-services__badge-circle {
    width: 120px;
    height: 120px;
  }

  /* Commit */
  .top-services__commit-title {
    font-size: 32px;
  }

  .top-services__commit-sub {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  .top-services__connector-node {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    height: auto;
    min-height: 20px;
    padding: 3px clamp(4px, 1.5vw, 8px);
    font-size: clamp(8px, 2.5vw, 10px);
    width: 80px;
  }

  .top-services__connector-node br {
    display: inline;
  }
}

@media screen and (max-width: 480px) {
  /* Specs: back to 2x2 */
  .top-services__specs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .top-services__spec {
    padding: 10px 12px;
    min-width: 0;
  }

  .top-services__spec-value {
    font-size: 16px;
    overflow-wrap: break-word;
  }

  .top-services__spec-label {
    font-size: 11px;
  }

  /* Badges: horizontal wrap at small sizes */
  .top-services__badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .top-services__badge {
    flex: 0 0 102px;
  }

  .top-services__badge-circle {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 102px;
    height: auto;
    aspect-ratio: 1;
    padding: 8px;
    gap: 4px;
  }

  .top-services__badge-icon {
    width: 35%;
    max-width: none;
    max-height: 28%;
  }

  .top-services__badge-label {
    font-size: 10px;
    line-height: 1.4;
  }
}

@media screen and (max-width: 375px) {
  .top-services__connector-node {
    width: 72px;
  }
}