@charset "utf-8";
/*--------------------------------------------------------------------------------

  feature

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .feature-list
--------------------------------------------------------------------------------*/
.feature-list {
  --no-width: 1.75rem;
  --no-fs: var(--fs-m-rem);
  --no-bg: var(--color-base);
  --no-mgt: 0.15rem;
  text-align: left;
  list-style: none;
  font-size: var(--fs-3m);
  font-weight: 400;
  display: inline-flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.feature-list li {
  counter-increment: number;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
}
.feature-list li:before {
  content: counter(number);
  font-family: var(--ff-min);
  font-size: var(--no-fs);
  width: var(--no-width);
  line-height: 1;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--no-bg);
  color: #FFF;
  margin-top: var(--no-mgt);
}
@media (max-width: 640px) {
  .feature-list {
    margin-inline: auto;
  }
}

/*--------------------------------------------------------------------------------

  worry

--------------------------------------------------------------------------------*/
.worry {
  background-color: var(--bg-base);
  padding: var(--inner-space-s);
  padding-bottom: calc(var(--inner-space-s) + 1rem);
}
.worry_ttl {
  line-height: var(--lh-s);
  color: var(--color-blue);
  font-weight: 500;
  font-size: var(--fs-3m);
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .worry_ttl {
    text-align: center;
  }
}

/*--------------------------------------------------------------------------------
  .worry-list
--------------------------------------------------------------------------------*/
@media not (max-width: 640px) { .worry-list { --col: 4; } }
@media (max-width: 640px) { .worry-list { --col: 1; } }
.worry-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--col), max-content);
  gap: 0.25rem 2.5rem;
}
.worry-list li {
  line-height: var(--lh-s);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
}
.worry-list li:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  background: url("../../../image/icon/checkbox.svg?d=2026") no-repeat center center;
  background-size: cover;
}
.worry-list li:last-child {
  grid-template-columns: auto auto 1fr;
}
.worry-list li:last-child:after {
  content: "...など";
  margin-left: 1.5rem;
}