@charset "UTF-8";

#quality {
  background: #fffffc;
}

@keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }
  
    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }
  
    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }
  
    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }
  

/* ========================================
@media screen and (min-width: 768px), print {
======================================== */
@media screen and (min-width: 768px), print {
  .p-fv {
    margin-block: 84px 80px;
  }

  .p-fv .p-fv__txt {
    margin-bottom: 41px;
    text-align: center;
  }

  .p-fv .p-fv__txt p {
    margin-bottom: 41px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.75;
  }

  .p-fv .p-fv__txt p:last-child {
    margin-bottom: 0;
  }

  .p-fv .p-fv__scrolldown {
    animation: scroll 2s infinite;
    background: #403f3f;
    height: 100px;
    left: 50%;
    margin-bottom: -59px;
    position: relative;
    transform: translateX(-50%);
    width: 1px;
    z-index: 10;
  }

  .p-fv .p-fv__img {
    text-align: center;
  }

  .p-fv .p-fv__img img {
    height: auto;
    width: 100%;
  }

  .p-point.--point01 {
    margin-bottom: 150px;
  }

  .p-point.--point02 {
    margin-bottom: 150px;
  }

  .p-point.--point03 {
    margin-bottom: 151px;
  }

  .p-point.--point04 {
    margin-bottom: 152px;
  }

  .p-point .p-point__ttl {
    background: url(../images/quality/point_ttl_bg.jpg) repeat top
      center/contain;
    color: #ffffff;
    margin-bottom: 102px;
    margin-inline: auto;
    padding-block: 42px;
    text-align: center;
    width: min(95%, 1440px);
  }

  .p-point .p-point__ttl p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 24px;
  }

  .p-point .p-point__ttl h2 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.7777777778;
  }

  .p-point .p-point__ttl h2 span {
    display: block;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.1428571429;
    margin-block: 10px 0;
  }

  .p-point .p-point01__con01 {
    display: grid;
    gap: 0 7.7%;
    grid-template-columns: 59.6% 32.7%;
    margin-bottom: 100px;
    margin-inline: auto;
    width: min(95%, 1040px);
    align-items: center;
  }

  .p-point .p-point01__con01-left img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point01__con01-right p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
  }

  .p-point .p-point01__con01-right p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point01__con02 {
    display: grid;
    gap: 0 7.7%;
    grid-template-columns: 38.5% 53.8%;
    margin-inline: auto;
    width: min(95%, 1040px);
    align-items: center;
  }

  .p-point .p-point01__con02-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
  }

  .p-point .p-point01__con02-left p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point01__con02-right img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point02__con {
    margin-block: -19px 0;
  }

  .p-point .p-point02__con p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    text-align: center;
  }

  .p-point .p-point02__con p.top {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.1111111111;
    margin-bottom: 40px;
    text-align: center;
  }

  .p-point .p-point02__con .img {
    margin-bottom: 40px;
    margin-inline: auto;
    text-align: center;
    width: min(95%, 800px);
  }

  .p-point .p-point02__con .img img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point__con {
    margin-block: -20px 80px;
  }

  .p-point .p-point__con.--point04 {
    margin-block: -2px 80px;
  }

  .p-point .p-point__con .top {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.1111111111;
    margin-bottom: 40px;
    text-align: center;
  }

  .p-point .p-point__con .bottom {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
    text-align: center;
  }

  .p-point .p-point__con .img {
    margin-inline: auto;
    text-align: center;
    width: min(95%, 800px);
  }

  .p-point .p-point__con.--point04 .img {
    width: min(95%,1040px);
    margin-inline: auto;
  }

  .p-point .p-point__con .img img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point03__con {
    display: grid;
    gap: 0 7.7%;
    grid-template-columns: 40.4% 51.9%;
    margin-inline: auto;
    width: min(95%, 1040px);
    align-items: center;
  }

  .p-point .p-point03__con-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
  }

  .p-point .p-point03__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point03__con-right img {
    height: auto;
    width: 100%;
  }

  .p-point04__con {
    display: grid;
    gap: 0 6.5%;
    grid-template-columns: 41.5% 51.9%;
    margin-inline: auto;
    width: min(95%, 1040px);
    align-items: center;
  }

  .p-point04__con-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
  }

  .p-point04__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-point04__con-right img {
    height: auto;
    width: 100%;
  }

  .p-link {
    margin-bottom: 180px;
  }

  .p-link .l-inner.l-link {
    margin-inline: auto;
    width: min(95%, 1020px);
  }

  .p-link .p-link__items {
    display: grid;
    gap: 0 60px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-link .p-link__item a {
    display: block;
  }

  .p-link .p-link__item a img {
    height: auto;
    width: 100%;
  }
}

