#hero {
  position: relative;
  background-color: #f7f8f8;
}
#hero .hero-img img {
  display: block;
}
@media screen and (max-width: 767px) {
  #hero .hero-img img {
    width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-img img {
    width: auto;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
    height: 81.3rem;
  }
}
#hero .hero-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #hero .hero-wrap {
    height: 100%;
  }
}
#hero .hero-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 4rem 0;
}
@media screen and (min-width: 768px) {
  #hero .hero-content {
    gap: 6rem;
    padding: 6rem 1.5rem;
  }
}
#hero .hero-content .labels {
  display: flex;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #hero .hero-content .labels {
    gap: 3.2rem;
  }
}
#hero .hero-content .labels .label {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label {
    font-size: 1.6rem;
    padding-bottom: 3.6rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .labels .label {
    font-size: 2.8rem;
    padding-bottom: 4.8rem;
  }
}
#hero .hero-content .labels .label span {
  display: block;
  background-color: #057ae6;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label span {
    border-radius: 1.2rem;
    padding: 0.4rem 1.6rem 0.8rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .labels .label span {
    border-radius: 2.4rem;
    padding: 0.4rem 3.6rem 0.8rem;
  }
}
#hero .hero-content .labels .label-left::before, #hero .hero-content .labels .label-left::after, #hero .hero-content .labels .label-right::before, #hero .hero-content .labels .label-right::after {
  position: absolute;
  content: "";
  display: block;
  aspect-ratio: 1;
  background-color: #057ae6;
  border-radius: 100%;
  bottom: 0;
}
#hero .hero-content .labels .label-left::before, #hero .hero-content .labels .label-left::after {
  right: 0;
}
#hero .hero-content .labels .label-left::before {
  width: 1rem;
  transform: translateX(-3rem) translateY(-3rem);
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label-left::before {
    width: 0.8rem;
    transform: translateX(-1.6rem) translateY(-2rem);
  }
}
#hero .hero-content .labels .label-left::after {
  width: 0.6rem;
  transform: translateX(-2.6rem) translateY(-1.6rem);
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label-left::after {
    width: 0.4rem;
    transform: translateX(-1.2rem) translateY(-1rem);
  }
}
#hero .hero-content .labels .label-right::before, #hero .hero-content .labels .label-right::after {
  left: 0.2rem;
}
#hero .hero-content .labels .label-right::before {
  width: 1.4rem;
  transform: translateX(1rem) translateY(-3rem);
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label-right::before {
    width: 1rem;
    transform: translateX(1rem) translateY(-2.2rem);
  }
}
#hero .hero-content .labels .label-right::after {
  width: 0.8rem;
  transform: translateX(0.6rem) translateY(-2rem);
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label-right::after {
    width: 0.6rem;
    transform: translateX(0.6rem) translateY(-1.3rem);
  }
}
#hero .hero-content .labels .label-right span:after {
  position: absolute;
  content: "";
  display: block;
  width: 0.5rem;
  aspect-ratio: 1;
  background-color: #057ae6;
  border-radius: 100%;
  bottom: 0;
  left: 0.2rem;
  transform: translateX(0.1rem) translateY(-1rem);
}
@media screen and (max-width: 767px) {
  #hero .hero-content .labels .label-right span:after {
    width: 0.4rem;
    transform: translateX(0.2rem) translateY(-0.6rem);
  }
}
#hero .hero-content h1 {
  color: #057ae6;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  #hero .hero-content h1 {
    font-size: 3.6rem;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content h1 {
    font-size: 8.4rem;
  }
}
#hero .hero-content h1 small {
  line-height: 1.4;
  display: block;
  font-size: 0.57em;
}
#hero .hero-content h1 b {
  color: #ec711e;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .desc {
    font-size: 1.3rem;
    padding-top: 1rem;
    letter-spacing: normal;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .desc {
    font-size: 2rem;
  }
}
#hero .hero-content .min-max {
  display: flex;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .min-max {
    gap: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .min-max {
    gap: 2.4rem;
  }
}
#hero .hero-content .min-max .label {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #ffd94b;
  color: #057ae6;
  font-weight: 800;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .min-max .label {
    border-radius: 1.2rem;
    font-size: 1.6rem;
    padding: 0.8rem 1.6rem;
    height: 2.4em;
    gap: 0.6rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .min-max .label {
    border-radius: 2.4rem;
    font-size: 2.8rem;
    padding: 1.2rem 5.5rem;
    height: 2.4em;
    gap: 1rem;
  }
}
#hero .hero-content .min-max .label b {
  font-size: 3em;
  line-height: 1em;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .min-max .label b {
    text-shadow: -1px 0px 0 #ffd94b, 0px -1px 0 #ffd94b, 0px 0px 0 #ffd94b, 0px 1px 0 #ffd94b, 1px 0px 0 #ffd94b;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .min-max .label b {
    text-shadow: -2px -1px 0 #ffd94b, -2px 0px 0 #ffd94b, -2px 1px 0 #ffd94b, -1px -2px 0 #ffd94b, -1px -1px 0 #ffd94b, -1px 0px 0 #ffd94b, -1px 1px 0 #ffd94b, -1px 2px 0 #ffd94b, 0px -2px 0 #ffd94b, 0px -1px 0 #ffd94b, 0px 0px 0 #ffd94b, 0px 1px 0 #ffd94b, 0px 2px 0 #ffd94b, 1px -2px 0 #ffd94b, 1px -1px 0 #ffd94b, 1px 0px 0 #ffd94b, 1px 1px 0 #ffd94b, 1px 2px 0 #ffd94b, 2px -1px 0 #ffd94b, 2px 0px 0 #ffd94b, 2px 1px 0 #ffd94b;
  }
}
#hero .hero-content .list {
  display: flex;
  flex-wrap: wrap;
  max-width: 56rem;
}
@media screen and (max-width: 767px) {
  #hero .hero-content .list {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .list {
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    row-gap: 2.4rem;
  }
}
#hero .hero-content .list li {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  gap: 1rem;
  background-color: #fff;
  filter: drop-shadow(0 0 1.5rem rgba(0, 0, 0, 0.0823529412));
}
@media screen and (max-width: 767px) {
  #hero .hero-content .list li {
    border-radius: 1.2rem;
    padding: 1rem 1rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero-content .list li {
    border-radius: 2.4rem;
    padding: 2rem 2.4rem;
  }
}
#hero .hero-content .list li::before {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: url(../images/icon-check.svg) center/contain no-repeat;
  width: 1.4rem;
}
@media screen and (min-width: 768px) {
  #hero .hero-content .list li::before {
    width: 2.4rem;
  }
}
#hero .hero-content .list li span {
  color: #057ae6;
  font-weight: bold;
  line-height: 1.2;
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  #hero .hero-content .list li span {
    font-size: 2rem;
  }
}

