.section {
  position: relative;
}
@media screen and (max-width: 767px) {
  .section {
    width: 100dvw;
    overflow: hidden;
    margin-top: -5rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .section {
    margin-top: -8rem;
    padding-top: 10rem;
    padding-bottom: 18rem;
  }
}

.dec {
  position: absolute;
}

.hero {
  position: relative;
}
@media screen and (max-width: 767px) {
  .hero {
    background: url(../images/top/sp/hero-bg.png) top center/contain;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    background: url(../images/top/hero-bg.png) bottom center/192rem;
  }
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .hero .hero-content {
    aspect-ratio: 375/755;
    background: url(../images/top/sp/hero-content.png) no-repeat center/contain;
    padding-top: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content {
    aspect-ratio: 1920/1128;
    background: url(../images/top/hero-content.png) no-repeat center/contain;
    max-width: 1920px;
    padding-top: 3.6458333333vw;
    transform: translateY(-5%);
  }
}
.hero .hero-content .hero-txt-top {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-top {
    aspect-ratio: 370/205;
    width: 37rem;
    background: url(../images/top/sp/hero-txt-top.png) top center/contain no-repeat;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-top {
    aspect-ratio: 1052/304;
    width: 54.7916666667vw;
    max-width: 1052px;
    transform: translateX(-3%);
    background: url(../images/top/hero-txt-top.png) no-repeat center/contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.0833333333vw;
    font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
    font-weight: 900;
  }
}
.hero .hero-content .hero-txt-mid {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-mid {
    background: url(../images/top/sp/hero-txt-mid.png) no-repeat center/contain;
    aspect-ratio: 375/187;
    width: 37.5rem;
    margin-top: -3rem;
    margin-bottom: -1rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-mid {
    background: url(../images/top/hero-txt-mid.png) no-repeat center/contain;
    aspect-ratio: 1462/231;
    margin-top: -1.4583333333vw;
    margin-bottom: -1.5625vw;
    width: 76.1458333333vw;
    max-width: 1462px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.2083333333vw;
    letter-spacing: 0.3em;
    font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
    font-weight: 900;
  }
}
.hero .hero-content .hero-percent {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent {
    gap: 5vw;
  }
}
.hero .hero-content .hero-percent .percent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #817161;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent {
    background: url(../images/top/sp/hero-percent-1.png) no-repeat center/contain;
    aspect-ratio: 159/85;
    padding-left: 1.5rem;
    width: 15.8rem;
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent {
    background: url(../images/top/hero-percent-1.png) no-repeat center/contain;
    aspect-ratio: 455/174;
    padding-left: 2.0833333333vw;
    padding-right: 5.2083333333vw;
    width: 23.6979166667vw;
    font-size: min(4rem, 2.0833333333vw);
    max-width: 455px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent-2 {
    background-image: url(../images/top/sp/hero-percent-2.png);
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent-2 {
    background-image: url(../images/top/hero-percent-2.png);
  }
}
.hero .hero-content .hero-percent .percent span {
  color: #ec7371;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent span {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent span {
    font-size: min(4rem, 2.0833333333vw);
  }
}
.hero .hero-content .hero-percent .percent strong {
  -webkit-backface-visibility: hidden;
  color: #fff;
  filter: drop-shadow(-0.2rem 0.2rem 0 #b15211);
  letter-spacing: 0.18em;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-percent .percent strong {
    padding-left: 1rem;
    font-size: 2rem;
    text-shadow: -2px -1px 0 #db8950, -2px 0px 0 #db8950, -2px 1px 0 #db8950, -1px -2px 0 #db8950, -1px -1px 0 #db8950, -1px 0px 0 #db8950, -1px 1px 0 #db8950, -1px 2px 0 #db8950, 0px -2px 0 #db8950, 0px -1px 0 #db8950, 0px 0px 0 #db8950, 0px 1px 0 #db8950, 0px 2px 0 #db8950, 1px -2px 0 #db8950, 1px -1px 0 #db8950, 1px 0px 0 #db8950, 1px 1px 0 #db8950, 1px 2px 0 #db8950, 2px -1px 0 #db8950, 2px 0px 0 #db8950, 2px 1px 0 #db8950;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-percent .percent strong {
    padding-left: 0.2604166667vw;
    font-size: 3.3333333333vw;
    font-size: min(6.4rem, 3.3333333333vw);
    text-shadow: -4px -1px 0 #db8950, -4px 0px 0 #db8950, -4px 1px 0 #db8950, -3px -3px 0 #db8950, -3px -2px 0 #db8950, -3px -1px 0 #db8950, -3px 0px 0 #db8950, -3px 1px 0 #db8950, -3px 2px 0 #db8950, -3px 3px 0 #db8950, -2px -3px 0 #db8950, -2px -2px 0 #db8950, -2px -1px 0 #db8950, -2px 0px 0 #db8950, -2px 1px 0 #db8950, -2px 2px 0 #db8950, -2px 3px 0 #db8950, -1px -4px 0 #db8950, -1px -3px 0 #db8950, -1px -2px 0 #db8950, -1px -1px 0 #db8950, -1px 0px 0 #db8950, -1px 1px 0 #db8950, -1px 2px 0 #db8950, -1px 3px 0 #db8950, -1px 4px 0 #db8950, 0px -4px 0 #db8950, 0px -3px 0 #db8950, 0px -2px 0 #db8950, 0px -1px 0 #db8950, 0px 0px 0 #db8950, 0px 1px 0 #db8950, 0px 2px 0 #db8950, 0px 3px 0 #db8950, 0px 4px 0 #db8950, 1px -4px 0 #db8950, 1px -3px 0 #db8950, 1px -2px 0 #db8950, 1px -1px 0 #db8950, 1px 0px 0 #db8950, 1px 1px 0 #db8950, 1px 2px 0 #db8950, 1px 3px 0 #db8950, 1px 4px 0 #db8950, 2px -3px 0 #db8950, 2px -2px 0 #db8950, 2px -1px 0 #db8950, 2px 0px 0 #db8950, 2px 1px 0 #db8950, 2px 2px 0 #db8950, 2px 3px 0 #db8950, 3px -3px 0 #db8950, 3px -2px 0 #db8950, 3px -1px 0 #db8950, 3px 0px 0 #db8950, 3px 1px 0 #db8950, 3px 2px 0 #db8950, 3px 3px 0 #db8950, 4px -1px 0 #db8950, 4px 0px 0 #db8950, 4px 1px 0 #db8950;
  }
}
.hero .hero-content .hero-txt-bot {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-txt-bot {
    aspect-ratio: 326/71;
    background: url(../images/top/sp/hero-txt-bot.png) no-repeat center/contain;
    width: 32rem;
    transform: translateX(-1%);
    margin-top: 0.5rem;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-txt-bot {
    background: url(../images/top/hero-txt-bot.png) no-repeat center/contain;
    aspect-ratio: 1010/133;
    margin-bottom: -0.2604166667vw;
    width: 52.6041666667vw;
    max-width: 1010px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7708333333vw;
    font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
    font-weight: 900;
  }
}
.hero .hero-content .hero-group {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-group {
    flex-wrap: wrap;
    gap: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-group {
    gap: 2.8125vw;
  }
}
.hero .hero-content .hero-group .item {
  color: transparent;
  background: no-repeat center/contain;
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-group .item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    letter-spacing: 0.5em;
    font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
    font-weight: 900;
  }
}
.hero .hero-content .hero-group .item-1 {
  background-image: url(../images/top/hero-item-1.png);
  aspect-ratio: 259/90;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-group .item-1 {
    width: 14rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-group .item-1 {
    width: 13.4895833333vw;
    max-width: 259px;
  }
}
.hero .hero-content .hero-group .item-2 {
  background-image: url(../images/top/hero-item-2.png);
  aspect-ratio: 245/75;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-group .item-2 {
    width: 13.5rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-group .item-2 {
    width: 12.7604166667vw;
    max-width: 245px;
  }
}
.hero .hero-content .hero-group .item-3 {
  background-image: url(../images/top/hero-item-3.png);
  aspect-ratio: 315/77;
}
@media screen and (max-width: 767px) {
  .hero .hero-content .hero-group .item-3 {
    width: 17.2rem;
  }
}
@media screen and (min-width: 768px) {
  .hero .hero-content .hero-group .item-3 {
    width: 16.40625vw;
    max-width: 315px;
  }
}

.reason-section .section-title .en {
  color: #328e6e;
}
.reason-section .reason-wrap {
  display: flex;
  justify-content: center;
  gap: 4.8rem;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap {
    flex-direction: column;
    padding: 0 2rem;
    align-items: center;
  }
}
.reason-section .reason-wrap .reason {
  aspect-ratio: 450/396;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason {
    width: 30rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason {
    width: 45rem;
  }
}
.reason-section .reason-wrap .reason-2 {
  z-index: 3;
}
.reason-section .reason-wrap .reason-2:after {
  content: "";
  aspect-ratio: 21/31;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22rem;
  transform: translate(55%, 30%);
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason-2:after {
    width: 12rem;
    transform: translate(35%, 45%);
  }
}
.reason-section .reason-wrap .reason .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason .inner {
    gap: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason .inner {
    gap: 2.4rem;
  }
}
.reason-section .reason-wrap .reason .inner::before {
  content: "";
  aspect-ratio: 1;
  background: var(--reason-item) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason .inner::before {
    width: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason .inner::before {
    width: 10rem;
  }
}
.reason-section .reason-wrap .reason .inner .txt {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason .inner .txt {
    gap: 0.8rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason .inner .txt {
    gap: 1.2rem;
  }
}
.reason-section .reason-wrap .reason .inner .txt .stt {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  letter-spacing: 0.015em;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-wrap .reason .inner .txt .stt {
    font-size: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason .inner .txt .stt {
    font-size: 2.4rem;
  }
}
.reason-section .reason-wrap .reason .inner .txt p {
  font-family: "03SmartFontUI", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .reason-section .reason-wrap .reason .inner .txt p {
    font-size: 2rem;
  }
}
.reason-section .reason-content {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-content {
    aspect-ratio: 375/400;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-content {
    aspect-ratio: 1480/682;
    width: 148rem;
  }
}
@media screen and (max-width: 767px) {
  .reason-section .reason-content .content {
    padding-top: 2.5rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-content .content {
    padding-top: 17.5rem;
  }
}
.reason-section .reason-content .content .box {
  color: #fff;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-content .content .box {
    font-size: 1.4rem;
    aspect-ratio: 211/63;
    width: 21rem;
    transform: translateX(1rem);
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-content .content .box {
    font-size: 2rem;
    padding-top: 5.5rem;
    aspect-ratio: 660/180;
    width: 62rem;
    transform: translateX(4rem);
  }
}
.reason-section .reason-content .content .detail {
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .reason-section .reason-content .content .detail {
    font-size: 2rem;
    padding-top: 2rem;
    width: 20rem;
    margin-right: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .reason-section .reason-content .content .detail {
    font-size: 2.8rem;
    padding-top: 8rem;
    width: 68rem;
    transform: translateX(4rem);
  }
}
.reason-section .dec-1 {
  aspect-ratio: 130/122;
  width: 13rem;
  left: 6rem;
  top: 22rem;
}
.reason-section .dec-2 {
  aspect-ratio: 100/78;
  width: 10rem;
  left: 5.5rem;
  top: 46rem;
}
.reason-section .dec-3 {
  aspect-ratio: 100/78;
  width: 10rem;
  left: 5.5rem;
  top: 70rem;
}
.reason-section .dec-4 {
  aspect-ratio: 148/116;
  width: 14.8rem;
  right: 6.5rem;
  top: 50rem;
}
.reason-section .dec-5 {
  aspect-ratio: 140/401;
  width: 14rem;
  right: 0;
  top: 65rem;
}

@media screen and (max-width: 767px) {
  .product-section {
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .product-section {
    margin-top: -25rem;
    padding-top: 26rem;
    padding-bottom: 22rem;
  }
}
@media screen and (max-width: 767px) {
  .product-section .section-title {
    margin-bottom: 4rem;
  }
}
.product-section .product-items {
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .product-section .product-items {
    aspect-ratio: 375/725;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items {
    aspect-ratio: 1365/562;
    width: 136.5rem;
    margin-top: -8rem;
  }
}
.product-section .product-items .content {
  font-family: "03SmartFontUI", sans-serif;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .content {
    width: 27rem;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .content {
    width: 67rem;
    font-size: 2rem;
    transform: translateX(5rem) translateY(2rem);
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .tags {
    position: relative;
  }
}
.product-section .product-items .tags .tag {
  position: absolute;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: #634114;
  top: 0;
  left: 0;
  text-align: center;
  display: block;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .tags .tag {
    font-size: 1.2rem;
    padding-top: 2.5%;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .tags .tag {
    font-size: 1.6rem;
    padding-top: 1.2rem;
  }
}
.product-section .product-items .tags .tag-1 {
  aspect-ratio: 141/59;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .tags .tag-1 {
    width: 10rem;
    transform: translateX(1rem) translateY(10%);
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .tags .tag-1 {
    width: 14rem;
    transform: translateX(3rem) translateY(-21rem);
  }
}
.product-section .product-items .tags .tag-2 {
  aspect-ratio: 176/60;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .tags .tag-2 {
    width: 12rem;
    left: auto;
    right: 0;
    transform: translateX(-4rem) translateY(10rem);
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .tags .tag-2 {
    width: 17.6rem;
    transform: translateX(-7rem) translateY(-10rem);
  }
}
.product-section .product-items .tags .tag-3 {
  aspect-ratio: 140/57;
}
@media screen and (max-width: 767px) {
  .product-section .product-items .tags .tag-3 {
    width: 10rem;
    transform: translateX(14rem) translateY(10%);
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-items .tags .tag-3 {
    width: 14rem;
    transform: translateX(-3rem) translateY(6.5rem);
  }
}
.product-section .product-content {
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .product-section .product-content {
    margin-top: 2rem;
    width: 100%;
    aspect-ratio: 375/625;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-content {
    display: flex;
    align-items: center;
    aspect-ratio: 1299/551;
    width: 129.9rem;
  }
}
.product-section .product-content .detail {
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .product-section .product-content .detail {
    width: 32rem;
    padding-top: 11rem;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-content .detail {
    margin-top: 5rem;
    width: 82rem;
    transform: translateX(5rem);
  }
}
.product-section .product-content .detail .ttl {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  color: #c25700;
}
@media screen and (max-width: 767px) {
  .product-section .product-content .detail .ttl {
    font-size: 2rem;
    margin-bottom: 2.2rem;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-content .detail .ttl {
    font-size: 3.6rem;
    margin-bottom: 3.6rem;
    filter: drop-shadow(0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2509803922));
  }
}
.product-section .product-content .detail .ttl .green {
  color: #20892f;
}
.product-section .product-content .detail .action {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}
.product-section .product-content .detail .action .stt {
  color: #764a29;
}
@media screen and (min-width: 768px) {
  .product-section .product-content .detail .action .stt {
    font-size: 2rem;
  }
}
.product-section .product-content .detail .action .stt::before, .product-section .product-content .detail .action .stt:after {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 800;
}
.product-section .product-content .detail .action .stt::before {
  content: "\\";
}
.product-section .product-content .detail .action .stt::after {
  content: "/";
}
.product-section .product-content .detail .action .stt span {
  margin-left: 1.2rem;
  margin-right: 1.2rem;
}
.product-section .product-content .detail .action .button {
  text-align: center;
}
.product-section .product-content .detail .action .button a {
  display: inline-flex;
  background-color: #ffda03;
  color: #764a29;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .product-section .product-content .detail .action .button a {
    padding: 1.6rem 2.4rem;
    border-radius: 10rem;
    gap: 1rem;
  }
}
@media screen and (min-width: 768px) {
  .product-section .product-content .detail .action .button a {
    padding: 1.6rem 6.5rem;
    border-radius: 10rem;
    font-size: 2.4rem;
    gap: 2.4rem;
  }
}
.product-section .product-content .detail .action .button a:after {
  content: "";
  aspect-ratio: 13/21;
  background: url(../images/common/icon-arrow.svg) center/contain no-repeat;
  width: 1rem;
}
@media screen and (min-width: 768px) {
  .product-section .product-content .detail .action .button a:after {
    width: 1.3rem;
  }
}
.product-section .product-content .detail .action .button a:hover {
  animation: ripple 1.5s infinite;
}
.product-section .product-content .detail .action .note {
  color: #20892f;
}
@media screen and (max-width: 767px) {
  .product-section .product-content .detail .action .note {
    font-size: 1.2rem;
  }
}
.product-section .dec-1 {
  aspect-ratio: 255/241;
  width: 25.5rem;
  left: 0;
  top: -5rem;
}
.product-section .dec-2 {
  aspect-ratio: 125/222;
  width: 12.5rem;
  left: 0;
  top: 95rem;
}
.product-section .dec-3 {
  aspect-ratio: 149/139;
  width: 14.9rem;
  left: 6.5rem;
  top: 123rem;
}
.product-section .dec-4 {
  aspect-ratio: 115/124;
  width: 11.5rem;
  right: 5rem;
  top: 100rem;
}
.product-section .dec-5 {
  aspect-ratio: 323/361;
  width: 32.3rem;
  right: 1rem;
  bottom: 7rem;
}

@media screen and (max-width: 767px) {
  .flow-section {
    padding-bottom: 12rem;
    margin-top: -6rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section {
    margin-top: -15rem;
    padding-top: 15rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .section-title {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .section-title {
    margin-bottom: -9rem;
  }
}
.flow-section .section-title .en {
  color: #328e6e;
}
.flow-section .flow-wrap {
  background-color: #f8f8f0;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap {
    padding: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap {
    padding: 7.2rem 3.6rem 3.6rem 3.6rem;
  }
}
.flow-section .flow-wrap .flow-inner {
  background-color: #f5f1e3;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner {
    padding: 1.6rem 1.2rem 1.2rem 1.2rem;
    gap: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner {
    padding: 7.2rem 3.6rem 3.6rem 3.6rem;
    gap: 3.6rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow {
  width: 100%;
  background: var(--flow-item) center/contain no-repeat;
  position: relative;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow {
    background-position: top center;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content {
    padding: 2.9rem 2.4rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content {
    width: 68rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt {
  text-align: center;
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt {
    font-size: 2.8rem;
    margin-bottom: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt .lg {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt .lg {
    font-size: 3.6rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt .lg span {
  letter-spacing: 0.15em;
  color: #ffff00;
  text-shadow: -3px -1px 0 #267639, -3px 0px 0 #267639, -3px 1px 0 #267639, -2px -2px 0 #267639, -2px -1px 0 #267639, -2px 0px 0 #267639, -2px 1px 0 #267639, -2px 2px 0 #267639, -1px -3px 0 #267639, -1px -2px 0 #267639, -1px -1px 0 #267639, -1px 0px 0 #267639, -1px 1px 0 #267639, -1px 2px 0 #267639, -1px 3px 0 #267639, 0px -3px 0 #267639, 0px -2px 0 #267639, 0px -1px 0 #267639, 0px 0px 0 #267639, 0px 1px 0 #267639, 0px 2px 0 #267639, 0px 3px 0 #267639, 1px -3px 0 #267639, 1px -2px 0 #267639, 1px -1px 0 #267639, 1px 0px 0 #267639, 1px 1px 0 #267639, 1px 2px 0 #267639, 1px 3px 0 #267639, 2px -2px 0 #267639, 2px -1px 0 #267639, 2px 0px 0 #267639, 2px 1px 0 #267639, 2px 2px 0 #267639, 3px -1px 0 #267639, 3px 0px 0 #267639, 3px 1px 0 #267639;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-tt strong {
  -webkit-backface-visibility: hidden;
  color: #fff;
  padding-left: 0.3em;
  text-shadow: -2px -1px 0 #db8950, -2px 0px 0 #db8950, -2px 1px 0 #db8950, -1px -2px 0 #db8950, -1px -1px 0 #db8950, -1px 0px 0 #db8950, -1px 1px 0 #db8950, -1px 2px 0 #db8950, 0px -2px 0 #db8950, 0px -1px 0 #db8950, 0px 0px 0 #db8950, 0px 1px 0 #db8950, 0px 2px 0 #db8950, 1px -2px 0 #db8950, 1px -1px 0 #db8950, 1px 0px 0 #db8950, 1px 1px 0 #db8950, 1px 2px 0 #db8950, 2px -1px 0 #db8950, 2px 0px 0 #db8950, 2px 1px 0 #db8950;
  filter: drop-shadow(-0.2rem 0.2rem 0 #b15211);
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top {
    padding-bottom: 2.4rem;
    gap: 12rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top::before {
  content: "";
  aspect-ratio: 1;
  order: 2;
  width: 3rem;
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top::before {
    width: 7.2rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item span {
    font-size: 1.3rem;
    text-align: center;
    display: inline-block;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  margin: 0 auto;
  width: 10rem;
  background: var(--flow-img) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item::before {
    width: 4.5rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-11 {
  order: 1;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-12 {
  order: 3;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-21 {
  order: 1;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-top .item-22 {
  order: 3;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-box {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-box {
    position: absolute;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps {
    margin-top: 18rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps::before {
  content: "";
  background: url(../images/top/border-dash.svg) center/contain repeat-x;
  width: 100%;
  height: 1px;
  display: block;
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn {
  padding-top: 2.4rem;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn {
    gap: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn {
    gap: 3.6rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn .step {
    font-size: 1.4rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn .step .step-tt {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  letter-spacing: 0.015em;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn .step .step-tt {
    margin-bottom: 0.4rem;
    font-size: 1.62rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow .flow-content .flow-steps .inn .step .step-tt {
    margin-bottom: 0.8rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-1 {
    aspect-ratio: 295/945;
    width: 29.5rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-1 {
    aspect-ratio: 1121/691;
    width: 112.1rem;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-1 .flow-content {
    margin-top: 6.5rem;
    margin-left: 7.5rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow-1 .flow-box {
  aspect-ratio: 24/15;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-1 .flow-box {
    font-size: 25rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-1 .flow-box {
    top: 10.5rem;
    right: 10.5rem;
    width: 24rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-2 {
    aspect-ratio: 295/944;
    width: 29.5rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-2 {
    aspect-ratio: 1118/690;
    width: 111.8rem;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .flow-section .flow-wrap .flow-inner .flow-2 .flow-content {
    width: 71rem;
    margin-top: 6.5rem;
    margin-left: auto;
    margin-right: 5rem;
  }
}
.flow-section .flow-wrap .flow-inner .flow-2 .flow-box {
  top: 9rem;
  left: 10rem;
  aspect-ratio: 24/15;
  width: 24rem;
}
@media screen and (max-width: 767px) {
  .flow-section .flow-wrap .flow-inner .flow-2 .flow-box {
    aspect-ratio: 24/14;
  }
}
.flow-section .dec-1 {
  aspect-ratio: 99/233;
  width: 9.9rem;
  left: 20rem;
  top: -10rem;
}
.flow-section .dec-2 {
  aspect-ratio: 174/230;
  width: 17.4rem;
  left: 5.5rem;
  top: 25rem;
}
.flow-section .dec-3 {
  aspect-ratio: 115/124;
  width: 11.5rem;
  left: 15rem;
  top: 100rem;
}
.flow-section .dec-4 {
  aspect-ratio: 66/52;
  width: 6.6rem;
  left: 6rem;
  top: 130rem;
}
.flow-section .dec-5 {
  aspect-ratio: 206/224;
  width: 20.6rem;
  left: 4rem;
  top: 145rem;
}
.flow-section .dec-6 {
  aspect-ratio: 136/127;
  width: 13.6rem;
  right: 8rem;
  top: 14rem;
}
.flow-section .dec-7 {
  aspect-ratio: 172/667;
  width: 17.2rem;
  right: 0;
  top: 20em;
}

/* Voice Section */
@media screen and (max-width: 767px) {
  .voice-section {
    padding-bottom: 12rem;
    margin-top: -6rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section {
    padding-bottom: 23rem;
    margin-top: -31rem;
    padding-top: 27rem;
  }
}
.voice-section .section-title {
  margin-bottom: 8rem;
}
.voice-section .section-title h2 {
  display: inline-block;
  position: relative;
}
.voice-section .section-title h2::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-40%) translateX(80%);
  width: 23.6rem;
  aspect-ratio: 236/355;
}
@media screen and (max-width: 767px) {
  .voice-section .section-title h2::before {
    width: 10rem;
  }
}
.voice-section .voice-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap {
    flex-wrap: wrap;
    gap: 6rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap {
    gap: 12rem;
  }
}
.voice-section .voice-wrap .voice {
  background-color: #fff;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  filter: drop-shadow(0.6rem 0.6rem 0 rgba(0, 0, 0, 0.2509803922));
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap .voice {
    width: 31rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice {
    width: 57rem;
  }
}
.voice-section .voice-wrap .voice::before, .voice-section .voice-wrap .voice::after {
  content: "";
  position: absolute;
  top: 0;
  aspect-ratio: 1;
  background: center/contain no-repeat;
}
.voice-section .voice-wrap .voice::before {
  left: 0;
  transform: translateY(-50%) translateX(-50%);
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap .voice::before {
    width: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice::before {
    width: 8rem;
  }
}
.voice-section .voice-wrap .voice::after {
  right: 0;
  transform: translateY(-50%) translateX(50%);
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap .voice::after {
    width: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice::after {
    width: 8.5rem;
  }
}
.voice-section .voice-wrap .voice .voice-ttl,
.voice-section .voice-wrap .voice .voice-subttl {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  letter-spacing: 0.15em;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice .voice-ttl,
  .voice-section .voice-wrap .voice .voice-subttl {
    font-size: 2rem;
  }
}
.voice-section .voice-wrap .voice .voice-ttl {
  text-align: center;
}
.voice-section .voice-wrap .voice .voice-subttl {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap .voice .voice-subttl {
    gap: 1rem;
  }
}
.voice-section .voice-wrap .voice .voice-subttl::before {
  content: "";
  width: 5rem;
  aspect-ratio: 1;
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice .voice-subttl::before {
    width: 10rem;
  }
}
.voice-section .voice-wrap .voice .voice-detail {
  background-color: #e1eebc;
  border: 1px dashed #328e6e;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
}
@media screen and (max-width: 767px) {
  .voice-section .voice-wrap .voice .voice-detail {
    font-size: 1.4rem;
    gap: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice .voice-detail {
    padding: 2.4rem;
    gap: 3rem;
  }
}
.voice-section .voice-wrap .voice-1 {
  transform: rotate(4deg);
}
.voice-section .voice-wrap .voice-2 {
  transform: rotate(-4deg);
}
@media screen and (min-width: 768px) {
  .voice-section .voice-wrap .voice-2 {
    transform: rotate(-11deg);
  }
}

/* FAQ Section */
@media screen and (max-width: 767px) {
  .faq-section {
    padding-bottom: 8rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section {
    margin-top: -14rem;
    padding-top: 18rem;
    padding-bottom: 24rem;
  }
}
.faq-section .section-title h2 {
  display: inline-block;
  position: relative;
}
.faq-section .section-title h2::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-80%);
  width: 26rem;
  aspect-ratio: 26/39;
}
@media screen and (max-width: 767px) {
  .faq-section .section-title h2::before {
    width: 8rem;
  }
}
.faq-section .faq-wrap {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap {
    gap: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap {
    gap: 3.6rem;
  }
}
.faq-section .faq-wrap .faq {
  overflow: hidden;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq {
    padding: 1rem;
    border-radius: 1.4rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap .faq {
    padding: 2.4rem;
    border-radius: 2.4rem;
  }
}
.faq-section .faq-wrap .faq:nth-child(1) .inner {
  background-color: #f5f1e3;
}
.faq-section .faq-wrap .faq:nth-child(2) .inner {
  background-color: #fff3ca;
}
.faq-section .faq-wrap .faq:nth-child(3) .inner {
  background-color: #f6e194;
}
.faq-section .faq-wrap .faq:nth-child(4) .inner {
  background-color: #ffdd66;
}
.faq-section .faq-wrap .faq .inner {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq .inner {
    padding: 1.2rem;
    border-radius: 1rem;
    gap: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap .faq .inner {
    padding: 3.6rem;
    border-radius: 1.5rem;
    gap: 2.4rem;
  }
}
.faq-section .faq-wrap .faq .inner::before {
  content: "";
  order: 2;
  width: 100%;
  height: 1px;
  background: url(../images/top/border-dash.svg) bottom left/auto repeat-x;
}
.faq-section .faq-wrap .faq .inner .question {
  font-family: "Kotonode Muryou-Shiyou Kw-N", sans-serif;
  font-weight: 900;
  order: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq .inner .question {
    gap: 1rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap .faq .inner .question {
    gap: 3.6rem;
  }
}
.faq-section .faq-wrap .faq .inner .question .q-number {
  background-color: #42332d;
  color: white;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq .inner .question .q-number {
    font-size: 2rem;
    width: 4.5rem;
    height: 4.5rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap .faq .inner .question .q-number {
    font-size: 2.8rem;
    width: 6.5rem;
    height: 6.5rem;
  }
}
.faq-section .faq-wrap .faq .inner .question .q-text {
  color: #42332d;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq .inner .question .q-text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 768px) {
  .faq-section .faq-wrap .faq .inner .question .q-text {
    font-size: 2.8rem;
  }
}
.faq-section .faq-wrap .faq .inner .answer {
  order: 3;
  line-height: 1.6;
  font-family: "03SmartFontUI", sans-serif;
  font-size: 1.6rem;
  color: #42332d;
}
@media screen and (max-width: 767px) {
  .faq-section .faq-wrap .faq .inner .answer {
    font-size: 1.4rem;
  }
}
.faq-section .faq-wrap .faq .inner .answer ul {
  margin: 0;
  list-style: none;
}
.faq-section .faq-wrap .faq .inner .answer ul li {
  text-indent: -1em;
  padding-left: 1em;
}