@charset "UTF-8";
/* =========================================================
   animation.css
   参考サイト https://www.lazor-sapporo.jp/recruit/ の
   animation.css を解析し、同じ挙動を再現したもの。
   クラス名・イージング・秒数も参考サイトに合わせています。
   ========================================================= */

/* ---------------------------------------------------------
   1. ホバー系
   --------------------------------------------------------- */
/* 背景が右→左に塗りつぶされるボタン */
.a-bg-button1{position:relative;border:solid 1px transparent;transition:.4s border;overflow:hidden}
.a-bg-button1>span{z-index:2;position:relative;transition:.4s color}
.a-bg-button1::before{
  content:" ";transition-duration:.4s;transition-timing-function:cubic-bezier(.075,.82,.165,1);
  position:absolute;top:0;height:100%;width:0;left:auto;right:0;z-index:1;background-color:#fff;
}
.a-bg-button1:hover{border:solid 1px var(--gold);opacity:1}
.a-bg-button1:hover>span{color:var(--gold)}
.a-bg-button1:hover::before{width:100%;right:auto;left:0}

/* 下線が中央から伸びるリンク */
.a-after-border{position:relative;transition:.3s}
.a-after-border::after{
  transition:.4s;content:"";height:1px;width:100%;border-bottom:1px solid;display:block;transform:scale(0);
}
.a-after-border:hover{opacity:1}
.a-after-border:hover::after{transform:scale(1)}

/* 透明度 */
.a-opcity-7{transition:.3s}
.a-opcity-7:hover{opacity:.7}

/* ---------------------------------------------------------
   2. キーフレーム
   --------------------------------------------------------- */
@keyframes toLeft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes toRight{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}
@keyframes imageOpacity{0%{opacity:0}50%{opacity:0}75%{opacity:1}}
@keyframes heromain{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}}
@keyframes pathmove{
  0%{height:0;top:30px;opacity:0}
  50%{height:60px;opacity:1}
  100%{height:0;top:120px;opacity:0}
}
/* マーキー（右から左／左から右） */
@keyframes infinity-scroll-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes infinity-scroll-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.a-infinity-scroll--left{animation:infinity-scroll-left 40s infinite linear .5s both}
.a-infinity-scroll--right{animation:infinity-scroll-right 40s infinite linear .5s both}

/* ---------------------------------------------------------
   3. is-active が付いたら発動するアニメーション
      （JS側で .js-enter-active に is-active を付与）
   --------------------------------------------------------- */
.animate_to-left{transform:translateX(100%);opacity:0;transition:all cubic-bezier(.645,.045,.355,1) 1.2s}
.animate_to-left.is-active{opacity:1;transform:translateX(0)}

.animate_to-right{transform:translateX(-100%);opacity:0;transition:all cubic-bezier(.645,.045,.355,1) 1.2s}
.animate_to-right.is-active{opacity:1;transform:translateX(0)}

.animate_fadeUp{opacity:0;transform:translateY(10px);transition:opacity cubic-bezier(.645,.045,.355,1) .8s,transform cubic-bezier(.645,.045,.355,1) .8s}
.animate_fadeUp.is-active{opacity:1;transform:translateY(0)}

.animate_fadeUp2{opacity:0;transform:translateY(50px);transition:opacity cubic-bezier(.645,.045,.355,1) .6s,transform cubic-bezier(.645,.045,.355,1) .6s}
.animate_fadeUp2.is-active{opacity:1;transform:translateY(0)}

/* 連続する子要素が 0.2秒ずつ遅れて出る（縦） */
.animate_fadeYItem{opacity:0;transform:translateY(10px);transition:opacity cubic-bezier(.645,.045,.355,1) .6s,transform cubic-bezier(.645,.045,.355,1) .6s}
.animate_fadeYItem.is-active{opacity:1;transform:translateY(0)}
.animate_fadeYItem:nth-child(2){transition-delay:.2s}
.animate_fadeYItem:nth-child(3){transition-delay:.4s}
.animate_fadeYItem:nth-child(4){transition-delay:.6s}
.animate_fadeYItem:nth-child(5){transition-delay:.8s}
.animate_fadeYItem:nth-child(6){transition-delay:1s}

/* 同じく横方向 */
.animate_fadeXItem{opacity:0;transform:translateX(10px);transition:opacity cubic-bezier(.645,.045,.355,1) .6s,transform cubic-bezier(.645,.045,.355,1) .6s}
.animate_fadeXItem.is-active{opacity:1;transform:translateX(0)}
.animate_fadeXItem:nth-child(2){transition-delay:.2s}
.animate_fadeXItem:nth-child(3){transition-delay:.4s}
.animate_fadeXItem:nth-child(4){transition-delay:.6s}
.animate_fadeXItem:nth-child(5){transition-delay:.8s}

/* 色の幕が左→右に通り過ぎて写真が現れる（参考サイトの目玉演出） */
.animate_ImgBgSlide{overflow:hidden;position:relative}
.animate_ImgBgSlide img{position:relative;z-index:1;opacity:0}
.animate_ImgBgSlide::before{
  transform:translateX(-100%);transition:all cubic-bezier(.645,.045,.355,1) 1.2s;
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  background-color:rgba(175,153,23,.7);
}
.animate_ImgBgSlide.is-active::before{transform:translateX(100%)}
.animate_ImgBgSlide.is-active img{opacity:1;animation:imageOpacity cubic-bezier(.645,.045,.355,1) 1.2s}

/* 要素自体が左からスライドイン */
.animate_ImgSlide{overflow:hidden;position:relative;transform:translateX(-100%);transition:all cubic-bezier(.645,.045,.355,1) 1.2s}
.animate_ImgSlide.is-active{transform:translateX(0)}

.delay-2{transition-delay:.2s}
.delay-5{transition-delay:.5s}

/* ---------------------------------------------------------
   4. GSAP制御要素の初期状態
      （JSが無効／読み込み前でも中身が消えたままにならないようにする）
   --------------------------------------------------------- */
.js-fadein-effect1,.js-scale-effect1,
.js-stagger-effect1>*,.js-stagger-effect2>*,
.js-stagger-effect3>*,.js-stagger-effect4>*{will-change:transform,opacity}

/* ---------------------------------------------------------
   5. 動きを減らす設定の端末では全て停止（アクセシビリティ）
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .animate_ImgBgSlide img,.animate_to-left,.animate_to-right,
  .animate_fadeUp,.animate_fadeUp2,.animate_fadeYItem,.animate_fadeXItem{opacity:1!important;transform:none!important}
  .animate_ImgBgSlide::before{display:none}
  html{scroll-behavior:auto}
}