html {
  font-size: calc((100 / 750) * 1vw);
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 1px;
  }
}

.l-container {
  background-color: #FDF9E9;
}

@media screen and (min-width: 1000px) {
  .l-container {
    max-width: 750px;
    margin: 0 auto;
  }
}

p {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  font-size: 34rem;
  line-height: 170%;
  letter-spacing: 0rem;
  color: #643813;
  text-align: center;
  margin-bottom: 50rem;
}

a img {
  transition: opacity .3s ease-in;
}

a:hover img {
  opacity: 0.8;
}

.M01 {
  margin-bottom: 0rem;
}

.M02 {
  margin-bottom: 0rem;
  padding-bottom: 10rem;
}

.M03 {
  margin-bottom: 0rem;
  padding-bottom: 40rem;
}

mark.p {
  color: #643813 !important;
  --color1: #F3E2FF;
  --color2: #F3E2FF;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 0rem;
  margin: -2rem -2rem;
  font-size: 34rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.y {
  --color1: #FCF175;
  --color2: #FCF175;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 0rem;
  margin: 0 5rem;
  font-size: 34rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.ybig {
  --color1: #FCF175;
  --color2: #FCF175;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 6rem;
  margin: 0 5rem;
  font-size: 38rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.yp {
  --color1: #FCF175;
  --color2: #FCF175;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 12rem;
  margin: 0 5rem;
  font-size: 60rem;
  color: #802077;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.yp2 {
  --color1: #FCF175;
  --color2: #FCF175;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 12rem;
  margin: 0 5rem;
  font-size: 56rem;
  color: #802077;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.pbig {
  --color1: #EFC3C6;
  --color2: #EFC3C6;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 6rem;
  margin: 0 5rem;
  font-size: 40rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.pbig2 {
  --color1: #F8C1C5;
  --color2: #F8C1C5;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 6rem;
  margin: 0 5rem;
  font-size: 40rem;
  color: #EB427B;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.psmall {
  --color1: #EFC3C6;
  --color2: #EFC3C6;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 6rem;
  margin: 0 5rem;
  font-size: 36rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

mark.r {
  --color1: #e94071;
  --color2: #e94071;
  --bg-height: 100%;
  all: unset;
  padding: 15rem 10rem;
  margin: 0 5rem;
  font-size: 40rem;
  color: #FFFFFF;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

.text-small {
  font-size: 20rem;
  font-weight: normal;
}

.text-medium {
  font-size: 22rem;
}

.text-bold {
  font-weight: bold;
}

.text-pink1 {
  font-weight: bold;
  font-size: 38rem;
  color: #EB427B;
  margin: -5rem -8rem;
}

.text-pink2 {
  font-weight: bold;
  font-size: 40rem;
  margin: -10rem;
  color: #EB427B;
}

.text-pink3 {
  font-weight: bold;
  font-size: 34rem;
  color: #EB427B;
}

.text-pink4 {
  font-weight: bold;
  font-size: 20rem;
  color: #EB427B;
  vertical-align: super;
}

.text-pink5 {
  font-weight: bold;
  font-size: 34rem;
  color: #EB427B;
  margin: -5rem -8rem;
}

.text-pink6 {
  font-weight: bold;
  font-size: 46rem;
  color: #EB427B;
  margin: -5rem -8rem;
}

.text-purple1 {
  font-weight: bold;
  font-size: 36rem;
  color: #802077;
  margin: -5rem -8rem;
}

.text-purple2 {
  font-weight: bold;
  font-size: 40rem;
  color: #802077;
  margin: -5rem -8rem;
}

.text-purple3 {
  font-weight: bold;
  font-size: 34rem;
  color: #802077;
}

.text-purple4 {
  font-weight: bold;
  font-size: 46rem;
  color: #802077;
}


.contents-img img {
  max-width: 89.3%;
  zoom: 0.5;
  -moz-transform: scale(.5);
}

.contents-img1 img {
  zoom: 0.5;
  -moz-transform: scale(.5);
}

.full-width-img img {
  width: 100%;
  zoom: 0.5;
  -moz-transform: scale(.5);
}

.step-icon img {
  max-width: 30%;
  margin-top: -140rem;
  zoom: 0.5;
  -moz-transform: scale(.5);
}

.section_a05 {
  background: url(../img/a05_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.section_a06 {
  background: url(../img/a06_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.a08_a09 {
  background: url(../img/a08_09_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  aspect-ratio: 750/1192;
}

.a16_18 {
  background: url(../img/a16_18_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  aspect-ratio: 750/1642;
}

.a20_22 {
  background: url(../img/a20_22_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.section_a29 video {
  width: 100%;
  max-width: 100%;
}

.section_a30 {
  margin-top: -50rem;
}

.section_a25 .contents-img img,
.section_a32 .contents-img img {
  zoom: normal;
}

.contents-gif img {
  max-width: 89.3%;
  width: calc(750 / 750 * 100vw);
}

.contents-gif1 img {
  max-width: 100%;
  width: calc(750 / 750 * 100vw);
}

.banner {
  z-index: 100;
  position: fixed;
  right: 4%;
  bottom: 30rem;
  transform: translateX(0%);
}


@media screen and (min-width: 1000px) {
  .banner {
    right: calc(50% - 360px);
  }
}

.banner a img {
  max-width: 320px;
  width: calc(320 / 750 * 100vw);
}

/* @media screen and (min-width: 1000px) {
  .banner a img{
    max-width: 160px;
    width: calc(240 / 750 * 100vw);
  }
} */

.banner-pos {
  position: absolute;
  top: -14px;
  right: -14px;
  cursor: pointer;
}

.banner-link {
  display: inline-block;
  position: absolute;
  left: 22%;
  top: 43%;
  opacity: .5;
  width: 74%;
  height: 46%;
}

.anime-bounce img {
  -webkit-filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6));
  -webkit-animation: bounce 0.5s ease-in-out 0s infinite alternate;
  animation: bounce 0.5s ease-in-out 0s infinite alternate;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@keyframes bounce {
  from {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }

  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

.banner_free_trial {
  width: 86.67%;
  margin: 0 auto 50rem;
}

.banner_free_trial img {
  max-width: 100%;
}

.page-top-link {
  display: block;
  text-align: center;
  color: #1fafec;
  padding: 90rem 0 120rem;
  font-size: 40rem;
  line-height: 1;
}