.card-infinity {
  width: 100dvw;
  overflow: hidden;
  padding-top: 2rem;
}
@media screen and (min-width: 768px) {
  .card-infinity {
    padding-top: 3rem;
  }
}
.card-infinity .marquee-inner {
  animation-duration: 40s;
}
.card-infinity .card img {
  display: block;
  width: auto;
  margin-right: 2rem;
  height: 6rem;
}
@media screen and (min-width: 768px) {
  .card-infinity .card img {
    margin-right: 4rem;
    height: 6rem;
  }
}

#point .point-wrap {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  #point .point-wrap {
    flex-direction: column;
    align-items: center;
    gap: 7rem;
    margin-top: 12rem;
  }
}
@media screen and (min-width: 768px) {
  #point .point-wrap {
    margin-top: 15rem;
  }
}
#point .point-wrap .point {
  background-color: #fff;
  position: relative;
  width: 32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 6.5rem 2.4rem 2.6rem;
  border-radius: 1.2rem;
}
@media screen and (min-width: 768px) {
  #point .point-wrap .point {
    border-radius: 2.4rem;
    padding: 8.5rem 2.4rem 3.6rem;
  }
}
#point .point-wrap .point-1 {
  --point: url(../images/point1.png);
}
#point .point-wrap .point-2 {
  --point: url(../images/point2.png);
}
#point .point-wrap .point-3 {
  --point: url(../images/point3.png);
}
#point .point-wrap .point::before {
  content: "";
  aspect-ratio: 1;
  background: var(--point) center/contain no-repeat;
  width: 8rem;
}
@media screen and (min-width: 768px) {
  #point .point-wrap .point::before {
    width: 10rem;
  }
}
#point .point-wrap .point .label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  aspect-ratio: 1;
  background-color: rgba(5, 122, 230, 0.768627451);
  color: #fff;
  font-weight: bold;
  line-height: 1;
  border-radius: 10rem;
  letter-spacing: 0.05em;
  font-size: 1.8rem;
  width: 8rem;
}
@media screen and (min-width: 768px) {
  #point .point-wrap .point .label {
    width: 10rem;
    font-size: 2.4rem;
  }
}
#point .point-wrap .point .label b {
  font-size: 1.65em;
}
#point .point-wrap .point .detail .ttl {
  color: #ec711e;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #point .point-wrap .point .detail .ttl {
    font-size: 2.4rem;
  }
}

