@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%;
        }

        .fv-24{
            position: absolute;
            bottom: 0%;
            left: 7.9%;
            z-index: 6;
            width: 37.5%;
            transition-delay: 0s;
            overflow: hidden;
        }
        .fv-text {
            position: absolute;
            top: 0%;
            right: 0%;
            z-index: 5;
            width: 100%;
            overflow: hidden;
        }


/* style hair cont */



/* nijimi cont */
        .item-cont {
            position: relative;
            display: inline-block;
        }

        .fade-blur-effect {
            position: absolute;
            bottom: 0%;
            left: 0%;
            width: 100%;
            opacity: 0;
            filter: blur(15px); /* ぼかしを強めに */
            transition: opacity 2s ease-out, filter 1.5s ease-out;
        }

        .fade-blur-effect.show {
            opacity: 1;
            filter: blur(0);
        }


/* img kirikae */

    .hair-bk {
        position: relative; /* ここで基準を作る */
        width: 100%;
        max-width: 750px;
        aspect-ratio: 750 / 1240; /* 高さを維持 */
        overflow: hidden; /* はみ出しを防ぐ */
    }

    /* ベース画像 */
    .base-image {
        width: 100%;
        height: auto;
        display: block; /* 画像の下に余白を作らない */
    }

    /* 前面の画像コンテナ */
    .style-hair_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 切り替え画像 */
    .style-hair_img img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }

    /* アクティブな画像だけ表示 */
    .style-hair_img img.active {
        display: block;
    }
    
    

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

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


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

/* cta area*/

.cart{
	position: relative;
}

.btn {
	position: absolute;
}

.btn2 {
    bottom: 23.5%;
    left: 13.3%;
    width: 44.7%;
}

.btn3 {
    bottom: 27.4%;
    left: 23.9%;
    width: 52%;
}
.btn4 {
    bottom: 17.6%;
    left: 7.5%;
    width: 85%;
}
.btn5 {
    bottom: 53.3%;
    left: 25.9%;
    width: 47.8%;
}
.btn6 {
    bottom: 11.95%;
    left: 25.9%;
    width: 47.8%;
}
.btn7 {
    bottom: 9.85%;
    left: 8.1%;
    width: 23%;
}
.btn7-2 {
    bottom: 9.85%;
    left: 34.9%;
    width: 23%;
}
.btn8 {
    bottom: 9.85%;
    right: 6.25%;
    width: 23%;
}
.btn9 {
    bottom: 4.6%;
    left: 7.9%;
    width: 23.5%;
}
.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; 
}




/* 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.95); /* 開始時は0にスケール */
  transition: 1s ease;
  transition: opacity 1s ease-in-out, transform 0.8s ease-out;
  opacity: 0;
}

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

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


/* straight style */

.straight-sy{
    position: absolute;
    bottom: 12%;
    right: 4%;
    width: 70.65%;
    transition-delay: 0s;
}

.straight-sy0{
    position: absolute;
    top: 0%;
    left: 0%;
    max-width: 100%;
    transition-delay: 0.5s;
}
.straight-sy1{
    position: absolute;
    top: 19.9%;
    left: 0%;
    max-width: 100%;
    transition-delay: 0s;
}
.straight-sy2 {
    position: absolute;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    transition-delay: 0.5s;
}


/* how to use */


.step01{
    position: absolute;
    top: 7.1%;
    right: 8.5%;
    width: 87.2%;
    transition-delay: 0s;
}

.step02 {
    position: absolute;
    top: 37.25%;
    left: 6.5%;
    width: 87%;
    transition-delay: 0.2s;
}
.step03 {
    position: absolute;
    bottom: 3.15%;
    right: 5.9%;
    width: 86.9%;
    transition-delay: 0.4s;
}


/* 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;
}