@media (min-width: 769px) {
  .product_section {
    padding-bottom: 16rem;
  }
}
@media screen and (max-width: 768px) {
  .product_section {
    padding-bottom: 11rem;
  }
}

@media screen and (max-width: 768px) {
  .product_block_image {
    top: 21.5rem;
  }
}
@media (min-width: 769px) {
  .product_block_image figure {
    width: 16.2rem;
    margin-left: 16.9rem;
  }
}
@media screen and (max-width: 768px) {
  .product_block_image figure {
    width: 31.8rem;
  }
}

@media screen and (max-width: 768px) {
  .product_block_caption .txt01 {
    padding-top: 97rem;
  }
}

@media screen and (max-width: 768px) {
  .feature_section {
    padding-bottom: 12rem;
  }
}

.feature_block_image.img1 {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 769px) {
  .feature_block_image.img1 {
    gap: 11.2rem;
    padding-left: 9.2rem;
    padding-bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img1 {
    justify-content: center;
    gap: 14.3rem;
    margin-top: 4rem;
  }
}
.feature_block_image.img1 figure {
  text-align: center;
}
.feature_block_image.img1 figure figcaption {
  line-height: 1;
}
@media (min-width: 769px) {
  .feature_block_image.img1 figure figcaption {
    padding-top: 2rem;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img1 figure figcaption {
    padding-top: 4rem;
    font-size: 2.8rem;
  }
}
@media (min-width: 769px) {
  .feature_block_image.img1 figure:nth-of-type(1) {
    width: 10.4rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img1 figure:nth-of-type(1) {
    width: 20.5rem;
  }
}
@media (min-width: 769px) {
  .feature_block_image.img1 figure:nth-of-type(2) {
    width: 9.3rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img1 figure:nth-of-type(2) {
    width: 18.4rem;
  }
}
@media (min-width: 769px) {
  .feature_block:has(.feature_block_image.img1) {
    align-items: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .feature_block:has(.feature_block_image.img1) {
    margin-top: 15rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

.feature_block_image.img2 figure {
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 769px) {
  .feature_block_image.img2 figure {
    width: 34rem;
    margin: 0 0 0 8rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img2 figure {
    width: 59rem;
    margin: 2rem 0 0 2rem;
  }
}
@media (min-width: 769px) {
  .feature_block_image.img2 + .feature_block_caption {
    padding-left: 3rem;
  }
}

@media (min-width: 769px) {
  .feature_block_image.img3 {
    padding-left: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img3 {
    margin-top: 2rem;
  }
}
@media (min-width: 769px) {
  .feature_block_image.img3 figure {
    width: 40rem;
  }
}
.feature_block_image.img3 .att01 {
  color: #888;
}
@media (min-width: 769px) {
  .feature_block_image.img3 .att01 {
    padding-top: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img3 .att01 {
    padding-top: 6rem;
  }
}
@media (min-width: 769px) {
  .feature_block:has(.feature_block_image.img3) {
    padding: 7rem 0;
  }
}

@media (min-width: 769px) {
  .feature_block_image.img4 figure {
    width: 17.1rem;
    margin: 0 0 0 16.4rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img4 figure {
    width: 34rem;
    margin-left: 14.5rem;
  }
}
.feature_block_image.img4 figure figcaption {
  line-height: 1;
  text-align: center;
}
@media (min-width: 769px) {
  .feature_block_image.img4 figure figcaption {
    padding-top: 2rem;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .feature_block_image.img4 figure figcaption {
    padding-top: 4rem;
    font-size: 2.8rem;
  }
}

@media (min-width: 769px) {
  .howto_inner {
    max-width: 100rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 769px) {
  .howto_inner > .txt01 {
    padding-top: 6rem;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .howto_inner > .txt01 {
    padding-top: 8rem;
  }
}

@media (min-width: 769px) {
  .howto_box {
    display: grid;
    align-items: stretch;
    grid-template-columns: 44rem 1fr;
    width: 100%;
    padding: 5rem 0;
  }
}
@media screen and (max-width: 768px) {
  .howto_box {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding: 10rem 0;
  }
}

@media (min-width: 769px) {
  .howto_box.box1 {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box.box1 {
    margin-top: 8rem;
  }
}

@media (min-width: 769px) {
  .howto_box.box2 {
    margin-top: 2rem;
  }
}

.howto_box_image {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 769px) {
  .howto_box_image .ttl05 {
    padding-bottom: 5rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box_image .ttl05 {
    padding-bottom: 8rem;
  }
}
.howto_box_image figure.r50 img {
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.howto_box_image figcaption {
  line-height: 1;
  text-align: center;
}
@media (min-width: 769px) {
  .howto_box_image figcaption {
    padding-top: 1rem;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box_image figcaption {
    padding-top: 2rem;
    font-size: 3.2rem;
  }
}

@media (min-width: 769px) {
  .howto_box_image.img1 figure {
    width: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box_image.img1 figure {
    width: 40rem;
  }
}

@media (min-width: 769px) {
  .howto_box_image.img2 figure:nth-of-type(1) {
    width: 23.4rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box_image.img2 figure:nth-of-type(1) {
    width: 46.8rem;
  }
}
@media (min-width: 769px) {
  .howto_box_image.img2 figure:nth-of-type(2) {
    width: 12rem;
    margin-top: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_box_image.img2 figure:nth-of-type(2) {
    width: 24rem;
    margin-top: 6rem;
  }
}

.howto_box_caption {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .howto_box_caption {
    justify-content: center;
  }
}

.howto_step {
  display: flex;
}
@media (min-width: 769px) {
  .howto_step {
    align-items: center;
    gap: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step {
    flex-direction: column;
  }
}
@media (min-width: 769px) {
  .howto_step + .ttl06 {
    padding-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step + .ttl06 {
    padding-top: 12rem;
  }
}
@media (min-width: 769px) {
  .ttl06 + .howto_step {
    padding-top: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .ttl06 + .howto_step {
    padding-top: 6rem;
  }
}

.howto_step_flow {
  counter-reset: howto_step_flow;
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .howto_step_flow {
    gap: 3rem;
    width: 36.5rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_flow {
    gap: 6rem;
  }
}
.howto_step_flow > li {
  counter-increment: howto_step_flow;
  position: relative;
}
@media (min-width: 769px) {
  .howto_step_flow > li {
    padding-left: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_flow > li {
    padding-left: 4rem;
  }
}
.howto_step_flow > li::before {
  content: counter(howto_step_flow) ".";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
}
@media (min-width: 769px) {
  .howto_step_flow > li::before {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_flow > li::before {
    font-size: 2.8rem;
  }
}
@media (min-width: 769px) {
  .howto_step_flow > li .att02 {
    padding-top: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_flow > li .att02 {
    padding-top: 3.5rem;
  }
}

@media (min-width: 769px) {
  .howto_step_image.img1 {
    width: 8.6rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_image.img1 {
    width: 59rem;
    margin: 5.5rem auto 0;
  }
}

@media (min-width: 769px) {
  .howto_step_image.img2 {
    width: 12.5rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_image.img2 {
    width: 37.5rem;
    margin: 4.5rem auto 0;
  }
}

.howto_step_image.img3 {
  flex-shrink: 0;
}
@media (min-width: 769px) {
  .howto_step_image.img3 {
    width: 12.9rem;
  }
}
@media screen and (max-width: 768px) {
  .howto_step_image.img3 {
    width: 37.5rem;
    margin: 4.5rem auto 0;
  }
}

@media (min-width: 769px) {
  .spec_block_image figure {
    width: 10.6rem;
    margin-left: 12.1rem;
  }
}
@media screen and (max-width: 768px) {
  .spec_block_image figure {
    width: 13.2rem;
  }
}