/* =============================================
   Lim Modular Studio — services.css
   Servicesセクション
   ============================================= */

.services {
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 440px;
}

/* --- 左カラム: タイトルエリア --- */
.services-left {
  position: relative;
  overflow: visible;
  padding: 32px 3vw 32px 7.5dvw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- 右カラム: サービス内容 --- */
.services-right {
  padding: 78px 7.5dvw 64px 2rem;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* --- サービス2カラム --- */
.services-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

/* --- サービスブロック --- */
.service-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-block-label {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.1em;
  margin: 0;
}

.service-block-title {
  font-size: clamp(16px, calc(0.88vw + 12.67px), 20px);
  font-weight: 600;
  font-family: var(--font-sansEn);
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.service-block-title_l {
  font-size: clamp(22.00px, calc(2.64vw + -5.08px), 33.00px);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--accent);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.service-divider {
  width: 22rem;
  height: 1px;
  /* background: var(--accent); */
  background: linear-gradient(to right, var(--accent), transparent);
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-list li {
  font-size: clamp(15.80px, calc(0.15vw + 15.22px), 17.20px);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 12px;
  position: relative;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

/* --- 作る・支えるブロックの囲み補足テキスト --- */
.service-note {
  /* font-size: clamp(12.44px, calc(0.24vw + 11.54px), 14.00px); */
  font-size: clamp(13.00px, calc(0.15vw + 12.42px), 14.00px);
  font-family: var(--font-mono);
  color: var(--text-muted);
  line-height: 1.6;
  padding: 12px 14px;
  border-left: 2px solid var(--accent-tint);
  background: var(--accent-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- 波紋モチーフ（左上） --- */
.ripple {
  position: absolute;
  left: 33%;
  bottom: 55%;
  width: 80px;
  height: 80px;
  z-index: -1;
  pointer-events: none;
}
/* --- 2つ目の波紋（小さい・右下） --- */
.ripple-2 {
  left: auto;            /* 1つ目のleft指定を打ち消す */
  right: 15%;            /* 右寄りに配置 */
  bottom: 4%;            /* さらに下へ */
  transform: scale(0.7); /* 全体を65%に縮小 */
}

.ripple span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;   /* 中心基準にする */
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: rippleSpread 10s linear infinite;
}

/* 時間差で出す */
.ripple span:nth-child(2) { animation-delay: 2.5s; }
.ripple span:nth-child(3) { animation-delay: 4s; }
/* 2つ目は少しタイミングをずらして動きを変える */
.ripple-2 span:nth-child(1) { animation-delay: 1.5s; }
.ripple-2 span:nth-child(2) { animation-delay: 3s; }
.ripple-2 span:nth-child(3) { animation-delay: 5.5s; }

.ripple-3 {
  display: none;
}

@keyframes rippleSpread {
  0%   { transform: scale(0.1); opacity: 0.1; }
  40%  { transform: scale(3); opacity: 0.09; }
  85%  { opacity: 0; }
  100% { transform: scale(7); opacity: 0; }
}

/* 動きを減らす設定の人には停止 */
@media (prefers-reduced-motion: reduce) {
  .ripple span {
    /* animation: none; */
    animation: rippleSpread 6s ease-in-out infinite;
  }
}

@media (max-width: 1023px) {
  /* 1fr 2fr → 縦積み（1カラム） */
  .services {
    grid-template-columns: 1fr;
  }
  .services-right {
    padding: 24px 7.5dvw 48px;
  }
  .service-divider {
    width: 100%; /* 親幅に収める */
  }
  .ripple {
    bottom: calc(45% - 60px);
    transform: scale(0.7);
  }
  .ripple-2 {
    left: 70%;
    bottom: calc(25% - 90px);
    transform: scale(0.6);
  }
}

@media (max-width: 767px) {
  .services-left {
    padding: 32px 1.8rem 1rem; /* Aboutと統一 */
  }
  .services-right {
    padding: 2rem 1.8rem; /* Aboutと統一 */
  }
  /* サービス2カラム → 1カラムに */
  .services-cols {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* 波紋①②まとめて下げる */
  .ripple {
    bottom: calc(35% - 75px);
    transform: scale(0.75);
  }
  .ripple-2 {
    display: none;
    /* bottom: calc(1% - 90px);
    transform: scale(0.4); */
  }
/* 波紋③ — SP用「支える」の右上あたり */
  .ripple-3 {
    display: block;
    left: 65%;
    right: auto;
    top: 1%;
    bottom: auto;
    transform: scale(0.75);
    z-index: -1; /* テキストの背面へ */
  }
  .ripple-3 span:nth-child(1) { animation-delay: 0.8s; }
  .ripple-3 span:nth-child(2) { animation-delay: 2.8s; }
  .ripple-3 span:nth-child(3) { animation-delay: 4.8s; }
}