*,
:after,
:before {
  box-sizing: border-box
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%
}
a {
  color: inherit;
  text-decoration: none
}
a:focus-visible {
  cursor: pointer;
  text-decoration: none
}
a,
img,
picture,
span {
  display: inline-block
}
img,
svg {
  height: 100%;
  vertical-align: middle;
  width: 100%
}
input {
  margin: 0;
  padding: 0
}
button {
  background: 0 0;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  padding: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}
:focus:not(:focus-visible) {
  outline: 0
}
:where(button,[type=button],[type=reset],[type=submit]) {
  touch-action: manipulation
}
:where(:-moz-any-link,button,[type=button],[type=reset],[type=submit],label[for],select,summary,[role=tab],[role=button]) {
  cursor: pointer
}
:where(:any-link,button,[type=button],[type=reset],[type=submit],label[for],select,summary,[role=tab],[role=button]) {
  cursor: pointer
}
.btn {
  display: block;
  height: auto;
  transition: opacity .3s ease;
  width: 87.4358974359vw;
  animation: btn_animation01 .6s ease infinite alternate;
  position: relative;
  overflow: hidden;
}
.btn::before {
  -moz-animation: btn_animation02 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: btn_animation02 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: btn_animation02 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: btn_animation02 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: btn_animation02 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
.btn img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.btn:focus-visible {
  opacity: .8
}
@keyframes btn_animation01 {
  0% {
    transform: translate(-50%, 0) scale(.92);
  }
  100% {
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes btn_animation02 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
.visually-hidden {
  block-size: 4px!important;
  border: none!important;
  contain: strict!important;
  display: block!important;
  inline-size: 4px!important;
  inset: 0!important;
  margin: 0!important;
  opacity: 0!important;
  padding: 0!important;
  pointer-events: none!important;
  position: fixed!important;
  visibility: visible!important
}
.fv__pc {
  display: none
}
.fv__text {
  display: none
}
.fv__btn--pc {
  display: none;
  position: relative;
  overflow: hidden;
  animation: btn_animation01 .6s ease infinite alternate;
  left: 50%;
}
.fv__btn--pc::before {
  -moz-animation: btn_animation02 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: btn_animation02 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: btn_animation02 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: btn_animation02 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: btn_animation02 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
.fv__caution {
  display: none;
}
.fv__notetext {
  display: none
}
.container {
  overflow: hidden;
  width: 100%
}
.fv__wrap {
  position: relative
}
.fv__btn {
  bottom: 34.35897436vw;
  left: 50%;
  max-width: 670px;
  position: absolute;
  transform: translateX(-50%);
  width: 79.4871794872vw
}
.fv__caution02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 45.64102564vw;
  bottom: 29.48717949vw;
}
.support {
  /* margin-top: -27.4358974359vw; */
  position: relative
}
.support__slide {
  bottom: 9.2307692308vw;
  position: absolute
}
.splide__pagination {
  display: flex;
  gap: 8px;
  margin-top: 30px
}
.splide__pagination__page {
  background: #e3d9cb;
  border-radius: 2px;
  height: 6px;
  width: 35px
}
.splide__pagination__page.is-active {
  background: #e46d55
}
.splide__arrow > svg {
  display: none
}
.example,
.lesson,
.reason,
.step {
  background: #fff;
  text-align: center
}
.reason {
  margin-inline: 25px;
  padding-block: 50px 40px
}
.lesson {
  margin-inline: 15px;
  padding-block: 50px 40px
}
.example {
  margin-inline: 15px;
  padding-block: 50px
}
.step {
  margin-inline: 25px;
  padding-block: 50px 41px
}
.sns {
  position: relative
}
.sns__textWrap,
.sns__textwrap--after {
  display: flex;
  overflow: hidden;
  position: absolute
}
.sns__textWrap {
  top: 2.0512820513vw
}
.sns__textwrap--after {
  bottom: 1.2820512821vw
}
.sns__textList {
  display: flex;
  list-style: none
}
.sns__textList--left {
  animation: infinity-scroll-left 50s linear infinite;
  width: 2280
}
.sns__textItem {
  aspect-ratio: 760/20;
  margin-right: 20px;
  width: 194.8717948718vw
}
.sns__textItem img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.cta01 {
  position: relative
}
.cta01__btn {
  bottom: 33.8461538462vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%)
}
.voice {
  position: relative
}
.voice__slide {
  bottom: 8.2051282051vw;
  position: absolute
}
.cta02 {
  position: relative;
  width: 100%
}
.cta02__btn {
  bottom: 12.56410256vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.cta02__btn--phrase {
  bottom: 8.4615384615vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%)
}
.cta02__book {
  bottom: 15.641025641vw;
  overflow: hidden;
  position: absolute;
  right: -5.8974358974vw;
  width: 24.1025641026vw
}
.cta02__book img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.cta03 {
  position: relative
}
.cta03__btn {
  bottom: 11.53846154vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%)
}
.cta03__btn--phrase {
  bottom: 6.4102564103vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%)
}
.cta03__book {
  bottom: 13.3333333333vw;
  overflow: hidden;
  position: absolute;
  right: -6.6666666667vw;
  width: 24.1025641026vw
}
.cta03__book img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.message {
  margin-top: -11.5384615385vw
}
.footer {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24.1025641026vw;
  padding-block: 15px 9px
}
.footer__company {
  display: block
}
.footer__company img {
  aspect-ratio: 56/24;
  width: 14.358974359vw;
  -o-object-fit: contain;
  object-fit: contain
}
.footer__copyright {
  aspect-ratio: 184/17;
  height: auto;
  width: 47.1794871795vw
}
.footer__copyright img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
.fixed {
  background: rgba(255,255,255,0);
  bottom: 0;
  display: grid;
  height: 24.1025641026vw;
  left: 0;
  opacity: 0;
  place-content: center;
  position: fixed;
  transform: translateZ(0);
  transition: opacity .3s,visibility .3s;
  visibility: hidden;
  width: 100%;
  z-index: 5
}
.fixed.is-show {
  opacity: 1;
  visibility: visible
}
.fixed-btn {
  height: auto;
  width: 92.3076923077vw;
  position: relative;
  overflow: hidden;
}
.fixed-btn::before {
  -moz-animation: btn_animation02 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: btn_animation02 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: btn_animation02 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: btn_animation02 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: btn_animation02 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
.fixed-btn img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.fixed-btn:focus-visible {
  opacity: .8
}
@media (any-hover:hover) {
  a:hover {
    cursor: pointer;
    text-decoration: none
  }
  .btn:hover {
    opacity: .8
  }
  .fixed-btn:hover {
    opacity: .8
  }
}
@media screen and (min-width:768px) {
  .btn {
    max-width: 353px
  }
  .all {
    display: flex;
    position: relative
  }
  .fv__pc {
    align-items: center;
    background: url(../img/pc-bg.png) no-repeat center center/cover;
    display: flex;
    height: 100vh;
    position: fixed;
    width: 100vw
  }
  .fv__pc--inner {
    display: flex;
    flex-direction: column;
    margin-left: 168px;
    max-width: 1072px;
    overflow: hidden
  }
  .container {
    display: grid;
    justify-content: center;
    margin-top: 102px;
    position: relative
  }
  .fv__contents {
    background: #fff;
    border-radius: 37px 37px 0 0;
    overflow: hidden;
    width: 464px
  }
  .fv__bg {
    margin-inline: auto;
    overflow: hidden;
    width: 450px
  }
  .fv__img img,
  .fv__img source {
    border-radius: 30px 30px 0 0;
    margin-top: 7px
  }
  .fv__btn {
    bottom: 155px;
    max-width: 353px
  }
  .fv__caution02 {
    bottom: 133px;
    max-width: 205px;
  }
  /* .support {
    margin-top: -123px
  } */
  .support__slide {
    bottom: 42px
  }
  .sns__textWrap {
    top: 8px
  }
  .sns__textwrap--after {
    bottom: 6px
  }
  .sns__textItem {
    width: 760px
  }
  .cta01__btn {
    bottom: 162px
  }
  .voice__slide {
    bottom: 44px
  }
  .cta02__btn {
    bottom: 56px;
    max-width: 393px !important;
  }
  .cta02__btn--phrase {
    bottom: 50px
  }
  .cta02__book {
    bottom: 72px;
    right: -29px;
    width: 110px
  }
  .cta03__btn {
    bottom: 51px;
    max-width: 393px !important;
  }
  .cta03__btn--phrase {
    bottom: 37px
  }
  .cta03__book {
    bottom: 61px;
    right: -29px;
    width: 110px
  }
  .message {
    margin-top: -52px
  }
  .footer {
    margin-bottom: 94px
  }
  .footer__company img {
    width: 72px
  }
  .footer__copyright {
    width: 200px
  }
  .fixed {
    left: 50%;
    max-height: 94px;
    transform: translateX(-50%);
    width: 450px
  }
  .fixed-btn {
    max-width: 353px
  }
}
@media screen and (min-width:1024px) {
  .fv__text {
    aspect-ratio: 452/482;
    display: block;
    height: auto;
    margin-top: 36px;
    max-width: 452px;
    width: 33.2352941176vw
  }
  .fv__text img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }
  .fv__btn--pc {
    display: block;
    height: auto;
    margin-top: 26px;
    max-width: 446px;
    transition: opacity .3s ease;
    width: 32.7941176471vw
  }
  .fv__btn--pc img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }
  .fv__btn--pc:focus-visible {
    opacity: .8
  }
  .fv__caution {
    max-width: 243px;
    width: 17.86764706vw;
    margin: 0 auto;
    display: block;
  }
  .fv__notetext {
    aspect-ratio: 441/37;
    display: block;
    margin-top: 44px;
    max-width: 441px;
    width: 32.4264705882vw
  }
  .fv__notetext img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }
  .container {
    display: block;
    margin-left: calc(50vw + 6.8%)
  }
  .footer {
    margin-bottom: 0
  }
  .fixed {
    display: none
  }
}
@media screen and (min-width:1024px) and (any-hover:hover) {
  .fv__btn--pc:hover {
    opacity: .8
  }
}
@media screen and (min-width:1920px) {
  .fv__pc--inner {
    margin-left: 19.7916666667vw
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-100%)
  }
}