html {
  font-size: calc((100 / 750) * 1vw);
}
@media screen and (min-width: 1000px) {
  html {
      font-size: 1px;
  }
}

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

.l-container 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: #1F2679;
  text-align: center;
  margin-bottom: 50rem;
}
img {
  max-width: 100%;
}
.l-container 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;
}
.M04 {
  margin: 40rem auto !important;
}

mark.p{
  color: #643813 !important;
  --color1: #F3E2FF;
  --color2:  #F3E2FF;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 0rem;
  margin: -2rem -2rem;
  font-size: 46rem;
  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.yr{
  --color1: #FCF175;
  --color2: #FCF175;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 12rem;
  margin: 0 5rem;
  font-size: 60rem;
  color: #FF3D00;
  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.yr2{
  --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.b{
  --color1: #1F2679;
  --color2: #1F2679;
  --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; 
}
mark.banner_free_trial{
  --color1: #e94071;
  --color2: #e94071;
  --bg-height: 100%;
  all: unset;
  padding: 15rem 10rem;
  margin: 0 5rem;
  font-size: 40rem;
  color: #fff;
  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;
}

.text-red1{
  font-weight: bold;
  font-size: 38rem;
  color: #FF3D00;
  margin: -5rem -8rem;
}
.text-red2 {
  font-weight: bold;
  font-size: 40rem;
  margin: -10rem;
  color: #FF3D00;
}
.text-red3{
  font-weight: bold;
  font-size: 34rem;
  color: #FF3D00;
}
.text-red4{
  font-weight: bold;
  font-size: 20rem;
  color: #FF3D00;
  vertical-align: super; 
}
.text-red5{
  font-weight: bold;
  font-size: 34rem;
  color: #FF3D00;
  margin: -5rem -8rem;
}
.text-red6{
  font-weight: bold;
  font-size: 46rem;
  color: #FF3D00;
  margin: -5rem -8rem;
}
.contents-img {
  margin: 40rem auto;
}
.contents-img.contents-img624 {
  width: 62.4%;
}
.contents-img.contents-img640 {
  width: 64%;
}
.contents-img.contents-img840 {
  width: 84%;
}
.contents-img.contents-img447 {
  width: 44.7%;
}
.contents-img.contents-img560 {
  width: 56%;
  margin: 40rem auto 0;
}
.contents-img.contents-img656 {
  width: 65.6%;
}
.contents-img.contents-img760 {
  width: 76%;
}
.full-width-img img {
  width: 100%;
}
.arrow-img {
  width: 25.87%;
  margin: 0 auto;
}
.sec01 {
  position: relative;
  z-index: 0;
}
.sec01::before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 898rem;
  top: 156rem;
  left: 0;
  background-image: url(../img/sec01_bg_img.webp);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}

.sec-bg{
  background-size: 690rem auto;
  background-repeat: no-repeat;
}
.sec01.sec-bg {
  background-image: url(../img/sec_bg_img01.webp);
  background-position: top 2180rem right;
}
.sec03.sec-bg {
  background-image: url(../img/sec_bg_img02.webp);
  background-position: top 1050rem right;
}

.mv__img {
  margin-bottom: 60rem;
}
.sec02 .sec_hd__img,
.sec04 .sec_hd__img {
  margin-bottom: 40rem;
}
.sec02__hd mark.b {
  display: block;
  text-align: center;
  font-weight: bold;
  margin: 0 60rem 40rem;
}
.sec03 video {
  width: 100%;
  max-width: 100%;
}

.sec04 {
  padding-bottom: 20rem;
}

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

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

.video-wrap {
  margin: 40rem;
}

.l-container .banner{
  z-index: 100;
  position: fixed;
  right: 4%;
  bottom: 30rem;
  transform: translateX(0%);
}
@media screen and (min-width: 1000px) {
  .l-container .banner {
      right: calc(50% - 360px); 
  }
}

.l-container .banner a img{
  max-width: 320px;
  width: calc(320 / 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;
}