@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(body) {
  margin: 0;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  line-height: 1;
  background-color: #203080;
  background-image: linear-gradient(to right, #152054 0%, #203080 50%, #152054 100%);
}

:where(ul, ol, li) {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

:where(img) {
  max-width: 100%;
  vertical-align: bottom;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

.letroUgcsetContainer[data-contents=letro-ugcset] .letroUgcsetContents .letroUgcsetPostPhoto:before {
  display: none;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-loop {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.l-header {
  background: #fff;
}
.l-header__inner {
  width: calc(100% - 30px);
  max-width: 100%;
  padding: 10px 0;
  margin: 0 auto;
}
.l-header__logo {
  display: block;
  width: 250px;
  max-width: 100%;
}
@media screen and (width <= 834px) {
  .l-header__logo {
    width: 140px;
  }
}

.l-footer {
  padding: 35px 0 40px;
  background: #fff;
}
.l-footer__menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 880px;
  max-width: 100%;
  margin: 0 auto 40px;
}
.l-footer__menu {
  font-size: 20px;
  line-height: 1.8;
}
@media screen and (width <= 834px) {
  .l-footer__menu {
    font-size: 14px;
  }
}
.l-footer__menu::after {
  content: "｜";
}
.l-footer__logo {
  width: 207px;
  margin: 0 auto 30px;
}
@media screen and (width <= 834px) {
  .l-footer__logo {
    width: 140px;
  }
}
.l-footer__copy {
  display: block;
  margin: 13px auto auto;
  font-size: 18px;
  line-height: 2.78rem;
  text-align: center;
}
@media screen and (width <= 834px) {
  .l-footer__copy {
    font-size: 10px;
  }
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background-color: #c00;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}
@media screen and (width <= 834px) {
  .back-to-top {
    right: 10px;
    bottom: 10px;
    width: 45px;
    height: 45px;
  }
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top::after {
  display: block;
  width: 0;
  height: 0;
  content: "";
  border-right: 10px solid transparent;
  border-bottom: 12px solid #fff;
  border-left: 10px solid transparent;
}

.l-fv {
  position: relative;
}
.l-fv__inner {
  position: relative;
  height: 50vw;
  overflow: hidden;
  background-image: radial-gradient(circle, rgb(0, 84, 56) 25%, rgb(0, 38, 26) 75%);
  background-image: radial-gradient(circle, rgb(0, 84, 56), rgb(51, 118, 96) 60%, rgb(77, 143, 119) 80%, rgb(255, 255, 255));
  background: rgb(0, 84, 56);
  -webkit-mask-image: url("../img/fv_bg_pc.webp");
          mask-image: url("../img/fv_bg_pc.webp");
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center top;
          mask-position: center top;
  -webkit-mask-size: cover;
          mask-size: cover;
}
@media screen and (width <= 834px) {
  .l-fv__inner {
    height: 146.6666666667vw;
    -webkit-mask-image: url("../img/fv_bg_sp.webp");
            mask-image: url("../img/fv_bg_sp.webp");
  }
}
.l-fv__bg-image {
  position: absolute;
  top: -2.28vw;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (width <= 834px) {
  .l-fv__bg-image {
    top: -6.6666666667vw;
    width: 109.3333333333vw;
    left: -4.6666666667vw;
  }
}
.l-fv__bg-image picture {
  animation: fade-loop 10s infinite;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.l-fv__bg-image picture:nth-child(1) {
  animation-delay: 0s;
}
.l-fv__bg-image picture:nth-child(2) {
  animation-delay: 1s;
}
.l-fv__bg-image picture:nth-child(3) {
  animation-delay: 2s;
}
.l-fv__bg-image picture:nth-child(4) {
  animation-delay: 5s;
}
.l-fv__bg-image picture:nth-child(5) {
  animation-delay: 6s;
}
.l-fv__bg-image picture:nth-child(6) {
  animation-delay: 7s;
}
.l-fv__lead {
  position: relative;
  padding-top: 2.28vw;
  text-align: center;
}
@media screen and (width <= 834px) {
  .l-fv__lead {
    padding-top: 42.3333333333vw;
  }
}
.l-fv__lead img {
  width: 49.5vw;
}
@media screen and (width <= 834px) {
  .l-fv__lead img {
    width: 58vw;
  }
}
.l-fv__title {
  text-align: center;
}
.l-fv__title img {
  width: 36.96vw;
  margin: auto;
  opacity: 0;
  animation: fade-in 1s forwards;
  animation-delay: 3s;
}
@media screen and (width <= 834px) {
  .l-fv__title img {
    width: 75.8666666667vw;
  }
}
.l-fv__foot {
  position: absolute;
  bottom: 3.35vw;
  left: 0;
  z-index: 3;
  width: 100%;
  text-align: center;
  animation: fade-in 1s forwards;
  animation-delay: 4s;
  opacity: 0;
}
.l-fv__foot img {
  width: 76vw;
  margin: auto;
}
@media screen and (width <= 834px) {
  .l-fv__foot {
    display: none;
  }
}
.l-fv__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transform: translateY(7%);
}
@media screen and (width <= 834px) {
  .l-fv__bottom {
    transform: translateY(19%);
  }
}
.l-fv__bottom img {
  width: 100%;
}

.container {
  width: 1800px;
  max-width: calc(100% - 18.18vw);
  margin: 0 auto;
}
@media screen and (width <= 834px) {
  .container {
    max-width: calc(100% - 13.3333333333vw);
  }
}

.bright {
  position: absolute;
  mix-blend-mode: screen;
}
.bright--l {
  width: 8.36vw;
}
@media screen and (width <= 834px) {
  .bright--l {
    width: 12.2666666667vw;
  }
}
.bright--m {
  width: 5.54vw;
}
@media screen and (width <= 834px) {
  .bright--m {
    width: 8.1333333333vw;
  }
}
.bright--s {
  width: 4.63vw;
}
@media screen and (width <= 834px) {
  .bright--s {
    width: 6.8vw;
  }
}

.intro {
  position: relative;
  width: min(87.87%, 1933px);
  padding: 40px 0;
  margin: auto;
}
@media screen and (width <= 834px) {
  .intro {
    width: 100%;
  }
}
.intro__bright-l {
  top: 9%;
  right: 14%;
}
@media screen and (width <= 834px) {
  .intro__bright-l {
    right: 11%;
  }
}
.intro__bright-m {
  top: 62%;
  left: 21%;
}
@media screen and (width <= 834px) {
  .intro__bright-m {
    top: 35%;
    left: 12%;
  }
}
.intro__bright-s {
  top: 55%;
  left: 16%;
}
@media screen and (width <= 834px) {
  .intro__bright-s {
    top: 32%;
    left: 7%;
  }
}

.how-to {
  margin-bottom: 6.0454545455vw;
}
@media screen and (width <= 834px) {
  .how-to {
    margin-bottom: 17.5333333333vw;
  }
}
.how-to__title {
  margin-bottom: 4.5454545455vw;
}
@media screen and (width <= 834px) {
  .how-to__title {
    margin-bottom: 6.6666666667vw;
  }
}
.how-to__flow {
  display: flex;
  flex-direction: column;
  gap: 2.2727272727vw;
}
@media screen and (width <= 834px) {
  .how-to__flow {
    gap: 3.3333333333vw;
  }
}
.how-to__flow > li {
  position: relative;
}
.how-to__flow > li:not(:last-child)::after {
  display: block;
  width: 9.0909090909vw;
  aspect-ratio: 4/1;
  margin: 2.2727272727vw auto 0;
  line-height: 1;
  text-align: center;
  content: "";
  background: url("../img/how-to_arrow_pc.webp") no-repeat center/contain;
}
@media screen and (width <= 834px) {
  .how-to__flow > li:not(:last-child)::after {
    position: relative;
    width: 20vw;
    aspect-ratio: 2/1;
    margin: -3.3333333333vw auto 0;
    content: "";
    background-image: url("../img/how-to_arrow_sp.webp");
  }
}
.how-to__flow-no {
  position: absolute;
  top: -20px;
  left: -20px;
  width: min(8.19vw, 180px);
}
@media screen and (width <= 834px) {
  .how-to__flow-no {
    top: -1.3333333333vw;
    left: -1.3333333333vw;
    width: 12vw;
  }
}
.how-to__bottom {
  display: flex;
  gap: 1.3636363636vw;
  align-items: center;
  justify-content: center;
  margin-top: 2.2727272727vw;
}
@media screen and (width <= 834px) {
  .how-to__bottom {
    flex-direction: column;
    gap: 5.7333333333vw;
    margin-top: 8.7333333333vw;
  }
}
.how-to__note img {
  width: 48.2272727273vw;
}
@media screen and (width <= 834px) {
  .how-to__note img {
    width: 64vw;
  }
}
.how-to__btn img {
  width: 18.1818181818vw;
}
@media screen and (width <= 834px) {
  .how-to__btn img {
    width: 53.3333333333vw;
  }
}

.collection__bright-l {
  top: 40%;
  right: 30%;
}
@media screen and (width <= 834px) {
  .collection__bright-l {
    top: 32%;
    right: 24%;
  }
}
.collection__bright-m {
  top: 87%;
  left: 25%;
}
@media screen and (width <= 834px) {
  .collection__bright-m {
    top: -42%;
    left: 9%;
  }
}
.collection__bright-s {
  top: 82%;
  left: 20%;
}
@media screen and (width <= 834px) {
  .collection__bright-s {
    top: -55%;
    left: 4%;
  }
}
.collection__title {
  position: relative;
}
.collection__top {
  margin-top: -5.2727272727vw;
}
@media screen and (width <= 834px) {
  .collection__top {
    margin-top: -10.272727vw;
  }
}
.collection__contents {
  overflow: hidden;
  padding-top: 6.8181818182vw;
  background: #00402a;
  padding-bottom: 21.9545454545vw;
}

.present {
  position: relative;
  padding-top: 5.3636363636vw;
  padding-bottom: 9.0909090909vw;
}
@media screen and (width <= 834px) {
  .present {
    padding-top: 14.5333333333vw;
    padding-bottom: 26.6666666667vw;
  }
}
.present::before {
  position: absolute;
  top: -21vw;
  left: 0;
  display: block;
  width: 38.2272727273vw;
  aspect-ratio: 841/992;
  content: "";
  background: url("../img/present_rose_01_pc.webp") no-repeat center/contain;
}
@media screen and (width <= 834px) {
  .present::before {
    top: -25vw;
    width: 42.8666666667vw;
    aspect-ratio: 643/794;
    background-image: url("../img/present_rose_01_sp.webp");
  }
}
.present::after {
  position: absolute;
  right: 0;
  bottom: -2.8181818182vw;
  z-index: -1;
  display: block;
  width: 38.1818181818vw;
  aspect-ratio: 840/992;
  content: "";
  background: url("../img/present_rose_02_pc.webp") no-repeat center/contain;
}
@media screen and (width <= 834px) {
  .present::after {
    bottom: 38vw;
    width: 42.8vw;
    aspect-ratio: 642/794;
    background-image: url("../img/present_rose_02_sp.webp");
  }
}
.present__bright-l {
  top: 0;
  right: 25%;
}
@media screen and (width <= 834px) {
  .present__bright-l {
    top: 1%;
    right: 16%;
  }
}
.present__bright-m {
  top: 11%;
  left: 29%;
}
@media screen and (width <= 834px) {
  .present__bright-m {
    top: 6.5%;
    left: 20%;
  }
}
.present__bright-s {
  top: 6%;
  left: 27%;
}
@media screen and (width <= 834px) {
  .present__bright-s {
    top: 4%;
    left: 15%;
  }
}
.present__mask {
  position: relative;
  height: 13.6363636364vw;
  margin-top: -13.6363636364vw;
  background-image: linear-gradient(to right, #152054 0%, #203080 50%, #152054 100%);
  -webkit-mask-image: url("../img/present_mask_pc.webp");
          mask-image: url("../img/present_mask_pc.webp");
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  -webkit-mask-size: cover;
          mask-size: cover;
}
@media screen and (width <= 834px) {
  .present__mask {
    height: 18.6vw;
    -webkit-mask-image: url("../img/present_mask_sp.webp");
            mask-image: url("../img/present_mask_sp.webp");
  }
}
.present__mask img {
  position: absolute;
  top: 0;
  left: 0;
}
.present__container {
  position: relative;
  z-index: 2;
}
.present__title {
  position: relative;
  margin-bottom: 5.1818181818vw;
  text-align: center;
}
@media screen and (width <= 834px) {
  .present__title {
    margin-bottom: 13.6vw;
  }
}
.present__title img:not(.bright) {
  width: 28.2272727273vw;
}
@media screen and (width <= 834px) {
  .present__title img:not(.bright) {
    width: 41.4vw;
  }
}
.present__lead {
  margin-bottom: 4.5454545455vw;
  text-align: center;
}
@media screen and (width <= 834px) {
  .present__lead {
    margin-bottom: 8.7333333333vw;
  }
}
.present__lead img {
  width: 72.8181818182vw;
}
@media screen and (width <= 834px) {
  .present__lead img {
    width: 78.4666666667vw;
  }
}
.present__main {
  margin-bottom: 8.8636363636vw;
}
@media screen and (width <= 834px) {
  .present__main {
    margin-bottom: 33.3333333333vw;
  }
}
.present__sns {
  display: flex;
  gap: 2.8181818182vw;
  align-items: center;
  justify-content: center;
}
.present__sns img {
  width: 17.0454545455vw;
}
@media screen and (width <= 834px) {
  .present__sns img {
    width: 100%;
  }
}

@media screen and (width <= 834px) {
  .pc {
    display: none;
  }
}

@media screen and (width >= 835px) {
  .sp {
    display: none;
  }
}

@media screen and (width >= 769px) {
  #main div.letroUgcsetContainer[data-letro-id="13606"],
  #main .letroUgcsetModal[data-letro-id="13606"],
  #main div.letroUgcsetContainer[data-letro-id="13507"],
  #main .letroUgcsetModal[data-letro-id="13507"] {
    max-width: 81.8181818182vw !important;
  }
}
#main div.letroUgcsetContainer[data-letro-id="13507"],
#main .letroUgcsetModal[data-letro-id="13507"] {
  margin-top: 6.0454545455vw !important;
}
#main .letroUgcsetContainer[data-letro-template="1"] .letroUgcsetWrapper .letroUgcsetMoreButton {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}
#main .letroUgcsetConsumerProtection {
  display: none !important;
}
#main div.letroUgcsetContainer[data-letro-id="13507"] .letroUgcsetWrapper .letroUgcsetMoreButton a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 27.2727272727vw !important;
  aspect-ratio: 600/150 !important;
  border: none !important;
  padding: 0 !important;
  margin: 4.5454545455vw auto 0 !important;
  font-size: 2.9090909091vw !important;
  color: #fff !important;
  text-shadow: #af9248 0 0 10px !important;
  background: linear-gradient(to right, #ae9049, #e9cd68, #af9248) !important;
  border-radius: 9999px !important;
}