/* ========================================
@media screen and (max-width: 767px) {
======================================== */
@media screen and (max-width: 767px) {
  .p-fv {
    margin-block: 14vw 20.493vw;
  }

  .p-fv .p-fv__txt {
    margin-bottom: 9.662vw;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 82.1vw);
  }

  .p-fv .p-fv__txt p {
    font-size: 4.831vw;
    font-weight: 400;
    letter-spacing: 1.2px;
    line-height: 1.9;
    margin-bottom: 8.797vw;
  }

  .p-fv .p-fv__txt p:last-child {
    margin-bottom: 0;
  }

  .p-fv .p-fv__scrolldown {
    animation: scroll 2s infinite;
    background: #403f3f;
    height: 19.324vw;
    left: 50%;
    margin-bottom: -9.662vw;
    position: relative;
    transform: translateX(-50%);
    width: 0.242vw;
    z-index: 10;
  }

  .p-fv .p-fv__img {
    text-align: center;
  }

  .p-fv .p-fv__img img {
    height: auto;
    width: 100%;
  }

  .p-point.--point01 {
    margin-bottom: 20.246vw;
  }

  .p-point.--point02 {
    margin-bottom: 12.646vw;
  }

  .p-point.--point03 {
    margin-bottom: 19.246vw;
  }

  .p-point.--point04 {
    margin-bottom: 19.246vw;
  }

  .p-point .p-point__ttl {
    background: url(../images/quality/point_ttl_bg.jpg) repeat top
      center/contain;
    color: #ffffff;
    margin-bottom: 10vw;
    padding-block: 9.662vw;
    text-align: center;
    width: 100%;
  }

  .p-point.--point03 .p-point__ttl {
    margin-bottom: 8vw;
    padding-block: 9.662vw;
  }

  .p-point .p-point__ttl p {
    font-size: 2.899vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 0.932vw;
  }

  .p-point .p-point__ttl h2 {
    font-size: 3.865vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.75;
  }

  .p-point .p-point__ttl h2 span {
    display: block;
    font-size: 5.797vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.3333333333;
    margin-block: -0.068vw 0;
  }

  .p-point .p-point01__con01 {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-bottom: 7.246vw;
    margin-inline: auto;
    width: 100%;
  }

  .p-point .p-point01__con01-left img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point01__con01-right {
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-point .p-point01__con01-right p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 5.831vw;
  }

  .p-point .p-point01__con01-right p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point01__con02 {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    width: 100%;
  }

  .p-point .p-point01__con02-left {
    margin-inline: auto;
    order: 2;
    width: min(95%, 82.1vw);
  }

  .p-point .p-point01__con02-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 6.831vw;
  }

  .p-point .p-point01__con02-left p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point01__con02-right {
    order: 1;
    text-align: center;
  }

  .p-point .p-point01__con02-right img {
    height: auto;
    width: 88.406vw;
  }

  .p-point .p-point02__con p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 79.1vw);
  }

  .p-point .p-point02__con p.top {
    font-size: 3.865vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.875;
    margin-bottom: 7.831vw;
    text-align: left;
  }

  .p-point .p-point02__con .img {
    margin-inline: auto;
    text-align: center;
    width: min(95%, 90.405797vw);
    margin-bottom: 8vw;
  }

  .p-point .p-point02__con .img img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point__con {
    margin-bottom: 7.246vw;
    margin-inline: auto;
    width: min(95%, 91.7vw);
  }

  .p-point .p-point__con.--point04 {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
  }

  .p-point .p-point__con.--point04 .top {
    order: 1;
    margin-bottom: 1vw;
    width: min(95%, 83.1vw);
  }

  .p-point .p-point__con.--point04 .bottom {
    order: 3;
  }

  .p-point .p-point__con.--point04 .img {
    order: 2;
  }

  .p-point .p-point__con .top {
    font-size: 3.865vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.875;
    margin-bottom: 2.415vw;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 82.1vw);
  }

  .p-point.--point03 .p-point__con .top {
    width: min(95%, 83.1vw);
  }

  .p-point .p-point__con .bottom {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 0px;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 82.1vw);
  }

  .p-point .p-point__con .img {
    margin-inline: auto;
    text-align: center;
    width: 100%;
  }

  .p-point .p-point__con .img img {
    height: auto;
    width: 100%;
  }

  .p-point .p-point03__con {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 91.7vw);
  }

  .p-point .p-point03__con-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 6.831vw;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-point .p-point03__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-point .p-point03__con-right img {
    height: auto;
    width: 100%;
  }

  .p-point04__con {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 91.7vw);
  }

  .p-point04__con-left {
    order: 2;
  }

  .p-point04__con-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 5.831vw;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-point04__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-point04__con-right {
    order: 1;
  }

  .p-point04__con-right img {
    height: auto;
    width: 100%;
  }

  .p-link {
    margin-bottom: 24.155vw;
  }

  .p-link .l-inner.l-link {
    margin-inline: auto;
    width: min(95%, 91.7vw);
  }

  .p-link .p-link__items {
    display: grid;
    gap: 3.382vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .p-link .p-link__item a {
    display: block;
  }

  .p-link .p-link__item a img {
    height: auto;
    width: 100%;
  }
}