@charset "UTF-8";
/*=================================================
製品特長箇所
=================================================*/
main {
  width: 100%;
  max-width: 100%;
}

.hello-section {
  padding: 8rem 0;
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
}
.hello-section .hello-title {
  font-size: 4.2rem;
  margin-bottom: 4.4rem;
  line-height: 1.3;
  font-weight: 300;
  text-align: center;
}
.hello-section .hello-subtitle {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.hello-section .hello-description {
  max-width: 480px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .hello-section {
    padding: 6rem 0;
  }
  .hello-section .hello-title {
    font-size: 3.8rem;
    margin-bottom: 4rem;
  }
}
.main-image-section {
  text-align: center;
  margin-bottom: 6rem;
}
.main-image-section .main-image {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.function-section {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  margin-bottom: 10rem;
}
.function-section .function-desc {
  max-width: 800px;
  width: 100%;
  margin: 0 auto 9rem;
}
.function-section .function-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.function-section .function-title {
  width: 100%;
  max-width: 307px;
  font-size: 4.2rem;
  margin-bottom: 3.3rem;
  font-weight: 300;
}
.function-section .function-left {
  margin-right: 3.6rem;
  flex: none;
}
.function-section .function-left .function-left-side {
  display: flex;
}
.function-section .function-left .function-text {
  max-width: 266px;
  width: 100%;
}
.function-section .function-left .left-img {
  width: 100%;
  max-width: 266px;
}
.function-section .function-left .left-img img {
  width: 100%;
  height: 100%;
}
.function-section .function-left .side-left-img {
  width: 100%;
  max-width: 150px;
}
.function-section .function-left .side-left-img img {
  width: 100%;
  height: 100%;
}
.function-section .function-left-mini {
  margin-right: 11rem;
  max-width: 430px;
}
.function-section .function-right {
  width: 100%;
  max-width: 840px;
  height: 420px;
  position: relative;
  overflow: hidden;
}
.function-section .function-right-side {
  width: 100%;
  max-width: 610px;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.function-section .right-img {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.function-section .right-img img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: left;
}
.function-section .function-text {
  max-width: 266px;
  font-size: 1.6rem;
  margin-bottom: 1.3rem;
}

@media screen and (max-width: 768px) {
  .function-section {
    width: 100%;
  }
  .function-section .function-desc {
    width: 90%;
  }
  .function-section .function-content {
    flex-direction: column;
    align-items: center;
  }
  .function-section .function-left {
    margin-right: 0;
    margin-bottom: 3rem;
  }
  .function-section .function-left-mini {
    margin: 0 auto 3rem;
    width: 90%;
  }
  .function-section .function-right {
    width: 100%;
    max-width: 600px;
    height: 300px;
  }
  .function-section .function-right-side {
    width: 100%;
    max-width: 510px;
    height: 300px;
  }
  .function-section .right-img img {
    width: 100%;
    height: 100%;
    top: 0;
    transform: none;
    object-fit: cover;
    object-position: left;
  }
}
.use-section {
  background: #F7F7F7;
  margin-bottom: 13rem;
}
.use-section .use-wrap {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 12rem 0;
}
.use-section .use-title {
  margin-bottom: 4.5rem;
  font-size: 4.2rem;
  font-weight: 300;
}
.use-section .use-item {
  margin-bottom: 5rem;
}
.use-section .use-item .use-item-title {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
.use-section .use-item .use-item-title .use-item-title-text {
  font-size: 2.2rem;
  color: #38B281;
}
.use-section .use-item .use-number {
  display: flex;
  align-items: center;
}
.use-section .use-item .use-number .point-label {
  font-size: 1.2rem;
  color: #38B281;
  border-top: 2px solid #38B281;
  border-bottom: 2px solid #38B281;
  padding: 0.5rem 0.3rem;
  margin-right: 1rem;
}
.use-section .use-item .use-number .number {
  font-size: 8rem;
  line-height: 6rem;
  font-weight: 300;
  color: #38B281;
  margin-right: 2rem;
}
.use-section .use-item .use-desc {
  font-size: 1.6rem;
  line-height: 1.8;
}
.use-section .use-item .use-note {
  font-size: 1.4rem;
  margin-top: 1.3rem;
}
.use-section .use-item .use-note li {
  margin-bottom: 0.8rem;
}
.use-section .use-image {
  text-align: center;
  margin: 0 auto;
}
.use-section .use-image img {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 0.5rem;
}

@media screen and (max-width: 768px) {
  .use-section {
    margin-bottom: 10rem;
  }
  .use-section .use-wrap {
    padding: 8rem 0;
  }
  .use-section .use-title {
    margin-bottom: 4rem;
    font-size: 3.8rem;
  }
  .use-section .use-item {
    margin-bottom: 5rem;
  }
  .use-section .use-item .use-item-title {
    margin-bottom: 1.5rem;
  }
  .use-section .use-item .use-item-title p {
    font-size: 2rem;
    color: #38B281;
  }
  .use-section .use-item .use-number .number {
    margin-right: 1.8rem;
  }
}
.gybox-section {
  margin-bottom: 13rem;
}
.gybox-section .gybox-wrap {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
.gybox-section .gybox-title {
  font-size: 4.2rem;
  font-weight: 300;
  margin-bottom: 8rem;
  text-align: center;
}
.gybox-section .gybox-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.gybox-section .gybox-item {
  background-color: #F7F7F7;
  padding: 4rem 3.2rem;
  border-radius: 0.8rem;
  flex: 1;
  width: 100%;
  min-width: 280px;
}
.gybox-section .gybox-item .gybox-item-title {
  font-size: 4.5rem;
  color: #38B281;
  font-weight: 300;
  text-align: center;
  margin-bottom: 1.4rem;
}
.gybox-section .gybox-item .gybox-item-subtitle {
  text-align: center;
  font-size: 2.2rem;
  font-weight: normal;
  margin-bottom: 1rem;
}
.gybox-section .gybox-item .gybox-desc {
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .gybox-section {
    margin-bottom: 10rem;
  }
  .gybox-section .gybox-title {
    font-size: 3.8rem;
    margin-bottom: 6rem;
  }
  .gybox-section .gybox-item {
    padding: 2.8rem 1.8rem;
  }
}
.page-section {
  margin-bottom: 13rem;
}
.page-section .page-title {
  font-size: 4.2rem;
  font-weight: 300;
  margin-bottom: 8rem;
  text-align: center;
}
.page-section .page-wrap {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}
.page-section .page-item {
  display: flex;
  align-items: center;
  gap: 6.4rem;
  margin-bottom: 8rem;
}
.page-section .page-item:first-child {
  margin-bottom: 0;
}
.page-section .page-text {
  width: 100%;
  max-width: 308px;
}
.page-section .page-text .page-item-title {
  font-size: 2.2rem;
  font-weight: normal;
  margin-bottom: 2.4rem;
}
.page-section .page-img {
  width: 100%;
  max-width: 600px;
}
.page-section .page-img img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .page-section {
    margin-bottom: 10rem;
  }
  .page-section .page-title {
    font-size: 3.8rem;
    margin-bottom: 6rem;
  }
  .page-section .page-item {
    gap: 4rem;
    margin-bottom: 6rem;
    flex-direction: column;
  }
}
.green-section {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 13rem;
}
.green-section .green-box-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4.8rem;
}
.green-section .green-box {
  border: 5px solid #CCECDF;
  border-radius: 1rem;
  padding: 6rem 4rem;
  max-width: 600px;
  width: 100%;
}
.green-section .green-box .green-title {
  font-size: 3.2rem;
  font-weight: 300;
  margin-bottom: 2.4rem;
  color: #38B281;
}

@media screen and (max-width: 768px) {
  .green-section {
    margin-bottom: 10rem;
  }
  .green-section .green-box-wrap {
    gap: 3rem;
    flex-direction: column;
    align-items: center;
  }
  .green-section .green-box {
    padding: 2.8rem 1.8rem;
  }
  .green-section .green-box .green-title {
    font-size: 2.4rem;
  }
}