/*キャッシュレス関連サービス*/

@charset "UTF-8";

.grid-box {
  --gap: 40px;
  --number: 3;
  --width: 278px;
  display: grid;
  grid-template-columns: repeat(var(--number), var(--width) 1fr);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width)), 1fr));
  grid-template-rows: repeat(3, auto);/*子要素3個*/
  gap: var(--gap);
  width: fit-content;
}
.grid-box > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 10px;
}
.grid-box {
  width: min(100%, calc(var(--width) * var(--number) + var(--gap) * calc(var(--number) - 1)));
  margin-inline: auto;
}
@media screen and (max-width:767px) {
  .grid-box .img {
    /* display: flex;
    gap:30px;
    flex-direction: column; */
    width: fit-content;
    margin-inline: auto;
  }
}

.flx-box {
  --gap: 20px;
  --number: 3;
  --child-width: calc((100% - var(--gap) * (var(--number) - 1)) / var(--number));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  & > div {
    width: var(--child-width);
  }
  &._auto {
    & > div {
      width: auto;
    }
  }
  &._gap-40 {
    column-gap: 40px;
  }
}
@media screen and (max-width:767px) {
  .flx-box {
    --number: 2;
    --gap:3vw;
  }
  .flx-box._1-1-sp > div {
    width: 100%;
    text-align: center;
  }
  .flx-box._center {
    justify-content: center;
  }
}
#contents h3 {
  text-align: left;
  font-size: 2.2rem;
  line-height: 1.5;
  padding: 0 0 0 15px;
  margin: 0 auto 40px;
  font-weight: bold;
  position: relative;
}
#contents h3::before {
  content: '';
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: rgb(34,136,255);
  background: linear-gradient(to bottom, rgba(34,136,255,1) 0%,rgba(0,187,119,1) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
#contents .grid-box .title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  display: grid;
  place-content: center;
}
#contents :where(div, li, p):has(> wbr) {
  word-break: keep-all;
}

.merit-list .img {
  position: relative;
}
.merit-list .img::before {
  content: '';
  background: url(../img/icn_merit1.svg) no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  display: inline-block;
  width: 80px;
  height: 80px;
  position: absolute;
  left: -10px;
  top: -10px;
}
.merit-list > *:nth-child(2) .img::before {
  background-image: url(../img/icn_merit2.svg);
}
.merit-list > *:nth-child(3) .img::before {
  background-image: url(../img/icn_merit3.svg);
}
@media screen and (min-width: 768px) {
  #contents .btn.mt20 {
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  #contents .logo-img {
    text-align: center;
  }
}