/* ========== Base ========== */
body {
  background-color: #f1f1f1;
  margin: 0;
}

#wrap {
  margin: 0 auto;
  padding: 0;
  max-width: 750px;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

#wrap img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

#wrap video{
    width: 100%;
}

/* ========== Animation ========== */
.fade-up,
.fade-down,
.fadein-blur {
  opacity: 0;
}

.fadein-up-active {
  animation: fadeUPAnime 1s forwards;
}

@keyframes fadeUPAnime {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.mov {
    position: absolute;
  width: 80%;
    left: 10%;
    bottom: 2.5%;
}

.txt,.txt2 {
    position: absolute;
}

.img{
    position: absolute;
}
/* ========== Sections ========== */
.fv {
  position: relative;
}

.fv .txt {
  position: absolute;
  width: 70%;
  left: 15%;
  bottom: 23.5%;
  opacity: 1;
}



.fv .txt-copy{
    position: absolute;
    width: 14.7%; 
    left: 9%;
    bottom: 52.5%;
      opacity: 0;
  transform: translateY(15%);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fv .txt-copy.animate {
  opacity: 1;
  transform: translateY(0);
}

.luce1_01,
.luce1_03,
.luce1_05,
.luce1_08,
.luce1_12{
position: relative;
}

.luce1_01 .mov {
    /* position: absolute; */
    width: 84%;
    left: 8.8%;
    bottom: 3.2%;
}

.luce1_05 .txt{
   width: 50%;
   left: 25%; 
   bottom:70%;
}

.luce1_05 .mov{
    position: absolute;
     width: 80%;
    left: 10%;
    bottom: 2%;
    z-index: 99;
}

.luce1_08 .txt{
   width: 80%;
   left: 10%; 
   bottom:75%;
}

.luce1_08 .txt2{
   width: 62.5%;
   left: 18.7%; 
   bottom:6.5%;
}

.luce1_12 .txt{
   width:80%;
   left: 10%; 
   bottom:82%;
}


.privilege,
.privileges_05,
.privileges_06{
    position: relative;
}

.privilege .img {
    position: absolute;
}

.privilege .arrow {
    position: absolute;
    width: 9%;
    left: 45.5%;
    bottom: -1%;
    z-index: 99; 
}

.privilege .img1,
.privilege .img2,
.privilege .img3,
.privilege .img4{
    width: 81%;
    left: 9.5%;
}

.privilege .img1{
    bottom: 64%;
}
.privilege .img2{
    bottom: 45%;
}

.privilege .img3{
    bottom: 26%;
}

.privilege .img4{
    bottom: 7%;
}

.privilege .arrow1,
.privilege .arrow2,
.privilege .arrow3{
    position: absolute;
    width: 9%;
    left: 45.5%;
}
.privilege .arrow1{
    bottom: 61.5%;
}
.privilege .arrow2{
    bottom: 40.5%;
}

.privilege .arrow3{
    bottom: 19.5%;
}

.privileges_05 .txt{
    width: 70%;
    left: 15%;
    bottom: 8%;
}

.privileges_06 .img{
    left: 0;
    bottom: 4%;

}

.btn-wrap{
position: relative;
}

.btn-wrap .btn{
    position: absolute;
    width: 95%;
    left: 2.5%;
    bottom: 4%;
}



.btn {
  width: 91%;
  left: 5%;
  bottom: 8%;
  animation: flare-scale-btn 2s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes flare-scale-btn {
  0% {
    transform: scale(1);
    /* 通常サイズ */
  }

  50% {
    transform: scale(1.1);
    /* 拡大 */
  }

  100% {
    transform: scale(1);
    /* 元に戻る */
  }
}


.luce1_14{
    position: relative;
}

.luce1_14 .txt{
    width: 72%;
    left: 14.5%;
    bottom: 9%;
}



/* ========== offer ========== */


.offer-slider {
  position: relative;
}

.offer-slider .swiper {
  position: absolute;
  width: 108%;
  text-align: center;
  bottom: 1%;
  left: -4%;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide img {
  width: 90%;
  height: auto;
  padding: 0 1%;
}

.swiper-l .swiper-slide {
  width: 100%;
  transition-timing-function: linear !important;
}

.swiper-inner {
  position: relative;
  overflow: hidden;
}

.swiper .swiper-button-next {
  color: transparent;
  background-size: contain;
  /* 画像サイズをボタンに合わせる */
  background-repeat: no-repeat;
  background-position: center;
  width: 10%;
  right: -2%;
  height: 5rem;
}

.swiper .swiper-button-prev {
  color: transparent;
  background-size: contain;
  /* 画像サイズをボタンに合わせる */
  background-repeat: no-repeat;
  background-position: center;
  width: 10%;
  left: -2%;
  height: 5rem;
}

.swiper-pagination {
  display: none !important;
}



.floating-btn {
  position: fixed;
  bottom: -2%;
  margin: 0 auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex;
  justify-content: center;
  width: 100% !important;
  max-width: 750px !important;
  /* background-color: rgba(245, 215, 0, 0.7); */
}

.floating-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-btn img {
  max-width: 750px;
  height: auto;
  display: block;
}

.floating-btn.hide {
  opacity: 0 !important;
  visibility: hidden !important;
}