@charset "UTF-8";
/* object/project/_use-case.scss */
.p-use-case {
  padding: 1rem;
  justify-self: center;
  margin-bottom: 2rem;
}
.p-use-case__wrapper {
  width: 100%;
  max-width: 800px;
}
.p-use-case__list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 768px) {
  .p-use-case__list {
    max-width: 400px;
    margin-inline: auto;
    justify-content: flex-start;
  }
}
.p-use-case__item {
  /*  3カラム（PC）:
      gap: 1rem を想定（3列なので隙間は2つ → 2rem）
      1行に3枚並べるため、コンテナ幅から gap 分を引いて 3 等分する
  */
  flex: 0 0 calc((100% - 2rem) / 3); /* = flex-grow:0 / flex-shrink:0 / flex-basis:… */
  max-inline-size: calc((100% - 2rem) / 3); /* basis と同じ上限を持たせ、幅のブレを防ぐ */
  /* カード自体は親の計算幅に追従しつつ、最大幅はデザイン上 260px に制限 */
  width: 100%;
  max-width: 260px;
  /* 行が折り返したときの縦方向の余白（row-gap を使わない場合のフォールバック的役割） */
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .p-use-case__item {
    /* 1カラム（タブレット）: 全幅 */
    flex-basis: 100%;
    max-inline-size: 100%;
  }
}
@media (max-width: 575px) {
  .p-use-case__item {
    /* 1カラム（スマホ）: 全幅 */
    flex-basis: 100%;
    max-inline-size: 100%;
  }
}
.p-use-case__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  .p-use-case__content {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
  }
}
@media (max-width: 575px) {
  .p-use-case__content {
    gap: 1.2rem;
  }
}
.p-use-case__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .p-use-case__icon {
    width: 60px;
    height: 60px;
  }
}
.p-use-case__title {
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .p-use-case__title {
    text-align: left;
  }
}
.p-use-case__title-part {
  font-weight: 400;
}
.p-use-case__title-part--base {
  color: black;
  font-size: 1rem;
}
.p-use-case__title-part--accent {
  color: #ca7600;
  font-size: 1.4rem;
}

/*# sourceMappingURL=use-case.css.map */