/* ============================================
   Technology Section — 対応領域・支援形態
   既存 main.css のデザイントークン（--Blue / --Gray / --base、
   62.5% font-size baseline、768/1024px breakpoints）に準拠
   ============================================ */

.tech {
  background-color: #fff;
}

.tech .lead {
  margin-bottom: 5rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
}

/* ---- カテゴリ見出し（AIを溶け込ませる／AIで創る／土台技術／支援のかたち） ---- */
.tech .category {
  margin-top: 10rem;
}

.tech .category:first-of-type {
  margin-top: 0;
}

.tech .category-heading {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--base);
  line-height: 1.4;
}

.tech .category-heading .accent {
  color: var(--Blue);
}

.tech .category-desc {
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: var(--base);
  margin-bottom: 3.2rem;
  opacity: 0.85;
}

/* ---- 対応技術カード（3枚／3枚／4枚） ---- */
.tech .tech-cards {
  flex-wrap: wrap;
  gap: 2.4rem;
  justify-content: flex-start;
}

.tech .tech-cards .tech-item {
  width: calc((100% - 4.8rem) / 3);
  background-color: var(--Gray);
  padding: 3rem 2.4rem;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.tech .tech-cards.col4 .tech-item {
  width: calc((100% - 7.2rem) / 4);
}

.tech .tech-cards .tech-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(3, 133, 205, 0.12);
}

.tech .tech-cards .tech-item .card-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech .tech-cards .tech-item .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tech .tech-cards .tech-item h4 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  line-height: 1.5;
  color: var(--base);
  position: relative;
}

.tech .tech-cards .tech-item h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--Blue);
}

.tech .tech-cards .tech-item p {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--base);
  margin: 0 0 2rem;
  flex-grow: 1;
}

.tech .tech-cards .tech-item .stack {
  font-size: 1.3rem;
  line-height: 2rem;
  color: var(--base);
  opacity: 0.8;
  padding-top: 1.4rem;
  border-top: 1px dashed #d0d0d0;
}

.tech .tech-cards .tech-item .stack-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--Blue);
  margin-bottom: 0.6rem;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
  .tech .tech-cards .tech-item,
  .tech .tech-cards.col4 .tech-item {
    width: calc((100% - 2.4rem) / 2);
  }
}

@media screen and (max-width: 768px) {
  .tech .tech-cards {
    gap: 1.6rem;
  }
  .tech .tech-cards .tech-item,
  .tech .tech-cards.col4 .tech-item {
    width: 100%;
    padding: 2.4rem 2rem;
  }
  .tech .category {
    margin-top: 6rem;
  }
  .tech .category-heading {
    font-size: 2.2rem;
  }
}

/* ---- 支援形態（4枚） ---- */
.tech .support-modes {
  flex-wrap: wrap;
  gap: 2.4rem;
  justify-content: flex-start;
}

.tech .support-modes .mode-item {
  width: calc((100% - 7.2rem) / 4);
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: 3px solid var(--Blue);
  padding: 3rem 2.4rem;
  border-radius: 4px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tech .support-modes .mode-item:hover {
  border-color: var(--Blue);
  box-shadow: 0 4px 16px rgba(3, 133, 205, 0.10);
}

.tech .support-modes .mode-item h4 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  color: var(--base);
  line-height: 1.5;
  padding-bottom: 1rem;
  position: relative;
}

.tech .support-modes .mode-item h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--Blue);
}

.tech .support-modes .mode-item p {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--base);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .tech .support-modes .mode-item {
    width: calc((100% - 2.4rem) / 2);
  }
}

@media screen and (max-width: 768px) {
  .tech .support-modes {
    gap: 1.6rem;
  }
  .tech .support-modes .mode-item {
    width: 100%;
    padding: 2.4rem 2rem;
  }
}

/* ---- Service カードの画像表示調整（新画像対応） ---- */
.service .flex .item .img {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.service .flex .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service .flex .item .txt {
  padding-bottom: 2rem;
}