/* ========================================
   Service Page
   ======================================== */
.service-intro { padding: 80px 0; text-align: center; }
.service-intro__text { max-width: 700px; margin: 0 auto; font-family: var(--font-serif); font-size: 16px; line-height: 2.4; letter-spacing: 0.1em; }

.service-detail { padding: 100px 0; overflow: hidden; }
.service-detail:nth-child(even) { background: var(--color-bg-light); }
.service-detail__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.service-detail--reverse .service-detail__inner { direction: rtl; }
.service-detail--reverse .service-detail__inner > * { direction: ltr; }

.service-detail__number { font-family: var(--font-en); font-size: 100px; font-weight: 300; color: rgba(45,90,39,0.08); line-height: 1; margin-bottom: -20px; }
.service-detail__en { font-family: var(--font-en); font-size: 42px; font-weight: 300; color: var(--color-primary); letter-spacing: 0.05em; }
.service-detail__jp { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.15em; color: var(--color-text-light); margin-top: 8px; }
.service-detail__subtitle { font-family: var(--font-serif); font-size: 20px; font-weight: 400; letter-spacing: 0.1em; margin-top: 24px; line-height: 1.8; }
.service-detail__desc { font-size: 14px; line-height: 2.2; color: var(--color-text-light); margin-top: 20px; }
.service-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.service-detail__tag { font-size: 11px; letter-spacing: 0.1em; padding: 5px 16px; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 100px; }

.service-detail__image { border-radius: 12px; overflow: hidden; }
.service-detail__image img { width: 100%; height: 450px; object-fit: cover; transition: transform 0.8s var(--ease-out-expo); }
.service-detail__image:hover img { transform: scale(1.03); }

.flow-section { padding: 100px 0; background: var(--color-bg-light); }
.flow-list { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.flow-item { text-align: center; flex: 1; min-width: 160px; max-width: 180px; position: relative; }
.flow-item::after { content: ''; position: absolute; right: -14px; top: 40px; width: 8px; height: 8px; border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); transform: rotate(45deg); }
.flow-item:last-child::after { display: none; }
.flow-item__icon { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.flow-item__icon svg { width: 32px; height: 32px; }
.flow-item__num { font-family: var(--font-en); font-size: 12px; color: var(--color-primary); letter-spacing: 0.1em; }
.flow-item__title { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; margin-top: 4px; }

@media (max-width: 1024px) {
  .service-detail__inner { grid-template-columns: 1fr; gap: 40px; }
  .service-detail--reverse .service-detail__inner { direction: ltr; }
  .service-detail__image img { height: 350px; }
}
@media (max-width: 768px) {
  .flow-list { flex-direction: column; align-items: center; }
  .flow-item::after { display: none; }
  .flow-item { max-width: 100%; }
}