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

/*-----------------------------------------------
  子要素をフェードイン
  親要素：js-fadeIn-list
  子要素：js-fadeIn-item
*/
.js-fadeIn-list {}
.js-fadeIn-list .js-fadeIn-item {
  opacity: 0;
  will-change: transform, opacity; /* アニメーションの軽量化・滑らかさ向上 */
}

/*-----------------------------------------------
  子要素を下からスライドイン
  親要素：js-slideIn-list
  子要素：js-slideIn-item　+　以下の個別の動きのスタイル
  または、.js-add-class　とセット
*/
.anm-slideIn-item {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.anm-slideIn-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

/*-----------------------------------------------
  ページタイトル画像、画像に塗りのアニメ—ション追加
  画像のコンテナに .js-xxxと.anm-pic-slideを追加
  （jsとセットで使用）
*/
.anm-pic-slide {
  position: relative;
  /*overflow: hidden;*/
  opacity: 0;
}
.anm-pic-slide.is-active {
  opacity: 1;
}
.anm-pic-slide::before {
  content: "";
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-main-dark-green);
  z-index: 2;
  /*transform: translateY(0);*//* 最初は要素全体を覆う */
}
.anm-pic-slide.is-active::before {  
  animation: slideUpMask 0.6s 0s cubic-bezier(0.75, 0, 0.15, 1) forwards;/*ディレイ0*/
}

/*-----------------------------------------------
  ページタイトル用
*/
.l-head_img.anm-pic-slide {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.l-head_img.anm-pic-slide.is-active {
  opacity: 1;
}
/*タイトルテキストが表示されてから表示されるようディレイを追加*/
.l-head_img.anm-pic-slide.is-active::before {  
  animation: slideUpMask 0.4s 0.4s cubic-bezier(0.75, 0, 0.15, 1) forwards;
}

/* 背景レイヤーが下から上へ抜けていく動き */
@keyframes slideUpMask {
  0% {
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    top:0;
    left: 0;
    width: 100%;
    height: 0;
  }
}