@charset "UTF-8";

/* fv */
.lp_wrap .fv{
  overflow: hidden;
}
/* tokuten */
.lp_wrap .tokuten{
  overflow: hidden;
}
.lp_wrap .tokuten .btn {
  position: absolute;
  top: 64.8%;
  left: 5.2%;
  width: 89.6%;
  animation: 2s offer_btn ease-in-out infinite;
}
.lp_wrap .tokuten .item_link {
  position: absolute;
  top: 97%;
  left: 5%;
  width: 90%;
  line-height: 3em;
  text-align: center;
}
.lp_wrap .tokuten .item_link a {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: min(2.8vw, 21px);
  font-weight: 500;
  font-style: normal;
  color: #222222;
  text-decoration: none;
}
@keyframes offer_btn {
  10% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(5%);
  }
  30% {
    transform: translateY(-3%);
  }
  40% {
    transform: translateY(2%);
  }
  50% {
    transform: translateY(-1%);
  }
  60%, 100% {
    transform: translateY(0%);
  }
}
/* fuan */
.lp_wrap .fuan {
  z-index: 2;
  overflow: hidden;
}
.lp_wrap .fuan .fukidashi01 {
  position: absolute;
  top: 7.2%;
  left: 63%;
  width: 35.867%;
  transform-origin: bottom center;
  animation: 2s fuan_fukidashi ease-in-out infinite;
}
.lp_wrap .fuan .fukidashi02 {
  position: absolute;
  top: 34%;
  left: 4.8%;
  width: 35.867%;
  transform-origin: bottom center;
  animation: 2s 1s fuan_fukidashi ease-in-out infinite;
}
@keyframes fuan_fukidashi {
  10% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(5deg);
  }
  30% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  60%, 100% {
    transform: rotate(0deg);
  }
}
.lp_wrap .fuan .itami li {
  position: absolute;
}
.lp_wrap .fuan .itami li:nth-child(1) {
  top: 11%;
  left: 25%;
  width: 41.2%;
  animation: 2s 0s fuan_itami ease-in-out infinite;
}
.lp_wrap .fuan .itami li:nth-child(2) {
  top: 40%;
  left: 29%;
  width: 41.2%;
  animation: 2s 0.5s fuan_itami ease-in-out infinite;
}
.lp_wrap .fuan .itami li:nth-child(3) {
  top: 50%;
  left: 70%;
  width: 41.067%;
  animation: 2s 1s fuan_itami ease-in-out infinite;
}
@keyframes fuan_itami {
  10%,60%,100% {
    transform: scale(1);
  }
  50%,70% {
    transform: scale(0.8);
  }
}
.lp_wrap .fuan .head li {
  position: absolute;
}
.lp_wrap .fuan .head li:nth-child(1) {
  top: 10.7%;
  left: 59%;
  width: 39.7%;
}
.lp_wrap .fuan .head li:nth-child(2) {
  top: 38%;
  left: 1%;
  width: 41.2%;
}
.lp_wrap .fuan .nayami01 {
  position: absolute;
  top: 77.5%;
  left: 70%;
  width: 27.467%;
  animation: 2s 0s fuan_nayami ease-in-out infinite;
}
.lp_wrap .fuan .img {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
}
.lp_wrap .fuan .nayami02 {
  position: absolute;
  top: 86%;
  left: 2.8%;
  width: 27.467%;
  animation: 2s 0.5s fuan_nayami ease-in-out infinite;
}
.lp_wrap .fuan .nayami03 {
  position: absolute;
  bottom: 0%;
  left: 64.5%;
  width: 27.467%;
  animation: 2s 1s fuan_nayami ease-in-out infinite;
}
@keyframes fuan_nayami {
  50% {
    transform: translateY(-5%);
  }
  0%,100% {
    transform: translateY(0%);
  }
}
/* henka */
.lp_wrap .henka{
  margin-top: -16%;
}
/* care */
.lp_wrap .care{
  z-index: 2;
  margin-top: -5.5%;
}
.lp_wrap .care .fk01 {
  position: absolute;
  top: 22%;
  left: 55.5%;
  width: 39.733%;
}
.lp_wrap .care .fk01 img {
  transform: scale(0);
  transform-origin: bottom center;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .care .fk02 {
  position: absolute;
  top: 49%;
  left: 68%;
  width: 31.6%;
}
.lp_wrap .care .fk02 img {
  transform: scale(0);
  transform-origin: 35% 100%;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .care .fk01.trigger.move img,
.lp_wrap .care .fk02.trigger.move img{
  transform: scale(1);
}
.lp_wrap .care .line {
  position: absolute;
  top: 73.5%;
  left: 10%;
  width: 64.933%;
  clip-path: inset(0% 100% 0% 0%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .care .line.trigger.move {
  clip-path: inset(0% 0% 0% 0%);
}
/* w */
.lp_wrap .w{
  margin-top: -5%;
  z-index: 3;
}
.lp_wrap .w .head01 {
  position: absolute;
  top: 4%;
  left: 33.067%;
  width: 33.867%;
}
.lp_wrap .w .head01 img{
  transform: scale(0);
  transform-origin: bottom center;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .w .head01.trigger.move img{
  transform: scale(1);
}
.lp_wrap .w .yajirushi li {
  position: absolute;
  top: 68.2%;
}
.lp_wrap .w .yajirushi li:nth-child(1) {
  left: 17.5%;
  width: 22.133%;
}
.lp_wrap .w .yajirushi li:nth-child(2) {
  left: 61%;
  width: 22.133%;
}
.lp_wrap .w .yajirushi li:nth-child(1) img{
  transform: scale(0);
  transform-origin: top left;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .w .yajirushi li:nth-child(2) img{
  transform: scale(0);
  transform-origin: top right;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .w .yajirushi li.trigger.move img,
.lp_wrap .w .yajirushi li.trigger.move ~ li img{
  transform: scale(1);
}
.lp_wrap .w .head02 {
  position: absolute;
  top: 80.2%;
  left: 1.267%;
  width: 97.467%;
  clip-path: inset(0% 100% 0% 0%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .w .head02.trigger.move {
  clip-path: inset(0% 0% 0% 0%);
}
/* rakuraku */
.lp_wrap .rakuraku{
  margin-top: -20%;
  overflow: hidden;
}
.lp_wrap .rakuraku .video01 {
  position: absolute;
  bottom: -0.2%;
  left: 0%;
  width: 50.2%;
}
.lp_wrap .rakuraku .video02 {
  position: absolute;
  bottom: -0.2%;
  left: 50%;
  width: 50.2%;
}
.lp_wrap .rakuraku .head {
  position: absolute;
  top: 25%;
  left: 0.2%;
  width: 99.6%;
}
.lp_wrap .rakuraku .comment {
  position: absolute;
  bottom: 2%;
  right: 2%;
  width: 73.3%;
}
/* offer01 */
.lp_wrap .offer01{
  overflow: hidden;
}
.lp_wrap .offer01 .btn {
  position: absolute;
  top: 64.5%;
  left: 5.2%;
  width: 89.6%;
  animation: 2s offer_btn ease-in-out infinite;
}
/* nayami */
.lp_wrap .nayami{
  overflow: hidden;
}
.lp_wrap .nayami .line {
  position: absolute;
  top: 6%;
  left: 44.5%;
  width: 42.267%;
  clip-path: inset(0% 100% 0% 0%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .nayami .line.trigger.move {
  clip-path: inset(0% 0% 0% 0%);
}
.lp_wrap .nayami .catch li {
  position: absolute;
}
.lp_wrap .nayami .img li {
  position: absolute;
}
.lp_wrap .nayami .img li:nth-child(1) {
  top: 10%;
  right: -7%;
  width: 82.4%;
}
.lp_wrap .nayami .img li:nth-child(2) {
  top: 27%;
  left: -7%;
  width: 88.4%;
}
.lp_wrap .nayami .img li:nth-child(3) {
  top: 44.5%;
  right: -7%;
  width: 86.4%;
}
.lp_wrap .nayami .img li img{
  transform: scale(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .nayami .img li.trigger.move img{
  transform: scale(1);
}
.lp_wrap .nayami .catch li:nth-child(1) {
  top: 11.5%;
  left: 4%;
  width: 92%;
}
.lp_wrap .nayami .catch li:nth-child(2) {
  top: 28.8%;
  right: 4%;
  width: 91.7%;
}
.lp_wrap .nayami .catch li:nth-child(3) {
  top: 46%;
  left: 4%;
  width: 91.6%;
}
.lp_wrap .nayami .fukidashi li {
  position: absolute;
  transform: scale(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .nayami .fukidashi li:nth-child(1) {
  top: 68.8%;
  right: 4%;
  width: 71.067%;
  transform-origin: left center;
}
.lp_wrap .nayami .fukidashi li:nth-child(2) {
  top: 73.8%;
  left: 4%;
  width: 71.067%;
  transform-origin: right center;
}
.lp_wrap .nayami .fukidashi li:nth-child(3) {
  top: 78.8%;
  right: 4%;
  width: 71.067%;
  transform-origin: left center;
}
.lp_wrap .nayami .fukidashi li:nth-child(4) {
  top: 83.8%;
  left: 4%;
  width: 71.067%;
  transform-origin: right center;
}
.lp_wrap .nayami .fukidashi li.trigger.move {
  transform: scale(1);
}
.lp_wrap .nayami .icon li {
  position: absolute;
  right: 5%;
}
.lp_wrap .nayami .icon li:nth-child(1) {
  top: 72%;
  width: 21.067%;
}
.lp_wrap .nayami .icon li:nth-child(2) {
  top: 82%;
  width: 21.333%;
}
/* spiral */
.lp_wrap .spiral {
  margin-top: -18%;
  z-index: 2;
}
.lp_wrap .spiral .stop {
  position: absolute;
  bottom: -4%;
  left: 0%;
  width: 100%;
}
.lp_wrap .spiral .nayami li {
  position: absolute;
}
.lp_wrap .spiral .nayami li:nth-child(1) {
  top: 7%;
  left: 62%;
  width: 36.4%;
  animation: 2s 0s spiral_nayami ease-in-out infinite;
}
.lp_wrap .spiral .nayami li:nth-child(2) {
  top: 20%;
  left: 8%;
  width: 36.4%;
  animation: 2s 0.5s spiral_nayami ease-in-out infinite;
}
.lp_wrap .spiral .nayami li:nth-child(3) {
  top: 25%;
  left: 58%;
  width: 36.4%;
  animation: 2s 1s spiral_nayami ease-in-out infinite;
}
@keyframes spiral_nayami {
  50% {
    transform: translateY(-5%);
  }
  0%,100% {
    transform: translateY(0%);
  }
}
.lp_wrap .spiral .head {
  position: absolute;
  top: 51%;
  left: 3.133%;
  width: 93.733%;
  overflow: hidden;
}
.lp_wrap .spiral .head img{
  transform: translateY(100%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .spiral .head.trigger.move img{
  transform: translateY(0%);
}
.lp_wrap .spiral .video {
  position: absolute;
  top: 65%;
  left: 18.2%;
  width: 63.6%;
  clip-path: circle(50% at 50% 50%);
}
.lp_wrap .spiral .loop li {
  position: absolute;
}
.lp_wrap .spiral .loop li:nth-child(1) {
  top: 60%;
  left: 35.5%;
  width: 28.9%;
}
.lp_wrap .spiral .loop li:nth-child(2) {
  top: 65%;
  left: 66%;
  width: 17.867%;
}
.lp_wrap .spiral .loop li:nth-child(3) {
  top: 69.5%;
  right: 3.8%;
  width: 28.8%;
}
.lp_wrap .spiral .loop li:nth-child(4) {
  top: 79.8%;
  left: 65%;
  width: 17.2%;
}
.lp_wrap .spiral .loop li:nth-child(5) {
  top: 79%;
  left: 35.6%;
  width: 28.8%;
}
.lp_wrap .spiral .loop li:nth-child(6) {
  top: 79.7%;
  left: 17.5%;
  width: 17.467%;
}
.lp_wrap .spiral .loop li:nth-child(7) {
  top: 69.5%;
  left: 3.8%;
  width: 28.8%;
}
.lp_wrap .spiral .loop li:nth-child(8) {
  top: 64.8%;
  left: 17.8%;
  width: 16.4%;
}
.lp_wrap .spiral .loop li:nth-child(1) img{
  opacity: 0;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .spiral .loop li:nth-child(2) img{
  clip-path: inset(0% 0% 100% 0%);
  transition: 0.6s 0.6s ease;
}
.lp_wrap .spiral .loop li:nth-child(3) img{
  opacity: 0;
  transition: 0.6s 1.2s ease;
}
.lp_wrap .spiral .loop li:nth-child(4) img{
  clip-path: inset(0% 0%  0% 100%);
  transition: 0.6s 1.8s ease;
}
.lp_wrap .spiral .loop li:nth-child(5) img{
  opacity: 0;
  transition: 0.6s 2.4s ease;
}
.lp_wrap .spiral .loop li:nth-child(6) img{
  clip-path: inset(100% 0% 0% 0%);
  transition: 0.6s 3.0s ease;
}
.lp_wrap .spiral .loop li:nth-child(7) img{
  opacity: 0;
  transition: 0.6s 3.6s ease;
}
.lp_wrap .spiral .loop li:nth-child(8) img{
  clip-path: inset(0% 100% 0% 0%);
  transition: 0.6s 4.2s ease;
}
.lp_wrap .spiral .loop li.trigger.move img,
.lp_wrap .spiral .loop li.trigger.move ~ li img{
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
}
.lp_wrap .spiral .catch {
  position: absolute;
  top: 89.2%;
  left: 14.5%;
  width: 81.467%;
}
.lp_wrap .spiral .catch img{
  transform: scale(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .spiral .catch.trigger.move img{
  transform: scale(1);
}
/* sokode */
.lp_wrap .sokode{
  overflow-x: hidden;
}
.lp_wrap .sokode .hand {
  position: absolute;
  top: -4%;
  right: -1%;
  width: 66.4%;
  z-index: 4;
  transform: translateX(120%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .sokode .hand.trigger.move {
  transform: translateX(0%);
}
.lp_wrap .sokode .head {
  position: absolute;
  top: 77%;
  left: 0.133%;
  width: 99.733%;
}
.lp_wrap .sokode .head img{
  transform: scale(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .sokode .head.trigger.move img{
  transform: scale(1);
}
/* support01 */
.lp_wrap .support01{
  position: relative;
  width: 100%;
}
.lp_wrap .support01 .top{
  position: sticky;
  top: 0;
  z-index: 1;
  background: url("../image/support01_02.jpg");
  aspect-ratio: 750 / 1200;
}
.lp_wrap .support01 .top .back{
  clip-path: inset(0);
  filter: blur(0px);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .support01 .top .back.trigger.move{
  filter: blur(5px);
}
.lp_wrap .support01 .top .head {
  position: absolute;
  top: 20%;
  left: 11.467%;
  width: 77.067%;
  opacity: 0;
  transition: 0.6s 0.6s ease;
}
.lp_wrap .support01 .top .head.trigger.move {
  opacity: 1;
}
.lp_wrap .support01 .bottom {
  position: relative;
  z-index: 2;
}
.lp_wrap .support01 .bottom .video {
  position: absolute;
  top: 51.8%;
  left: 10%;
  width: 80%;
}
/* support02 */
.lp_wrap .support02{
  position: relative;
  width: 100%;
}
.lp_wrap .support02 .top {
  position: sticky;
  top: 0;
  z-index: 1;
  background: url("../image/support02_01.jpg");
  aspect-ratio: 750 / 1201;
}
.lp_wrap .support02 .top .back{
  filter: blur(0px);
  clip-path: inset(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .support02 .top .back.trigger.move{
  filter: blur(5px);
}
.lp_wrap .support02 .top .head {
  position: absolute;
  top: 20%;
  left: 5.8%;
  width: 88.4%;
  opacity: 0;
  transition: 0.6s 0.6s ease;
}
.lp_wrap .support02 .top .head.trigger.move {
  opacity: 1;
}
.lp_wrap .support02 .bottom {
  position: relative;
  z-index: 2;
}
/* support03 */
.lp_wrap .support03{
  position: relative;
  width: 100%;
}
.lp_wrap .support03 .top {
  position: sticky;
  top: 0;
  z-index: 1;
  background: url("../image/support03_01.jpg");
  aspect-ratio: 750 / 1200;
}
.lp_wrap .support03 .top .back{
  filter: blur(0px);
  clip-path: inset(0);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .support03 .top .back.trigger.move{
  filter: blur(5px);
}
.lp_wrap .support03 .top .head {
  position: absolute;
  top: 20%;
  left: 5.2%;
  width: 89.6%;
  opacity: 0;
  transition: 0.6s 0.6s ease;
}
.lp_wrap .support03 .top .head.trigger.move {
  opacity: 1;
}
.lp_wrap .support03 .bottom {
  position: relative;
  z-index: 2;
}
/* offer02 */
.lp_wrap .offer02{
  overflow: hidden;
}
.lp_wrap .offer02 .btn {
  position: absolute;
  top: 64.5%;
  left: 5.2%;
  width: 89.6%;
  animation: 2s offer_btn ease-in-out infinite;
}
/* repeat */
.lp_wrap .repeat{
  margin-top: -6%;
  aspect-ratio: 750 / 2863; 
}
.lp_wrap .repeat .per {
  position: absolute;
  top: 9%;
  left: 0.65%;
  width: 98.7%;
}
/* 親要素の指定 */
.lp_wrap .repeat .graph {
  position: absolute;
  top: 11%;
  left: 0%;
  right: 0%;
  margin: auto;
  width: 82.666%;
  aspect-ratio: 1 / 1;
}
.lp_wrap .repeat .graph svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* 12時の位置から開始するために-90度回転 */
  transform: rotate(-90deg);
}
.lp_wrap .repeat .graph svg circle {
  fill: transparent; 
  stroke: url(#gradation05); 
  stroke-width: 70;
  stroke-dasharray: 1715;
  stroke-dashoffset: 1715; 
}
.lp_wrap .repeat .graph.trigger.move svg circle {
  animation: graph_move 1.2s ease-in-out forwards;
}
@keyframes graph_move {
  0% {
    stroke-dashoffset: 1715;
  }
  100% {
    stroke-dashoffset: 155;
  }
}
.lp_wrap .repeat .fukidashi01 {
  position: absolute;
  top: 4.5%;
  left: 36.534%;
  width: 26.933%;
}
.lp_wrap .repeat .fukidashi01 img{
  transform: scale(0);
  transform-origin: bottom center;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .repeat .fukidashi01.trigger.move img{
  transform: scale(1);
}
.lp_wrap .repeat .bottom {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
}
.lp_wrap .repeat .fukidashi02 {
  position: absolute;
  top: 46.4%;
  left: 50%;
  width: 26.933%;
}
.lp_wrap .repeat .fukidashi02 img{
  transform: scale(0);
  transform-origin: 65% 95%;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .repeat .fukidashi02.trigger.move img{
  transform: scale(1);
}
.lp_wrap .repeat .fukidashi03 {
  position: absolute;
  top: 59.2%;
  left: 54%;
  width: 26.933%;
}
.lp_wrap .repeat .fukidashi03 img{
  transform: scale(0);
  transform-origin: 65% 95%;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .repeat .fukidashi03.trigger.move img{
  transform: scale(1);
}
.lp_wrap .repeat .fukidashi04 {
  position: absolute;
  top: 71.7%;
  left: 71.5%;
  width: 26.933%;
}
.lp_wrap .repeat .fukidashi04 img{
  transform: scale(0);
  transform-origin: 36% 100%;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .repeat .fukidashi04.trigger.move img{
  transform: scale(1);
}
/* hanbai */
.lp_wrap .hanbai .ruikei {
  position: absolute;
  top: 28.5%;
  left: 18%;
  width: 41.6%;
  overflow: hidden;
}
.lp_wrap .hanbai .ruikei img{
  transform: translateY(100%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .hanbai .ruikei.trigger.move img{
  transform: translateY(0%);
}
/* post */
.lp_wrap .post{
  overflow: hidden;
}
.lp_wrap .post .icon li {
  position: absolute;
  top: 22%;
}
.lp_wrap .post .icon li:nth-child(1) {
  left: 11%;
  width: 37.6%;
}
.lp_wrap .post .icon li:nth-child(2) {
  left: 51%;
  width: 37.6%;
}
.lp_wrap .post .icon li img{
  transition: 0.6s 0.0s ease;
}
.lp_wrap .post .icon li:nth-child(1) img{
  transform: translateX(-150%);
}
.lp_wrap .post .icon li:nth-child(2) img{
  transform: translateX(150%);
}
.lp_wrap .post .icon li.trigger.move img,
.lp_wrap .post .icon li.trigger.move ~ li img{
  transform: translateX(0%);
}
.lp_wrap .post .kakeru {
  position: absolute;
  top: 29%;
  left: 44.667%;
  width: 10.667%;
}