/* トップ-タイピングアニメーション */
#top section .char {
  opacity: 0;
  transform: translateY(0);
  transition: transform .05s ease, opacity .2s ease-in-out;
  /* タイピングアニメーションが始まるまでの秒数 */
  --typing-delay:.1s; 

  transition-delay: calc(var(--typing-delay) + var(--char-index) * .03s);
  display: inline-block !important;
/*  スペースをイキに*/
  white-space: pre;
}
#top section h2.show .char {
  opacity: 1;
  transform: translateY(0);
}

/* トップ-タイトル以外の項目(タイピングアニメーションが完了してから表示する) */
#top section h3,
#top section p {
  opacity: 0;
  transform: translateY(50px);
  transition: transform .5s ease, opacity .5s ease-in-out;
}
#top section.show.completed_char_typing h3,
#top section.show.completed_char_typing p {
  opacity: 1;
  transform: translateY(0);
}

/* トップ商品詳細パララックス制御 */
#top .product_head {
  overflow: hidden;
  /* スクロール時のパララックスが何秒遅れて動くか */
  --delay-sec:500ms; 
}
#top .product_head>.swiper {
  /* パララックスの動作範囲
  --delay-ratio：現在の表示割合(0：画面下部からまだ出ていない、1：要素が画面外にすべて出た)
  * 範囲
  例：var(--delay-ratio) * -25vhなら、要素が画面内にいる間に、25vhズレて動く
  */
  transform: scale(1.1) translateY(calc(var(--delay-ratio) * -25vh));
}



/*商品詳細-タイピングアニメーション*/
#product_list .cover .product_detail .product_list_box .text_box h3 .char {
  opacity: 0;
  transform: translateY(0);
  transition: transform .05s ease, opacity .2s ease-in-out;
  transition-delay: calc(var(--char-index) * .03s);
  display: inline-block;
}
#product_list .cover .product_detail .product_list_box.active .text_box h3 .char {
  opacity: 1;
  transform: translateY(0);
}

#product_list .cover .product_detail .product_list_box .text_box p {
  opacity: 0;
  transform: translateY(10px);
  transition: transform .4s ease, opacity .4s ease;
  transition-delay: calc(var(--title-char-length) * .03s + .03s);
}
#product_list .cover .product_detail .product_list_box.active .text_box p {
  opacity: 1;
  transform: translateY(0);
}
#product_list .cover .product_detail .product_list_box .text_box ul li {
  opacity: 0;
  transform: translateX(20px);
  transition: transform .3s ease, opacity .3s ease;
  transition-delay: calc(var(--title-char-length) * .03s + .03s + var(--list-index) * .1s);
}
#product_list .cover .product_detail .product_list_box.active .text_box ul li {
  opacity: 1;
  transform: translateX(0);
}


#product_list .cover .product_detail .product_list_box figure{
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: calc(var(--title-char-length) * .03s + .03s);
}
#product_list .cover .product_detail .product_list_box.active figure{
  opacity: 1;
  transform: translateY(0);
}


#product_list .cover .product_detail .product_list_box .side_title {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  transition-delay: calc(var(--char-index) * .04s);
  display: inline-block;
}
#product_list .cover .product_detail .product_list_box.active .side_title {
  opacity: 1;
}




/* 強みページのパララックス制御 */
#strengths .movie_wrap {
  /* 動画1枚あたりのスクロール量 */
  height: calc(var(--movie-count) * 400vh);

  /* スクロール監視しきい値 */
  --visiblescroll-threshold:0,1;
}
#strengths .movie_wrap.scroll_target .movieblock {
  position: fixed;
  top:var(--top-pos);
}
#strengths .movie_wrap+.movie_wrap .movieblock {
  margin-top:150px;
}
#strengths .movie_wrap.arrival_top .movieblock {
  top:0;
  margin-top: 0;
}
#strengths .movie_wrap.arrival_bottom .movieblock {
  position: absolute;
  bottom:0;
  top: initial;
  height: 100vh;
}
#strengths .strong_point .movieblock {
  padding-bottom: 0;
  height: 100%;
}

#strengths .movie_wrap h3{
  opacity: 0;
  transition:opacity .2s ease-in-out; 
  transition-delay:0s;
}
#strengths .movie_wrap h3.view {
  opacity: 1;
}


#strengths .movie_wrap h2>.char,
#strengths .movie_wrap h3>.char {
  opacity: 0;
  transform: translateY(0);
  transition: transform .05s ease, opacity .2s ease-in-out;
  display: inline-block !important;
/*  スペースをイキに*/
  white-space: pre;
}
#strengths .movie_wrap h2>.char {
  transition-delay: calc(var(--char-index) * .03s);
}
#strengths .movie_wrap h3>.char {
  transition-delay: calc(.1s + var(--char-index) * .03s);
}


#strengths .movie_wrap h2.view>.char,
#strengths .movie_wrap h3.view>.char {
  opacity: 1;
  transform: translateY(0);
}


#strengths .movie_wrap .left_block p.current{
  opacity: 0;
  transition: opacity .5s ease-in-out;
  transition-delay: .2s;
}
#strengths .movie_wrap .left_block p.current.view{
  opacity: 1;
}

#strengths .movie_wrap h2.flow,
#strengths .movie_wrap h3.flow,
#strengths .movie_wrap .left_block p.flow {
  transform:translateY(calc((1 - (1 - var(--current-ratio)) / 0.2) * -100vh));
}



#strengths .movie_wrap.arrival_bottom h2.current,
#strengths .movie_wrap.arrival_bottom h3.current,
#strengths .movie_wrap.arrival_bottom .left_block p.current {
  display: none;
}


#strengths .strong_point .strong_point_cat {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
#strengths .strong_point .strong_point_cat.view {
  opacity:1;
}