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

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.l-container {
  padding-bottom: 100rem;
  text-align: center;
  background-color: rgba(234, 198, 48, .1);
}
@media screen and (min-width: 750px) {
  .l-container {
    margin: 0 auto;
    max-width: 750px;
  }
}

a {
  transition: opacity .3s ease-in;
}
@media screen and (min-width: 750px) {
  a:hover {
    opacity: 0.8;
  }
}

h1 {
  padding: 85rem 0 60rem;
  font-size: 56rem;
  font-weight: 600;
  color: #802077;
  line-height: calc(87 / 56);
  text-align: center;
}
p {
  margin-bottom: 40rem;
  font-size: 34rem;
  font-weight: bold;
  line-height: calc(66 / 34);
  letter-spacing: 0rem;
  color: #643813;
  text-align: center;
}
p strong {
  font-size: 46rem;
  line-height: calc(66 / 46);
}

mark.p {
  color: #643813 !important;
  --color1: #F3E2FF;
  --color2:  #F3E2FF;
  --bg-height: 100%;
  all: unset;
  padding: 8rem 0rem;
  margin: -2rem -2rem;
  font-size: 34px;
  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: #FEEF00;
  --color2: #FEEF00;
  --bg-height: 100%;
  all: unset;
  margin: 0 10rem;
  padding: 6rem 0rem;
  font-size: 50rem;
  line-height: calc(66 / 50);
  color: #802077;
  letter-spacing: -.03em;
  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.big {
  --color1: #FEEF00;
  --color2: #FEEF00;
  --bg-height: 100%;
  all: unset;
  margin: 0 10rem;
  padding: 6rem 0rem;
  font-size: 50rem;
  line-height: calc(66 / 50);
  color: #802077;
  letter-spacing: -.03em;
  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.small {
  --color1: #FEEF00;
  --color2: #FEEF00;
  --bg-height: 100%;
  all: unset;
  margin: 0 10rem;
  padding: 6rem 0rem;
  font-size: 40rem;
  line-height: calc(66 / 40);
  color: #802077;
  letter-spacing: -.03em;
  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-bold {
  font-weight: bold;
}
.text-pink {
  font-weight: bold;
  color: #EB427B;
}
.text-purple {
  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;
}

.contents-img,
.full-width-img {
  margin-bottom: 55rem;
}
.contents-img img {
  max-width: 89.3%;
}

@media screen and (max-width: 749px) {
  .contents-img img {
    zoom: 0.6;
    -moz-transform: scale(.5);
  }
}
.full-width-img img {
  width: 100%;
  zoom: 0.5;
  -moz-transform: scale(.5);
}

.bnr img,
.banner_free_trial img {
	-webkit-animation: anime1 0.5s ease-in-out 0s infinite alternate;
	animation: anime1 0.5s ease-in-out 0s infinite alternate;
	-webkit-transform-origin: center;
	transform-origin: center;
  display: inline-block;
  max-width: 100%;
}

@keyframes anime1 {
	from {
		-webkit-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
	}
	to {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

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

.section_a01 {
  background-image: url(../img/bg1.png);
  background-position: top 40rem right 0;
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 750/1319;
}
.section_a02 {
  margin-top: -300rem;
}
.section_a02.mt0 {
  margin-top: 0;
}
.section_a02.mt-58 {
  margin-top: -58rem;
}
.section_a02 img {
  max-width: 100%;
}
.section_a05 {
  margin-top: 80rem;
}
.section_a11 {
  background: url(../img/bg3.png);
  background-position: top 0 left 0;
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 750/1271;
}
.section_a14 {
  background: url(../img/bg4.png);
  background-position: top 740rem right 0;
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 750/2104;
}
.bg_area {
  background: url(../img/bg2.png);
  background-position: top 40rem right 0;
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 750/1994;
}

.v1 {
  max-width: 532rem;
}
video {
  margin: 30rem 0 50rem;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  background: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe_wrap {
  margin-bottom: 80rem;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bnr {
  margin-top: 80rem;
}

.text-notice {
  display: block;
  font-size: 20rem;
  font-weight: normal;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
}
.footer p {
  margin: 0;
  font-size: 20rem;
  line-height: calc(25 / 20);
  color: #333;
  font-weight: normal;
}
@media screen and (max-width: 749px) {
  .footer p {
    font-size: 20rem;
  }
}
.footer a {
  margin: 0;
  font-size: 20rem;
  line-height: calc(25 / 20);
  color: #333;
  font-weight: normal;
  text-decoration: underline;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 749px) {
  .footer a {
    font-size: 20rem;
  }
}
.footer a.tel {
  text-decoration: none;
}
.footer a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 749px) {
  .footer a:hover {
    opacity: 1;
  }
}