@charset "UTF-8";
.sec-points {
  position: relative;
  padding: 95.17px 0 109px;
  background-color: #F3F3F3;
  font-feature-settings: normal;
  text-spacing-trim: space-all;
  text-autospace: no-autospace;
  line-break: strict;
}
.sec-points::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 71px;
  background-image: url("../../assets/img/points/bg-band.webp");
  background-repeat: repeat;
  background-size: 21px 21px;
  background-position: -16px 0;
  pointer-events: none;
}
.points-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(40px, calc((100vw - 66px) * 0.04644));
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  color: var(--c-text);
}
.points-l {
  font-size: 1.2em;
}
.points-br-sp { display: none; }
.points-br-pc { display: inline; }
.points-lead {
  margin: 32.38px auto 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--c-text);
}
.points-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: min(1440px, calc(100% - 96px));
  margin: 87.65px auto 0;
}
.points-card {
  flex: 0 1 337px;
  background-color: #FFFFFF;
  padding-bottom: 24px;
}
.points-card--bone,
.points-card--gum {
  flex-basis: 336px;
}
.points-card--bone,
.points-card--bite {
  margin-top: 80px;
}
.points-head {
  display: flex;
  flex-direction: column-reverse;
}
.points-photo {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.points-photo img {
  position: absolute;
  max-width: none;
}
.points-card--crown .points-photo img {
  left: -43px;
  top: -36px;
  width: 423px;
  height: 251px;
  object-fit: cover;
}
.points-card--bone .points-photo img {
  left: -8px;
  top: -6px;
  width: 352px;
  height: 209px;
  object-fit: cover;
}
.points-card--gum .points-photo {
  margin-top: 3px;
}
.points-card--gum .points-photo img {
  left: -37px;
  top: -60.9px;
  width: 394px;
  height: 270.81px;
}
.points-card--bite .points-photo img {
  left: -43px;
  top: -66px;
  width: 466px;
  height: 276px;
  object-fit: cover;
}
.points-card-title {
  margin: 36px 36.83px 0 30.17px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  color: var(--c-text);
}
.points-card--bone .points-card-title { margin: 36px 36px 0 30px; }
.points-card--gum  .points-card-title { margin: 33px 33.09px 0 32.91px; }
.points-card--bite .points-card-title { margin: 36px 36.35px 0 30.65px; }
.points-card-txt {
  margin: 16px 36.83px 0 30.17px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0;
  text-align: left;
  color: var(--c-text);
}
.points-card--bone .points-card-txt { margin: 16px 36px 0 30px; }
.points-card--gum  .points-card-txt { margin: 16px 33.09px 0 32.91px; }
.points-card--bite .points-card-txt { margin: 16px 36.35px 0 30.65px; }
@media (min-width: 768px) and (max-width: 1279px) {
  .points-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 32px;
  }
  .points-card--bone,
  .points-card--bite {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .sec-points {
    padding: 57.42px 0 97.75px;
  }
  .sec-points::after {
    height: 40px;
    background-position: 0 0;
  }
  .points-title {
    font-size: 21px;
  }
  .points-l {
    font-size: 29px;
  }
  .points-br-sp { display: inline; }
  .points-br-pc { display: none; }
  .points-lead {
    margin: 17.54px 24px 0;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-align: justify;
  }
  .points-grid {
    display: block;
    width: auto;
    margin: 46.24px 24px 0;
  }
  .points-card {
    padding-bottom: 19.25px;
    margin-right: -1.83px;
  }
  .points-card--bone {
    margin: 33.25px 0 0;
    padding-bottom: 21.81px;
  }
  .points-card--gum {
    margin: 31.25px 0 0;
    padding-bottom: 24.5px;
  }
  .points-card--bite {
    margin: 23.13px 0 0;
    padding-bottom: 25.62px;
  }
  .points-head {
    flex-direction: row;
    align-items: flex-start;
    height: 130.75px;
  }
  .points-card--bone .points-head { flex-direction: row-reverse; height: 131.19px; }
  .points-card--gum  .points-head { height: 131.25px; }
  .points-card--bite .points-head { flex-direction: row-reverse; height: 131.25px; }
  .points-card-title {
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 1.6;
  }
  .points-card--crown .points-card-title {
    margin: 0;
    padding: 36.5px 31.81px 0 0;
    min-width: 111.81px;
    text-align: right;
  }
  .points-card--bone .points-card-title {
    margin: 0;
    padding: 54.5px 0 0 13.04px;
    min-width: 133.04px;
    text-align: left;
  }
  .points-card--gum .points-card-title {
    margin: 0;
    padding: 48.7px 27.52px 0 0;
    min-width: 107.52px;
    text-align: right;
  }
  .points-card--bite .points-card-title {
    margin: 0;
    padding: 57.14px 0 0 13.49px;
    min-width: 113.49px;
    text-align: left;
  }
  .points-photo {
    flex: 0 1 auto;
  }
  .points-card--crown .points-photo {
    width: 170.58px;
    height: 101.23px;
    margin: 15.88px 16.05px 0 0;
  }
  .points-card--bone .points-photo {
    width: 170.07px;
    height: 101.24px;
    margin: 17.88px 0 0 15.43px;
  }
  .points-card--gum .points-photo {
    width: 163.16px;
    height: 97.12px;
    margin: 23.13px 17.93px 0 0;
  }
  .points-card--bite .points-photo {
    width: 163.65px;
    height: 97.12px;
    margin: 23.14px 0 0 21.86px;
  }
  .points-card--crown .points-photo img {
    left: -21.77px;
    top: -18.22px;
    width: 214.11px;
    height: 127.05px;
  }
  .points-card--bone .points-photo img {
    left: -4.05px;
    top: -3.04px;
    width: 178.17px;
    height: 105.79px;
  }
  .points-card--gum .points-photo img {
    left: -17.96px;
    top: -29.56px;
    width: 191.33px;
    height: 131.51px;
  }
  .points-card--bite .points-photo img {
    left: -20.89px;
    top: -32.06px;
    width: 226.29px;
    height: 134.03px;
  }
  .points-card-txt {
    font-size: 16px;
    text-align: justify;
  }
  .points-card--crown .points-card-txt {
    margin: 0 19.75px 0 21.86px;
  }
  .points-card--bone .points-card-txt,
  .points-card--gum .points-card-txt,
  .points-card--bite .points-card-txt {
    margin: 0 17.92px 0 21.86px;
  }
  .points-card--bone .points-card-txt {
    letter-spacing: -0.01em;
  }
}
.points-lead { text-wrap: pretty; }