.features {
  background: linear-gradient(127deg, #f3f9ff, #e3eef7);
}
.problem-grid {
  grid-template-columns: repeat(2, 1fr);
}
.problem-card {
  padding-left: 90px;
}
.c_web1 {
  background: #bfe2e5 url("../images/web1.png") no-repeat left 20px center / 50px;
}
.c_web2 {
  background: #bfe2e5 url("../images/web2.png") no-repeat left 20px center / 50px;
}
.c_web3 {
  background: #bfe2e5 url("../images/web3.png") no-repeat left 20px center / 50px;
}
.c_web4 {
  background: #bfe2e5 url("../images/web4.png") no-repeat left 20px center / 50px;
}
.c_web5 {
  background: #bfe2e5 url("../images/web5.png") no-repeat left 20px center / 50px;
}
.c_web6 {
  background: #bfe2e5 url("../images/web6.png") no-repeat left 20px center / 50px;
}
.feature-main {
  grid-column: 1 / -1;
}
.features2 .feature-grid {
  gap: 40px;
}
.feature-card > span {
  color: #00c3ff;
  opacity: 0.3;
}
.feature-card h3 span {
  display: block;
  font-size: 1rem;
  color: #7e7e7e;
}
.feature-card p span {
  background: linear-gradient(transparent 60%, #ff6 60%);
}
.c_web7,
.c_web8,
.c_web9,
.c_web10 {
  background-size: cover;
  background-position: center;
}
.c_web7 {
  background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%), url("../images/web7.png");
}
.c_web8 {
  background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%), url("../images/web8.png");
}
.c_web9 {
  background-image:
    linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%), url("../images/web9.jpg");
  background-position: left;
}
.c_web10 {
  background-image:
    linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%), url("../images/web10.png");
}
.web7_cmsarea {
  background: #ffffffcf;
  padding: 20px;
  border-radius: 5px;
}
.web7_cmsarea h4 {
  font-size: 1.5rem;
  color: #00698c;
  border-bottom: 1px solid #00698c;
}
.web7_cmsarea h4 span {
  font-size: 1.2rem;
  padding-left: 20px;
  color: #666;
}
.web7_cms {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.web7_cms_push {
  font-weight: 600;
  font-size: 1.2rem;
}
.web7_icon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.web7_icon div {
  width: 170px;
  text-align: center;
  border: 1px solid #8aa0b3;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  line-height: 1.2em;
  color: #00698c;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.web7_icon p {
  grid-column: 1 / -1;
  margin: 0;
  text-align: right;
  font-size: 0.9em;
}
.service-type-card h3 {
  font-size: 1.3em;
  border-bottom: 1px solid #00c3ff;
}

/* セクション全体の背景を白にする場合、カードは少しグレーに */
.service-type-card {
  background-color: #f8fafc; /* 超極薄のグレー */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 30px;
  /* 初期状態では影をつけない、またはごく薄く */
  box-shadow: none;
  transition: all 0.25s ease-in-out;
}

/* ホバー時の装飾 */
.service-type-card:hover {
  background-color: #ffffff; /* 白に反転 */
  border-color: #80d5ff; /* 枠線をアクセントカラーに */
  box-shadow:
    0 10px 15px -3px rgba(59, 130, 246, 0.1),
    0 4px 6px -2px rgba(59, 130, 246, 0.05); /* アクセントカラーを帯びた影 */
}

.loopbanner {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

/* 外枠：画面外にはみ出たロゴを隠す */
.loop-wrap {
  display: flex;
  overflow: hidden;
  width: 100%;
}

/* ロゴの塊：横並びにしてアニメーションを設定 */
.loop-slide {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: loop-animation 20s linear infinite;
}

/* 各ロゴのサイズや余白の調整 */
.loop-slide li {
  padding: 0 20px; /* ロゴ同士の間隔 */
}

.loop-slide img {
  height: 40px;    /* ロゴの高さを揃える */
  width: auto;     /* 横幅は自動調整 */
  max-width: initial;
}

/* マウスを乗せたら動きを止める設定 */
.loop-wrap:hover .loop-slide {
  animation-play-state: paused;
}

/* アニメーションの動き：左側へ100%分移動させる */
@keyframes loop-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


@media (max-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .feature-card, .usecase-card {
    text-align: left;
  }

.web7_cmsarea h4 {
  font-size: 1.3rem;
}
.web7_cmsarea h4 span {
  font-size: 1rem;
display: block;
  padding: 0;
}

.web7_cms {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  text-align: left;
}
.web7_icon {
  grid-template-columns: repeat(2, 1fr);
}
.web7_icon div {
  width: 81%;
}

.features2 .feature-grid {
  gap: 20px;
  grid-template-columns: 1fr;
}
.service-types-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

}