/* =========================
  基本レイアウト
========================= */
#aspara{
  max-width:750px;
  margin:0 auto;
}

#aspara img{
  display:block;
  width:100%;
}

/* FV基準 */
#aspara .fv-wrap{
  position:relative;
  width:100%;
}

/* 背景 */
#aspara .fv-bg{
  position:relative;
  z-index:1;
}

/* =========================
  上物 共通
========================= */
#aspara .fv-aspara,
#aspara .fv-shaki,
#aspara .fv-syun,
#aspara .fv-name{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  pointer-events:none;

  opacity:0;
  transform: translate3d(0,0,0);
  will-change: opacity, transform;
}

/* =========================
  アスパラ（主役）
========================= */
#aspara .fv-aspara{
  transform: translateY(60px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.61,.36,1);
}

#aspara .fv-aspara.is-show{
  opacity:1;
  transform: translateY(0);
}

/* =========================
  シャキッ
========================= */
#aspara .fv-shaki{
  transform: translateX(-24px);
}

#aspara .fv-shaki.is-show{
  opacity:1;
  transform: translateX(0);
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.34,1.56,.64,1);
}

/* =========================
  旬（フェードのみ）
========================= */
#aspara .fv-syun{
  opacity:0;
  transform: translateY(6px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

#aspara .fv-syun.is-show{
  opacity:1;
  transform: translateY(0);
}
/* =========================
  商品名
========================= */
#aspara .fv-name{
  transform: translateX(-20px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

#aspara .fv-name.is-show{
  opacity:1;
  transform: translateX(0);
}