#percent {
  background-color: #fff;
}
#percent .percents {
  display: flex;
  gap: 3.6rem;
}
@media screen and (max-width: 767px) {
  #percent .percents {
    flex-direction: column;
    align-items: center;
    gap: 6rem;
  }
}
#percent .percents .percent {
  position: relative;
  background-color: #edf2f8;
  border: 2px solid #ec711e;
  border-radius: 1.2rem;
  padding: 3rem 1rem 1.6rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent {
    width: 61.5rem;
    border-radius: 2.4rem;
    padding: 6rem 2.4rem 3.6rem;
  }
}
#percent .percents .percent .ptt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-55%);
}
#percent .percents .percent .ptt span {
  display: inline-block;
  word-break: keep-all;
  background: #ec711e;
  color: #fff;
  font-weight: bold;
  border-radius: 4rem;
  font-size: 1.8rem;
  padding: 0.8rem 4rem 1rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .ptt span {
    font-size: 2.4rem;
    padding: 1rem 6rem 1.2rem;
  }
}
#percent .percents .percent .p-head {
  color: #057ae6;
  text-align: center;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #057ae6;
}
#percent .percents .percent .p-head strong {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .p-head strong {
    font-size: 2.4rem;
  }
}
#percent .percents .percent .p-head strong b {
  font-size: 2em;
  color: #ec711e;
}
#percent .percents .percent .p-content {
  padding-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .p-content {
    gap: 2rem;
  }
}
#percent .percents .percent .p-content .step p {
  padding: 0.8rem 1rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .p-content .step p {
    padding: 0.8rem 2.4rem;
  }
}
#percent .percents .percent .p-content .step .step-ttl {
  background-color: #fff;
  border-radius: 0.8rem;
  color: #057ae6;
  font-weight: bold;
  margin-bottom: 0;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .p-content .step .step-ttl {
    font-size: 2rem;
  }
}
#percent .percents .percent .p-content .step .step-ttl b {
  color: #ec711e;
}
@media screen and (min-width: 768px) {
  #percent .percents .percent .p-content .step .step-txt {
    min-height: 4em;
  }
}
#percent .percents .percent .step-note {
  font-size: 1.4rem;
  color: #057ae6;
}
#percent .note {
  text-align: center;
  color: #057ae6;
  font-weight: bold;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  #percent .note {
    font-size: 2.4rem;
  }
}
#percent .note span {
  color: #ec711e;
}

