@charset "UTF-8";
/* CSS Document */

body{

margin: 0 auto;
padding: 0;
text-decoration: none;

}

html { scroll-behavior: smooth;}

img{
width: 100%;
vertical-align: bottom;

}

a {
  opacity: 1;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.5;
}


.wrap{

width: 750px;
max-width: 100%;
margin: 0 auto;
padding: 0 0 122px 0;

}

/* fv */
.fuwa-gimick {
  position: relative;
  width: 750px;
  max-width: 100%;
}



/* 各パーツの基本設定 */
.floating {
  position: absolute; 
  width: 150px;
  height: 150px;
  animation-name: float; 
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; 
}

/* 各パーツの位置と重ね順を指定 */
.floating.part1 {
    top: 6%;
    right: 0%;
    z-index: 4;
    width: 54%;
    animation-duration: 3s;
}
.floating.part2 {
    top: -2.5%;
    left: 0%;
    z-index: 3;
    width: 64%;
    animation-duration: 1.8s;
}

.fv-text {
    position: absolute;
    top: 36.65%;
    right: 3%;
    z-index: 5;
    width: 64%;
}



/* 共通のアニメーション定義 */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

/* cta area*/

        .cart{
            position: relative;
        }

        .btn {
            position: absolute;
        }

        .btn2 {
            bottom: 11.5%;
            left: 16.5%;
            width: 66.7%;
        }

        .btn3 {
            bottom: 8.5%;
            left: 16.5%;
            width: 66.7%;
        }
        .btn4 {
            bottom: 0%;
            left: 26%;
            width: 48%;
        }
        .btn5 {
            bottom: 12.9%;
            left: 11.9%;
            width: 28.2%;
        }
        .btn6 {
            bottom: 12.9%;
            right: 11.9%;
            width: 28.2%;
        }
        .btn7 {
            top: 36.85%;
            left: 11.9%;
            width: 28.2%;
        }
        .btn8 {
            top: 36.85%;
            right: 11.9%;
            width: 28.2%;
        }
        .btn9 {
            bottom: 10.5%;
            left: 35.9%;
            width: 28.2%;
        }
        .btn10 {
            bottom: 4.6%;
            left: 35.1%;
            width: 23.5%;
        }
        .btn11 {
            bottom: 4.6%;
            right: 6%;
            width: 23.5%;
        }
        .btn12 {
            bottom: 5.4%;
            left: 6%;
            width: 23.5%;
        }
        .btn13 {
            bottom: 5.4%;
            left: 38.2%;
            width: 23.5%;
        }
        .btn14 {
            bottom: 5.4%;
            right: 6.2%;
            width: 23.5%;
        }


        .btn:hover {
            opacity: 0.6;
            transition: opacity 0.3s; 
        }

/* スライド設定 */

        .container {
            position: relative;
            overflow: hidden;
        }
        .slider {
            position: absolute;
            top: 26.5%;
            width: 100%;
        }
        .slick-slide img
        {
        display: block;
        width: 100%;
        margin: 0!important;
        padding: 0!important;
        }

/* ページネーション全体の調整 */
.slick-dots {
    bottom: -23px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}


/* モバイル（750px以下）ではページネーションの位置を調整 */
@media (max-width: 750px) {
    .slick-dots {
        bottom: 11px; /* 必要に応じて調整 */
    }
}



/* ドットのデフォルトスタイルを削除し、横棒に変更 */
.slick-dots li {
    list-style: none;
    width: 54px; /* 横棒の長さ */
    height: 0;
    margin: 0; 
    padding: 0;
}

/* 通常時の横棒 */
.slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff; /* 未選択時の色 */
    border: none;
    border-radius: 0;
    font-size: 0;
    transition: background-color 0.3s;
     padding: 3px;
}
.slick-dots li.slick-active button {
    background-color: #35d4a1 !important; /* アクティブ時の色 */
    width: 54px; 
    height: 0;
}

/* デフォルトのSlickの丸いボタンを強制的に非表示 */
.slick-dots li button:before {
    display: none !important;
    content: "";
}


/* 余白の発生を防ぐ */
.slick-dots li a {
    display: block; /* インラインの余白を削除 */
}

.slick-slide a:hover {
    opacity: 1 !important; /* 透明度の変化を防ぐ */
}


/* モバイル（750px以下）ではページネーションの位置を調整 */
@media (max-width: 750px) {
    .slick-dots {
        bottom: -11px; /* 必要に応じて調整 */
    }
}

/* fade-in 設定　スクロール時に発火 */

.fadeIn {
  transform: translate3d(0, 50px, 0);/* ここで開始位置を指定 その場の場合は削除 */
  transition: 1.4s ease;
  transition-delay: 0.7s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeDown {
  transform: translate3d(0, -50px, 0);/* ここで開始位置を指定 その場の場合は削除 */
  transition: 1.4s ease;
  transition-delay: 0.7s;
  opacity: 0;
}

.fadeDown.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeUp {
  transform: translate3d(0, 0, 0);/* ここで開始位置を指定 その場の場合は削除 */
  transition: 1.4s ease;
  transition-delay: 0.7s;
  opacity: 0;
}

.fadeUp.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeRight {
  transform: translate3d(50px, 0, 0);/* ここで開始位置を指定 その場の場合は削除 */
  /*margin-left: -50px;*/
  transition: 1.4s ease;
  transition-delay: 0.7s;
  opacity: 0;
}

.fadeRight.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeLeft {
  transform: translate3d(-50px, 0, 0); /*ここで開始位置を指定 その場の場合は削除 */
  transition: 1.4s ease;
  transition-delay: 0.7s;
  opacity: 0;
}

.fadeLeft.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* 拡大 */

.zoomIn {
  transform: scale(0); /* 開始時は0にスケール */
  transition: 1s ease;
  transition-delay: 0s;
  opacity: 0;
}

.zoomIn.animated {
  transform: scale(1); /* 通常サイズにスケール */
  opacity: 1;
}

/* 共通fade */
.fade-cont {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

/* funwari fv */

.fv-fnwr{
    position: absolute;
    bottom: 3.78%;
    left: 5.9%;
    z-index: 6;
    width: 61.5%;
    transition-delay: 0s;
}


/* refresh-sy */

.refresh-sy{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 100%;
    transition-delay: 0s;
}

.refresh-sy0{
    position: absolute;
    top: 0%;
    left: 0%;
    max-width: 100%;
    transition-delay: 0s;
}
.refresh-sy1{
    position: absolute;
    top: 0%;
    left: 0%;
    max-width: 100%;
    transition-delay: 0s;
}


/* how to use */


.active01{
    position: absolute;
    top: 8.7%;
    right: 0%;
    width: 100%;
    transition-delay: 0s;
}

.active02 {
    position: absolute;
    top: 17.9%;
    left: 0%;
    width: 100%;
    transition-delay: 0.2s;
}
.active03 {
    position: absolute;
    bottom: 46.5%;
    right: 0%;
    width: 100%;
    transition-delay: 0.4s;
}
.active04 {
    position: absolute;
    bottom: 31.2%;
    right: 0%;
    width: 100%;
    transition-delay: 0.4s;
}
.active05 {
    position: absolute;
    bottom: 13.8%;
    right: 0%;
    width: 100%;
    transition-delay: 0.6s;
}


/* flooting */
#page-top {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  max-width: 100%;
  z-index: 9999; 
  text-align: center;
      margin: 0;
  display: none;
}

#page-top img {
  width: 100%;
  height: auto;
}

#page-top a:hover {
    opacity: 1 !important; /* 透明度の変化を防ぐ */
}