@media screen and (max-width: 767px) {
  .hero {
    background: url(../images/top-load/sp/hero-bg.png) top center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    background: url(../images/top-load/hero-bg.png) bottom center/192rem;
  }
}
@media screen and (max-width: 767px) {
  .hero .hero-content {
    background: url(../images/top-load/sp/hero-content.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content {
    background: url(../images/top-load/hero-content.png) no-repeat center/contain;
  }
}
.hero .hero-content .hero-txt-top {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-top {
    background: url(../images/top-load/sp/hero-txt-top.png) top center/contain no-repeat;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-top {
    background: url(../images/top-load/hero-txt-top.png) no-repeat center/contain;
    font-weight: 900;
  }
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-mid {
    background: url(../images/top-load/sp/hero-txt-mid.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-mid {
    background: url(../images/top-load/hero-txt-mid.png) no-repeat center/contain;
  }
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent {
    background: url(../images/top-load/sp/hero-percent-1.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent {
    background: url(../images/top-load/hero-percent-1.png) no-repeat center/contain;
  }
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent-2 {
    background-image: url(../images/top-load/sp/hero-percent-2.png);
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent-2 {
    background-image: url(../images/top-load/hero-percent-2.png);
  }
}
.hero .hero-content .hero-txt-bot {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-bot {
    background: url(../images/top-load/sp/hero-txt-bot.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-bot {
    background: url(../images/top-load/hero-txt-bot.png) no-repeat center/contain;
  }
}
.hero .hero-content .hero-group .item-1 {
  background-image: url(../images/top-load/hero-item-1.png);
}
.hero .hero-content .hero-group .item-2 {
  background-image: url(../images/top-load/hero-item-2.png);
}
.hero .hero-content .hero-group .item-3 {
  background-image: url(../images/top-load/hero-item-3.png);
}

@media screen and (max-width: 767px) {
  .product-section {
    background: url(../images/top/sp/product-section-bg.png) top center/auto 100%;
  }
}
@media screen and (min-width: 768px) {
  .product-section {
    background: url(../images/top/product-section-bg.png) top center/192rem;
  }
}
@media screen and (max-width: 767px) {
  .product-section .product-items {
    background: url(../images/top/sp/product-items.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items {
    background: url(../images/top/product-items.png) no-repeat center/contain;
  }
}
.product-section .product-items .tags .tag-1 {
  background: url(../images/top/product-tag-1.png) center/contain no-repeat;
}
.product-section .product-items .tags .tag-2 {
  background: url(../images/top/product-tag-2.png) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .tags .tag-2 {
    background: url(../images/top/sp/product-tag-2.png) center/contain no-repeat;
  }
}
.product-section .product-items .tags .tag-3 {
  background: url(../images/top/product-tag-3.png) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .product-section .product-content {
    background: url(../images/top/sp/product-content.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-content {
    background: url(../images/top/product-content.png) no-repeat center/contain;
  }
}
.product-section .dec-1 {
  background: url(../images/top/product-d1.png) center/contain no-repeat;
}
.product-section .dec-2 {
  background: url(../images/top/product-d2.png) center/contain no-repeat;
}
.product-section .dec-3 {
  background: url(../images/top/product-d3.png) center/contain no-repeat;
}
.product-section .dec-4 {
  background: url(../images/top/product-d4.png) center/contain no-repeat;
}
.product-section .dec-5 {
  background: url(../images/top/product-d5.png) center/contain no-repeat;
}

@media screen and (max-width: 767px) {
  .reason-section {
    background: url(../images/top/sp/reason-section-bg.png) top center/auto 100%;
  }
}
@media screen and (min-width: 768px) {
  .reason-section {
    background: url(../images/top/reason-section-bg.png) top center/192rem;
  }
}
.reason-section .reason-wrap .reason {
  background: url(../images/top/reason-item-bg.png) top center/contain no-repeat;
}
.reason-section .reason-wrap .reason-1 {
  --reason-item: url(../images/top/reason-item-1.png);
}
.reason-section .reason-wrap .reason-2 {
  --reason-item: url(../images/top/reason-item-2.png);
}
.reason-section .reason-wrap .reason-2:after {
  background: url(../images/top/reason-2-d.png) center/contain no-repeat;
}
.reason-section .reason-wrap .reason-3 {
  --reason-item: url(../images/top/reason-item-3.png);
}
@media screen and (max-width: 767px) {
  .reason-section .reason-content {
    background: url(../images/top/sp/reason-content.png) no-repeat center/contain;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-content {
    background: url(../images/top/reason-content.png) no-repeat center/contain;
  }
}
.reason-section .dec-1 {
  background: url(../images/top/reason-d1.png) center/contain no-repeat;
}
.reason-section .dec-2 {
  background: url(../images/top/reason-d2.png) center/contain no-repeat;
}
.reason-section .dec-3 {
  background: url(../images/top/reason-d3.png) center/contain no-repeat;
}
.reason-section .dec-4 {
  background: url(../images/top/reason-d4.png) center/contain no-repeat;
}
.reason-section .dec-5 {
  background: url(../images/top/reason-d5.png) center/contain no-repeat;
}

/* Voice Section */
@media screen and (max-width: 767px) {
  .voice-section {
    background: url(../images/top/sp/voice-section-bg.png) top center/auto 100%;
  }
}
@media screen and (min-width: 768px) {
  .voice-section {
    background: url(../images/top/voice-section-bg.png) top center/192rem;
  }
}
.voice-section .section-title h2::before {
  background: url(../images/top/voice-section-title.png) center/contain no-repeat;
}
.voice-section .voice-wrap .voice::before {
  background-image: url(../images/top/voice-ghim-red.png);
}
.voice-section .voice-wrap .voice::after {
  background-image: url(../images/top/voice-ghim-blue.png);
}
.voice-section .voice-wrap .voice .voice-subttl::before {
  background: url(../images/top/voice1.png) center/contain no-repeat;
}
.voice-section .voice-wrap .voice .voice-subttl.voice-img-2::before {
  background-image: url(../images/top/voice2.png);
}

@media screen and (max-width: 767px) {
  .flow-section {
    background: url(../images/top/sp/flow-section-bg.png) top center/auto 100%;
  }
}
@media screen and (min-width: 768px) {
  .flow-section {
    background: url(../images/top/flow-section-bg.png) top center/300rem auto;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top::before {
  content: "";
  background: url(../images/top/flow-hand.png) center/contain no-repeat;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-11 {
  --flow-img: url(../images/top/flow-11.png);
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-12 {
  --flow-img: url(../images/top/flow-12.png);
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-21 {
  --flow-img: url(../images/top/flow-21.png);
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-22 {
  --flow-img: url(../images/top/flow-22.png);
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-1 {
    --flow-item: url(../images/top/sp/flow-item-1.png);
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-1 {
    --flow-item: url(../images/top/flow-item-1.png);
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-2 {
    --flow-item: url(../images/top/sp/flow-item-2.png);
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-2 {
    --flow-item: url(../images/top/flow-item-2.png);
  }
}
.flow-section .dec-1 {
  background: url(../images/top/flow-d1.png) center/contain no-repeat;
}
.flow-section .dec-2 {
  background: url(../images/top/flow-d2.png) center/contain no-repeat;
}
.flow-section .dec-3 {
  background: url(../images/top/flow-d3.png) center/contain no-repeat;
}
.flow-section .dec-4 {
  background: url(../images/top/flow-d4.png) center/contain no-repeat;
}
.flow-section .dec-5 {
  background: url(../images/top/flow-d5.png) center/contain no-repeat;
}
.flow-section .dec-6 {
  background: url(../images/top/flow-d6.png) center/contain no-repeat;
}
.flow-section .dec-7 {
  background: url(../images/top/flow-d7.png) center/contain no-repeat;
}

@media screen and (max-width: 767px) {
  .faq-section {
    background: url(../images/top/sp/faq-section-bg.png) top center/100% auto;
  }
}
@media screen and (min-width: 768px) {
  .faq-section {
    background: url(../images/top/faq-section-bg.png) top center/192rem;
  }
}
.faq-section .section-title h2::before {
  background: url(../images/top/faq-section-title.png) center/contain no-repeat;
}