.contact-banner {
  background: url(../images/contact-banner_bg.png) center/cover no-repeat;
  padding: 5rem 1.5rem;
}
.contact-banner .contact-banner-content {
  text-align: center;
  color: #fff;
}
.contact-banner .contact-banner-content .ttl {
  font-weight: bold;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .ttl {
    margin-bottom: 5rem;
    font-size: 2.4rem;
  }
}
.contact-banner .contact-banner-content .contact-wrap {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.2rem;
}
@media screen and (max-width: 767px) {
  .contact-banner .contact-banner-content .contact-wrap {
    padding: 3.6rem 2rem;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .contact-wrap {
    margin-bottom: 4rem;
    gap: 7.2rem;
    padding: 3.6rem 7.2rem;
  }
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel a {
  color: #057ae6;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .contact-banner .contact-banner-content .contact-wrap .contact-tel a {
    justify-content: center;
  }
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel a::before {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background-color: #057ae6;
  -webkit-mask: url(../images/icon-phone.png) no-repeat center/contain;
          mask: url(../images/icon-phone.png) no-repeat center/contain;
  width: 3rem;
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel a:hover {
  filter: drop-shadow(0 0 0.1rem #057ae6);
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel a span {
  line-height: 1;
  padding-bottom: 0.2em;
  font-size: 3.2rem;
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel .reception {
  color: #000;
  font-weight: bold;
  font-size: 1.4rem;
}
.contact-banner .contact-banner-content .contact-wrap .contact-tel .reception span {
  display: inline-block;
  background-color: #057ae6;
  color: #fff;
  border-radius: 0.8rem;
  padding: 0.2rem 0.8rem 0.3rem;
  margin-right: 1.2rem;
}
.contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn {
  gap: 1.4rem;
  padding: 1.4rem 2.4rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn {
    gap: 2.4rem;
    padding: 2.4rem 4.8rem;
  }
}
.contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn span {
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn span {
    font-size: 2.4rem;
  }
}
.contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn:after {
  content: "";
  aspect-ratio: 1;
  background: url(../images/arrow-right.png) center/contain no-repeat;
  width: 2.2rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn:after {
    width: 3.6rem;
  }
}
.contact-banner .contact-banner-content .labels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .labels {
    gap: 2rem;
  }
}
.contact-banner .contact-banner-content .labels span {
  border-radius: 0.8rem;
  font-weight: bold;
  border: 1px solid #fff;
  font-size: 1.6rem;
  padding: 0.5rem 1rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-content .labels span {
    border: 2px solid #fff;
    padding: 0.8rem;
    font-size: 2rem;
    width: 18rem;
  }
}

#product {
  position: relative;
}
@media screen and (max-width: 767px) {
  #product {
    padding-bottom: 24dvw;
  }
}
@media screen and (min-width: 768px) {
  #product {
    padding-bottom: 12dvw;
  }
}
#product .product-infinity {
  overflow: hidden;
  position: absolute;
  bottom: -0.6dvw;
  width: 100%;
}
#product .product-infinity .txt {
  content: "Answer";
  font-size: 22dvw;
  color: #fff;
  line-height: 1;
  font-weight: bold;
  padding: 0 2dvw;
}
@media screen and (min-width: 768px) {
  #product .product-infinity .txt {
    font-size: 12dvw;
  }
}
#product .products {
  display: flex;
  justify-content: center;
  gap: 3.6rem;
}
@media screen and (max-width: 767px) {
  #product .products {
    gap: 1.8rem;
    flex-direction: column;
    align-items: center;
  }
}
#product .products .product {
  padding: 1.2rem 3.6rem;
  border-radius: 2.4rem;
  background-color: #fff;
  border: 0.2rem solid #ec711e;
}
@media screen and (max-width: 767px) {
  #product .products .product {
    width: 28rem;
  }
}
@media screen and (min-width: 768px) {
  #product .products .product {
    width: 31rem;
  }
}
#product .products .product-1 {
  --product: url(../images/product1.png);
}
#product .products .product-2 {
  --product: url(../images/product2.png);
}
#product .products .product-3 {
  --product: url(../images/product3.png);
}
#product .products .product::before {
  content: "";
  display: block;
  aspect-ratio: 480/360;
  background: var(--product) center/contain no-repeat;
  margin: 0 auto 2.4rem;
}
@media screen and (max-width: 767px) {
  #product .products .product::before {
    width: 20rem;
    margin-bottom: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  #product .products .product::before {
    width: 24rem;
    margin-bottom: 2.4rem;
  }
}
#product .products .product .name {
  color: #057ae6;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #product .products .product .name {
    gap: 1.6rem;
    font-size: 2.4rem;
  }
}
#product .products .product .name::before {
  content: "";
  aspect-ratio: 1;
  background: url(../images/icon-check.svg) center/contain no-repeat;
  display: inline-block;
  width: 1.8rem;
}
@media screen and (min-width: 768px) {
  #product .products .product .name::before {
    width: 2.3rem;
  }
}
#product .product-note {
  color: #057ae6;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #product .product-note {
    font-size: 1.3rem;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #product .product-note {
    font-size: 2.4rem;
    margin-top: 10rem;
  }
}

