@charset "utf-8";

:root {
    --main-color: #F5F5F2;
    --sub-color: #FFF0E6;
    --accent-color: #FFF;
    --pale-text-color: rgba(129, 108, 74, 0.1);
    --normal-text-color: #816C4A;
    --hb-back-color: #F5F5F2;
    --hp-gray-color: #;
    /* --back-gradient-color: linear-gradient(#A60000, #C20000); */
}

.f-fade-in {
    opacity: 0;
    animation: fadeInAnimation 2.3s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

@keyframes blur {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blur {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 右からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInRight {
    -webkit-animation-name: fadeInRightAnime;
    animation-name: fadeInRightAnime;
    /*アニメーションの名前*/
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    /*アニメーションの時間を1.5秒に設定*/
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /*アニメーション実行後、要素が表示されたままにする*/
    opacity: 1;
}

@-webkit-keyframes fadeInRightAnime {
    0% {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
        /*100px分横にずれる*/
    }

    100% {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /*元の位置*/
    }
}

@keyframes fadeInRightAnime {
    0% {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
        /*100px分横にずれる*/
    }

    100% {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /*元の位置*/
    }
}

.fadeInRightTrigger {
    opacity: 0;
    /*非表示*/
}

/* 左からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInLeft {
    -webkit-animation-name: fadeInLeftAnime;
    animation-name: fadeInLeftAnime;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

@-webkit-keyframes fadeInLeftAnime {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeftAnime {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInLeftTrigger {
    opacity: 0;
}

/* だんだんと現れる */
/* jQueryで追加・削除 */
.fadeIn-delay {
        -webkit-animation: fadeUpAnime forwards 3s cubic-bezier(.4,.4,0,1);
        animation: fadeUpAnime forwards 3s cubic-bezier(.4,.4,0,1);
}


    @-webkit-keyframes fadeInAnime {
        from {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(15px);
            transform: translateY(15px);
            /*縦方向に30pxずらす*/
        }
    
        to {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }
    
    @keyframes fadeInAnime {
        from {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(15px);
            transform: translateY(15px);
            /*縦方向に100pxずらす*/
        }
    
        to {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
}

.fadeInTrigger {
    opacity: 0;
    /*非表示*/
}

/* 下からふわっと現れる */
/* jQueryで追加、削除 */
.fadeUp {
    -webkit-animation: fadeUpAnime forwards 1s .1s cubic-bezier(.4,.4,0,1);
    animation: fadeUpAnime forwards 1s .1s cubic-bezier(.4,.4,0,1);
}

@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
        /*縦方向に30pxずらす*/
    }

    to {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /*元の位置*/
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateY(15px);
        transform: translateY(20px);
        /*縦方向に100pxずらす*/
    }

    to {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /*元の位置*/
    }
}

.fadeUpTrigger {
    opacity: 0;
    /*非表示*/
}

/* 段々と表示 */

/* ここからスクロール促す */
.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    right: 10vw;
    top: 34vh;
    /*全体の高さ*/
    height: 50px;
    z-index: 10;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
    /*描画位置*/
    position: absolute;
    left: -15px;
    top: -15px;
    /*テキストの形状*/
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

@media (min-width:860px) {

    .scrolldown1 {
        right: 10vw;
        top: 43vh;
    }
}

/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 30px;
    background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 30px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 50px;
        opacity: 0;
    }
}

/* ここからFV流れるテキスト */
@keyframes text-flowing {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}



/* 金色からゆっくりぼやけて登場するテキストここから */
.copy__line > span {
    --continuous-gradient: linear-gradient(90deg, 
        #ffffff 0%,
        #ffffff 25%,
        #f0e68c 40%,
        #ffbf00 55%,
        #f0e68c 100%
    );
}
#FV {
    text-align: center;
}

.copy__line {
    display: block;
    position: relative;
}

.copy__line > span {
    display: inline-block;
    
    /* 1. クロップ（切り抜き）の初期状態: 非表示 */
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0); 
    
    /* 2. ブラーと透明度の初期状態 */
    filter: blur(25px);
    opacity: 0.5;
    
    /* 3. 光沢（グラデーション）設定: 連続グラデーションを使用 */
    background: var(--continuous-gradient);
    
    /* ✨ 600%に拡大し、アニメーション全体を動かす ✨ */
    background-size: 600% 100%;
    
    /* ✨ 初期位置を右外側に設定 ✨ */
    background-position: 200% 0; 
    
    /* 4. 文字表示（グラデーションをクリップ） */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 

    /* 5. トランジション設定（色変化関連のトランジションは background-position に集約） */
    transition: 
        /* 登場アニメーション (クロップ、ブラー、透明度) */
        clip-path 3s cubic-bezier(0.2, 1, 0.3, 1),
        -webkit-clip-path 3s cubic-bezier(0.2, 1, 0.3, 1),
        filter 5s cubic-bezier(0.2, 1, 0.3, 1),
        opacity 8s cubic-bezier(0.2, 1, 0.3, 1),
        
        /* ✨ 連続グラデーション流動用: アニメーション時間を長めにする ✨ */
        background-position 2.5s cubic-bezier(0.2, 1, 0.3, 1);
}

/* * アニメーション実行時 (.is-active): 登場アニメーション完了状態
 */
.copy__line.is-active > span {
    /* 1. クロップ、ブラー、透明度を解除 */
    clip-path: inset(0 0% 0 0); 
    -webkit-clip-path: inset(0 0% 0 0);
    filter: blur(0px);
    opacity: 1;
    
    /* ✨ 2. 背景全体を左端まで移動させる (右から金色の波、続いて白い波が流れる) ✨ */
    background-position: 0% 0; 
}
/* 金色からゆっくりぼやけて登場するテキストここまで */

/* ふわふわアニメーションここから */
.fuwafuwa {
  animation-name: floating;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes floating {
   0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.fuwafuwa-reverse {
  animation-name: floating-reverse;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes floating-reverse {
   0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
/* ふわふわアニメーションここまで */

/* マーカーアニメーションここから */
.marker {

  /* マーカーを引く */
  background:linear-gradient(transparent 65%, rgba(255, 153, 0,0.5) 35%); /* マーカーを引く */
  
  /* インライン属性を指定する */
  display: inline;     

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 2s .5s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}
/* マーカーアニメーションここまで */

/* FV背景画像アニメーションここから */
/* #FV {
  animation-name: fvimgzoom;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes fvimgzoom {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 120%;
  }
} */
/* FV背景画像アニメーションここまで */