@charset "utf-8";
picture {
  display: block;
}

@media screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}

[v-cloak] {
  display: none;
}

.contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.products__inner, .contents__inner, .mv__inner {
  max-width: 1200px;
  box-sizing: content-box;
  padding: 0px 20px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .products__inner, .contents__inner, .mv__inner {
    padding: 0px;
  }
}

.str-main {
  margin-bottom: 70px;
}

.anime-fade {
  transition: opacity 1.5s ease 0.5s;
  opacity: 0;
}

.anime-fade-r {
  transform: translateX(50px);
}

.anime-fade-l, .anime-fade-r {
  transition: opacity 1.5s ease, transform 1s ease;
  opacity: 0;
}

.anime-fade-l {
  transform: translateX(-50px);
}

.anime-fade-y {
  transition: opacity 1.5s ease, transform 1s ease;
  opacity: 0;
  transform: translateY(50px);
}

.anime-fade-l.js--anime__play, .anime-fade-r.js--anime__play, .anime-fade-y.js--anime__play, .anime-fade.js--anime__play {
  opacity: 1;
  transform: translate(0);
}

.mv {
  position: relative;
  background-image: url(../images/pc/index-bg-mv-gold.png), url(../images/pc/index-bg-mv.png);
  background-repeat: no-repeat;
  background-size: 100% 5vw, cover;
  background-position: bottom, center;
  border-bottom: 1.6666666667vw solid #006a4d;
}
@media screen and (min-width: 1201px) {
  .mv {
    background-image: url(../images/pc/index-bg-mv-gold.png), url(../images/pc/index-bg-mv.png);
    background-repeat: no-repeat;
    background-size: 100% 60px, cover;
    background-position: bottom, center;
    border-bottom: 20px solid #006a4d;
  }
}
@media screen and (min-width: 2001px) {
  .mv {
    background-image: url(../images/pc/index-bg-mv-gold.png), linear-gradient(90deg, rgb(194, 132, 0) 0%, rgb(194, 132, 0) 100%), url(../images/pc/index-bg-mv.png);
    background-repeat: no-repeat;
    background-size: 2000px 60px, 100% 60px, cover;
    background-position: center bottom, bottom, center;
  }
}
@media screen and (max-width: 768px) {
  .mv {
    background: unset;
    border-bottom: unset;
  }
}
.mv__inner {
  padding: 0;
}
@media screen and (max-width: 768px) {
  .mv__title img {
    width: 100%;
  }
}