#ensure {
  background-color: #fff;
}
#ensure .ensure-wrap {
  display: flex;
}
@media screen and (max-width: 767px) {
  #ensure .ensure-wrap {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  #ensure .ensure-wrap {
    margin-top: -5rem;
    gap: 3.6rem;
    justify-content: center;
  }
}
#ensure .ensure-wrap .ensure-1 {
  --ensure: url(../images/ensure1.png);
}
#ensure .ensure-wrap .ensure-2 {
  --ensure: url(../images/ensure2.png);
}
#ensure .ensure-wrap .ensure-3 {
  --ensure: url(../images/ensure3.png);
}
#ensure .ensure-wrap .ensure {
  background-color: #edf2f8;
  border: 2px solid #ec711e;
  border-radius: 1.6rem;
  padding: 5rem 1.6rem 2.4rem;
  width: 28rem;
}
@media screen and (min-width: 768px) {
  #ensure .ensure-wrap .ensure {
    border-radius: 2.4rem;
    width: 31rem;
    padding: 7.5rem 2.4rem 3.6rem;
  }
}
#ensure .ensure-wrap .ensure::before {
  content: "";
  aspect-ratio: 1;
  background: var(--ensure) center/contain no-repeat;
  display: block;
  margin: 0 auto 2.4rem;
  width: 8rem;
}
@media screen and (min-width: 768px) {
  #ensure .ensure-wrap .ensure::before {
    width: 12.8rem;
  }
}
#ensure .ensure-wrap .ensure p {
  text-align: center;
  font-weight: bold;
  color: #ec711e;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #ensure .ensure-wrap .ensure p {
    font-size: 2.4rem;
  }
}
#ensure .ensure-note {
  text-align: center;
  color: #057ae6;
  font-weight: bold;
  margin-top: 3rem;
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  #ensure .ensure-note {
    margin-top: 6rem;
    font-size: 2.4rem;
  }
}

#feedback .feedbacks {
  display: flex;
}
@media screen and (max-width: 767px) {
  #feedback .feedbacks {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks {
    gap: 1.8rem;
    justify-content: center;
  }
}
@media screen and (min-width: 1400px) {
  #feedback .feedbacks {
    gap: 3.6rem;
  }
}
#feedback .feedbacks .feedback {
  background: #fff url(../images/feedback_bg.png) bottom center/100% auto no-repeat;
  border-radius: 1.6rem;
  padding: 2.4rem 2.4rem;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback {
    width: 40rem;
    border-radius: 2.4rem;
    padding: 3.6rem 2.4rem;
  }
}
#feedback .feedbacks .feedback-1 {
  --feedback: url(../images/feedback1.png);
}
#feedback .feedbacks .feedback-2 {
  --feedback: url(../images/feedback2.png);
}
#feedback .feedbacks .feedback-3 {
  --feedback: url(../images/feedback3.png);
}
#feedback .feedbacks .feedback .feedback-inn {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#feedback .feedbacks .feedback .detail {
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback .detail {
    margin-bottom: 4.8rem;
  }
}
#feedback .feedbacks .feedback .detail .ttl {
  font-weight: bold;
  color: #ec711e;
  margin-bottom: 1.2rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback .detail .ttl {
    font-size: 2.4rem;
  }
}
#feedback .feedbacks .feedback .detail .txt {
  text-align: justify;
}
#feedback .feedbacks .feedback .reviewer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback .reviewer {
    margin-top: auto;
    margin-bottom: 0;
  }
}
#feedback .feedbacks .feedback .reviewer .info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
#feedback .feedbacks .feedback .reviewer .info::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  border: 1px solid #057ae6;
  border-radius: 100%;
  background: var(--feedback) center/contain no-repeat;
  width: 7rem;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback .reviewer .info::before {
    width: 8rem;
  }
}
#feedback .feedbacks .feedback .reviewer .info .txt p {
  margin: 0;
  color: #057ae6;
}
#feedback .feedbacks .feedback .reviewer .info .txt .name {
  font-weight: bold;
  color: #057ae6;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #feedback .feedbacks .feedback .reviewer .info .txt .name {
    font-size: 2.4rem;
  }
}
#feedback .feedbacks .feedback .reviewer .position p {
  text-align: center;
}
#feedback .feedbacks .feedback .reviewer .position p:first-child {
  margin-bottom: 0;
}
#feedback .feedbacks .feedback .reviewer .position p span {
  background-color: #057ae6;
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 0.8rem;
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
}

