.feature-block {
  margin-bottom: 3em;
  padding: 2em 1em;
  border-radius: 18px;
  background: #f4f4f4;
  transition: box-shadow 0.2s;
}
.feature-head {
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 1em;
}
.feature-num {
  font-size: 2em;
  font-weight: bold;
  color: #4176bb;
}
.feature-title {
  font-size: 1.3em;
  font-weight: bold;
}
.feature-images {
  display: flex;
  gap: 1.2em;
  margin: 1.2em 0;
}
.feature-images img {
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 24px #0002;
  opacity: 0;
  transition: none;
  background: #fff;
}
.fullscreen-img-anim {
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 12px 48px #0005;
  background: #fff;
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 90vw;
  max-width: 90vw;
  max-height: 90vh;
  transform: translate(-50%, -50%) scale(1.2);
  transition: none;
}
.feature-desc {
  font-size: 1em;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .feature-images {
    flex-direction: column;
    align-items: center;
  }
  .feature-images img,
  .fullscreen-img-anim {
    width: 100% !important;
    height: auto !important;
  }
}
.proj-toku-ti {
  padding-bottom: 3rem;
}

.proj-feature {
  max-width: 90%;
margin-right:auto;
margin-left:auto;
}
.feature-block {
  margin-bottom: 4rem;
}
.feature-head {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 3em;
}
.feature-num {
  font-size: 5rem;
  color: #0eb0e0;
  font-weight: 900;
  font-family: "Arial Black", Impact, "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  min-width: 68px;
  text-align: left;
  line-height: 1;
  transform: scaleY(1.8);
}
.feature-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #0eb0e0;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.feature-images {
  display: flex;
  gap: 18px;
  margin-bottom: 1.2rem;
}
.feature-images img {
  width: 49%;
  border-radius: 8px;
  box-shadow: 0 4px 18px #0002;
  background: #fff;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.feature-desc {
  color: #222;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 0.5em;
}
@media (max-width: 800px) {
  .feature-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .feature-num {
    font-size: 2rem;
    min-width: 0;
  }
  .feature-title {
    font-size: 1.1rem;
  }
  .feature-images {
    flex-direction: column;
    gap: 8px;
  }
  .feature-images img {
    width: 100%;
    aspect-ratio: 4/3;
  }
}

/* 用途セクション */
.proj-usage {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 2vw 40px 2vw;
}
.usage-title {
  color: #0eb0e0;
  font-size: 2.3rem;
  font-weight: bold;
  margin: 2em 0 0.8em 0;
  letter-spacing: 0.04em;
  text-align: left;
}
.usage-desc {
  font-size: 1.18rem;
  color: #222;
  line-height: 1.7;
  margin-bottom: 2.2em;
}

.feature-images {
  position: relative;
}
.fullscreen-img-anim {
  position: absolute;
  z-index: 99;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 12px 48px #0005;
  background: #fff;
  transition: none;
  left: 0;
  top: 0;
}


/* SP用 */

@media (max-width:980px){
  .proj-feature--sp .proj-feature-title h2 {margin-top: 0;}
}

.proj-feature--sp .proj-feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proj-feature--sp .proj-feature-item h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.proj-feature--sp .proj-feature-item p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.proj-feature-cta {
  margin-top: 24px;
  text-align: center;
}

/* SP版の特徴セクション全体 */
.proj-feature--sp {
  padding: 32px 16px;       /* 画面端にちょっと余白 */
}

/* 画像の枠（横幅いっぱいに広げる） */
.proj-feature--sp .proj-feature-img {
  width: 100%;              /* 親（画面幅）いっぱい */
  max-width: 600px;         /* タブレット以上で広がりすぎない用（お好み） */
  margin: 0 auto 12px;      /* 中央寄せ＋下に余白 */
  border-radius: 10px;      /* 角丸（お好み） */
  overflow: hidden;
}

/* 実際の画像 */
.proj-feature--sp .proj-feature-img img {
  width: 100%;              /* 枠に対してぴったり */
  height: auto;             /* 縦横比を保ったまま */
  display: block;           /* 変なスキマ防止 */
}