.contents {
  padding: 70px 0 120px;
  background-image: url(../images/pc/index-bg-contents.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .contents {
    padding: 10.6666666667vw 0 17.3333333333vw;
    background-image: url(../images/sp/index-bg-contents.png);
  }
}
.contents__text {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .contents__text {
    width: 85.3333333333vw;
    margin: 0 auto;
  }
}
.contents__list {
  text-align: center;
  max-width: 820px;
  margin: 70px auto 100px;
}
@media screen and (max-width: 768px) {
  .contents__list {
    width: 84vw;
    margin: 14.6666666667vw auto 12vw;
  }
}
.contents__list .item {
  position: relative;
}
.contents__list .item__text {
  filter: drop-shadow(6px 6px 10px rgba(3, 32, 24, 0.25));
}
.contents__list .item__img {
  position: absolute;
}
.contents__list .item__note {
  position: absolute;
  top: 100%;
}
@media screen and (max-width: 768px) {
  .contents__list .item__note {
    position: static;
  }
}
.contents__list .item:nth-child(1) .item__img {
  width: 25.1219512195%;
  top: -27.7777777778%;
  left: 0;
}
@media screen and (max-width: 768px) {
  .contents__list .item:nth-child(1) .item__img {
    width: 22.2666666667vw;
    top: -2.6666666667vw;
  }
}
.contents__list .item:nth-child(2) .item__img {
  width: 19.3902439024%;
  top: -27.7777777778%;
  left: 3.4146341463%;
}
@media screen and (max-width: 768px) {
  .contents__list .item:nth-child(2) .item__img {
    width: 18.2666666667vw;
    top: -8vw;
    left: 2.4vw;
  }
}
.contents__list .item:nth-child(3) .item__img {
  width: 21.2195121951%;
  top: -14.4444444444%;
  left: 2.4390243902%;
}
@media screen and (max-width: 768px) {
  .contents__list .item:nth-child(3) .item__img {
    width: 20.1333333333vw;
    top: -8vw;
    left: 1.3333333333vw;
  }
}
.contents__list .item:nth-child(n+2) {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .contents__list .item:nth-child(n+2) {
    margin-top: 9.3333333333vw;
  }
}
.contents .about__title {
  width: 87.9659211928%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .contents .about__title {
    width: 87.3333333333vw;
  }
}
.contents .about__list {
  margin: -17.999% auto 0;
}
@media screen and (max-width: 768px) {
  .contents .about__list {
    margin: -13.0666666667vw auto 0;
  }
}
.contents .about__list .item {
  position: relative;
  z-index: 1;
  width: 82.1086261981%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item {
    width: 89.3333333333vw;
  }
}
.contents .about__list .item__img {
  align-self: center;
  position: absolute;
}
.contents .about__list .item__text {
  width: 65.4993514916%;
  left: 34.5006485084%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item__text {
    width: 100%;
    left: 0;
    text-align: center;
  }
}
.contents .about__list .item__text h3 {
  margin: 17.8217821782% 0 5.9405940594%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item__text h3 {
    margin: 0 auto 4vw;
  }
}
@media screen and (max-width: 768px) {
  .contents .about__list .item__text p {
    margin: 0 auto;
  }
}
.contents .about__list .item:nth-child(1) .item__img {
  width: 22.9571984436%;
  left: 8.3009079118%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(1) .item__img {
    width: 33.0666666667vw;
    left: 0;
    right: 0;
    top: 13.3333333333vw;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(1) .item__text {
    top: 60.6666666667vw;
  }
}
.contents .about__list .item:nth-child(1) .item__text h3 {
  width: 88.7128712871%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(1) .item__text h3 {
    width: 71.4666666667vw;
  }
}
.contents .about__list .item:nth-child(1) .item__text p {
  width: 72.0792079208%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(1) .item__text p {
    width: 68.6666666667vw;
  }
}
.contents .about__list .item:nth-child(2) .item__img {
  width: 18.2879377432%;
  left: 11.1543450065%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(2) .item__img {
    width: 20.6666666667vw;
    left: 0;
    right: 0;
    top: 14.8vw;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(2) .item__text {
    top: 57.3333333333vw;
  }
}
.contents .about__list .item:nth-child(2) .item__text h3 {
  width: 81.5841584158%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(2) .item__text h3 {
    margin-top: 2.6666666667vw;
    width: 70.9333333333vw;
  }
}
.contents .about__list .item:nth-child(2) .item__text p {
  width: 86.5346534653%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(2) .item__text p {
    width: 68.8vw;
  }
}
.contents .about__list .item:nth-child(3) .item__img {
  width: 20.6225680934%;
  left: 9.597924773%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(3) .item__img {
    width: 23.2vw;
    left: 0;
    right: 0;
    top: 12vw;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(3) .item__text {
    top: 57.3333333333vw;
  }
}
.contents .about__list .item:nth-child(3) .item__text h3 {
  width: 60.198019802%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(3) .item__text h3 {
    width: 48.2666666667vw;
  }
}
.contents .about__list .item:nth-child(3) .item__text p {
  width: 86.5346534653%;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(3) .item__text p {
    width: 72.5333333333vw;
  }
}
.contents .about__list .item:nth-child(n+2) {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .contents .about__list .item:nth-child(n+2) {
    margin-top: 8.6666666667vw;
  }
}

.products {
  position: relative;
  background-image: url(../images/pc/index-bg-products.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .products {
    background-image: url(../images/sp/index-bg-products.png);
  }
}
.products__inner {
  max-width: 960px;
  padding: 70px 0 120px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .products__inner {
    padding: 10.6666666667vw 0 17.3333333333vw;
    display: block;
  }
}
.products__title {
  background-image: url(../images/pc/index-bg-ttl.png);
  background-repeat: no-repeat;
  background-size: auto 92px;
  background-position: center bottom;
  text-align: center;
  height: 92px;
}
@media screen and (min-width: 2001px) {
  .products__title {
    background-size: 100% 92px;
  }
}
@media screen and (max-width: 768px) {
  .products__title {
    background: unset;
    height: auto;
  }
}
.products__title span {
  display: block;
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .products__title span {
    padding-top: 0;
  }
}
.products__img {
  width: 37.9166666667%;
}
@media screen and (max-width: 768px) {
  .products__img {
    width: 56.1333333333vw;
    margin: 0 auto;
  }
}
.products__text {
  width: 39.4791666667%;
  margin-left: 9.375%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .products__text {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6.1333333333vw;
    width: 76vw;
    align-items: flex-start;
  }
}
.products__text p {
  width: 98.6807387863%;
}
@media screen and (max-width: 768px) {
  .products__text p {
    width: 62.2666666667vw;
  }
}
.products__text a {
  display: block;
  margin-top: 13.1926121372%;
}
@media screen and (max-width: 768px) {
  .products__text a {
    margin-top: 10.6666666667vw;
  }
}