#faq {
  background-color: #fff;
}
#faq .faq_wrap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap {
    gap: 3.6rem;
  }
}
#faq .faq_wrap .faq_item {
  background-color: #edf2f8;
  overflow: hidden;
  border-radius: 1.2rem;
  filter: drop-shadow(0 0 1.5rem rgba(5, 122, 230, 0.3764705882));
  transition: 0.3s;
}
#faq .faq_wrap .faq_item .faq-inn {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
#faq .faq_wrap .faq_item .question {
  background-color: #edf2f8;
  cursor: pointer;
  color: #057ae6;
  transition: 0.3s;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  padding: 1.2rem;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item .question {
    gap: 1em;
    font-size: 2.4rem;
    padding: 1.2rem 3.6rem;
  }
}
#faq .faq_wrap .faq_item .question::before {
  content: "Q";
  font-family: "Arial", sans-serif;
  font-weight: 900;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ec711e;
  border-radius: 100%;
  color: #e8faff;
  line-height: 1;
  height: 3.4rem;
  font-size: 1.8rem;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item .question::before {
    height: 4.2rem;
    font-size: 2.4rem;
  }
}
#faq .faq_wrap .faq_item .question .arrow {
  aspect-ratio: 1;
  display: block;
  position: relative;
  margin-left: auto;
  width: 2.4rem;
  --size-long: 1.8rem;
  --size-short: 0.2rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item .question .arrow {
    --size-long: 2.8rem;
    --size-short: 0.4rem;
    width: 4.8rem;
  }
}
#faq .faq_wrap .faq_item .question .arrow:before, #faq .faq_wrap .faq_item .question .arrow:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #057ae6;
  transform-origin: center;
  transform: translate(-50%, -50%);
  border-radius: 0.4rem;
  transition: all 0.3s ease;
}
#faq .faq_wrap .faq_item .question .arrow::before {
  width: var(--size-long);
  height: var(--size-short);
}
#faq .faq_wrap .faq_item .question .arrow::after {
  width: var(--size-short);
  height: var(--size-long);
}
#faq .faq_wrap .faq_item .answer {
  display: none;
}
#faq .faq_wrap .faq_item .answer-inn {
  display: flex;
  gap: 1rem;
  padding: 1.6rem 1.2rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item .answer-inn {
    gap: 1em;
    padding: 3.6rem;
  }
}
#faq .faq_wrap .faq_item .answer-inn::before {
  content: "A";
  font-family: "Arial", sans-serif;
  font-weight: 900;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100%;
  color: #ec711e;
  line-height: 1;
  height: 3.4rem;
  font-size: 1.8rem;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item .answer-inn::before {
    height: 4.2rem;
    font-size: 2.4rem;
  }
}
#faq .faq_wrap .faq_item.active {
  border-radius: 1.4rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq_item.active {
    border-radius: 2.4rem;
  }
}
#faq .faq_wrap .faq_item.active .question {
  background-color: #057ae6;
  color: #fff;
}
#faq .faq_wrap .faq_item.active .question::before {
  background-color: #ffffff;
  color: #ec711e;
}
#faq .faq_wrap .faq_item.active .question .arrow:before, #faq .faq_wrap .faq_item.active .question .arrow:after {
  background-color: #fff;
}
#faq .faq_wrap .faq_item.active .question .arrow::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
#faq .faq_wrap .faq_item.active .question .arrow::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media screen and (min-width: 768px) {
  .section {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  #hero .hero-content {
    gap: 4rem;
  }
  #hero .hero-img img {
    height: 70rem;
  }
  #hero .hero-content .labels .label {
    font-size: 2rem;
  }
  #hero .hero-content h1 {
    font-size: 6.4rem;
  }
  #hero .hero-content .desc {
    font-size: 1.8rem;
  }
  #hero .hero-content .min-max .label {
    height: 2.6em;
    font-size: 2rem;
  }
  .header-wrap .btn-form .btn-inn span,
  #faq .faq_wrap .faq_item .question,
  #feedback .feedbacks .feedback .reviewer .info .txt .name,
  #feedback .feedbacks .feedback .detail .ttl,
  #ensure .ensure-note,
  #ensure .ensure-wrap .ensure p,
  #product .product-note,
  #product .products .product .name,
  .contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn span,
  .contact-banner .contact-banner-content .ttl,
  #percent .note,
  #percent .percents .percent .p-head strong,
  #percent .percents .percent .ptt span,
  #point .point-wrap .point .detail .ttl {
    font-size: 2rem;
  }
  .contact-banner .contact-banner-content .labels span {
    font-size: 1.6rem;
  }
  .contact-banner .contact-banner-content .contact-wrap .contact-form .btn-form .btn-inn {
    padding: 1.4rem 4.8rem;
  }
  .contact-banner .contact-banner-content .labels span {
    border: 1px solid #fff;
    padding: 0.5rem;
    width: 16rem;
  }
}