@charset "UTF-8";
/* =============================================================================
   パーシャルファイル
   ========================================================================== */
/* -----------------------------------------------------------------------------
   メディアクエリ
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   fade
   -------------------------------------------------------------------------- */
/* transition
    transition: all(適法するプロパティ名：allだと全て) 0.8s（変化に掛ける時間） ease（変化の種類） 0（変化の開始時間：0だとすぐ開始）;
    linear：一定
    ease ：開始と完了が滑らか
    ease-in：ゆっくり開始
    ease-out：ゆっくり終了
    ease-in-out：ゆっくり開始してゆっくり終了
*/
.fade-in {
  opacity: 0;
  -webkit-transition: all 2.5s ease;
  transition: all 2.5s ease;
}

.fade-show {
  opacity: 1;
}

.slide-in {
  opacity: 0;
}

.slide-show {
  -webkit-animation: slide-in 2s ease 0.5s 1 forwards;
          animation: slide-in 2s ease 0.5s 1 forwards;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* -----------------------------------------------------------------------------
   スクロールすると画像が左端から出現する表示アニメーション
   -------------------------------------------------------------------------- */
.picture-slide-anime {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: -webkit-clip-path 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: clip-path 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: clip-path 1.5s cubic-bezier(0.5, 1, 0.89, 1), -webkit-clip-path 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.picture-slide-anime.is-active {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

.picture-slide-anime img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 4s cubic-bezier(0.5, 1, 0.89, 1);
  transition: all 4s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}

.picture-slide-anime.is-active img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* -----------------------------------------------------------------------------
   ページが読み込まれたらTOPページのキャッチコピーが左端から出現する表示アニメーション
   -------------------------------------------------------------------------- */
.txt-slide-anime {
  -webkit-clip-path: inset(0 100% -20% 0);
          clip-path: inset(0 100% -20% 0);
  -webkit-transition: -webkit-clip-path 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition: -webkit-clip-path 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition: clip-path 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition: clip-path 1s cubic-bezier(0.5, 1, 0.89, 1), -webkit-clip-path 1s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

.txt-slide-anime.is-active {
  -webkit-clip-path: inset(-6% 0 -4% 0);
          clip-path: inset(-6% 0 -4% 0);
}

.txt-slide-anime img {
  -webkit-transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);
}

/* -----------------------------------------------------------------------------
   ページが読み込まれたらTOPページの企業ロゴがslide-inで出現する表示アニメーション
   -------------------------------------------------------------------------- */
.txt-slide-anime02 {
  opacity: 0;
}

.txt-slide-anime02.is-active {
  -webkit-animation: slide-in02 2.5s ease 3.5s forwards;
          animation: slide-in02 2.5s ease 3.5s forwards;
}

@-webkit-keyframes slide-in02 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-in02 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* -----------------------------------------------------------------------------
   複数ある項目（item）を順番に表示するアニメーション
   -------------------------------------------------------------------------- */
.slide-list-in {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.slide-list-show.is-active:nth-of-type(1) {
  -webkit-animation: slide-list-in 1s ease 0s 1 forwards;
          animation: slide-list-in 1s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show.is-active:nth-of-type(1) {
    -webkit-animation: slide-list-in 1s ease 0s 1 forwards;
            animation: slide-list-in 1s ease 0s 1 forwards;
  }
}
.slide-list-show.is-active:nth-of-type(2) {
  -webkit-animation: slide-list-in 1s ease 0s 1 forwards;
          animation: slide-list-in 1s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show.is-active:nth-of-type(2) {
    -webkit-animation: slide-list-in 1s ease 1s 1 forwards;
            animation: slide-list-in 1s ease 1s 1 forwards;
  }
}
.slide-list-show.is-active:nth-of-type(3) {
  -webkit-animation: slide-list-in 1s ease 0s 1 forwards;
          animation: slide-list-in 1s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show.is-active:nth-of-type(3) {
    -webkit-animation: slide-list-in 1s ease 2s 1 forwards;
            animation: slide-list-in 1s ease 2s 1 forwards;
  }
}
.slide-list-show.is-active:nth-of-type(4) {
  -webkit-animation: slide-list-in 1s ease 0s 1 forwards;
          animation: slide-list-in 1s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show.is-active:nth-of-type(4) {
    -webkit-animation: slide-list-in 1s ease 3s 1 forwards;
            animation: slide-list-in 1s ease 3s 1 forwards;
  }
}
@-webkit-keyframes slide-list-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-list-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* @keyframes

参考URL：https://qiita.com/soarflat/items/4a302e0cafa21477707f

@keyframes fadeIn（任意の名前） {
    0% {　//アニメーション開始時
        CSSプロパティ:値;
    }
    100% {　//アニメーション終了時
        CSSプロパティ:値;
    }
}
animation: fadeIn（任意の名前） 2s（変化に掛ける時間） ease（変化の種類） 0s（変化の開始時間：0だとすぐ開始） 1（繰り返す回数） normal（繰り返し時、往復処理をするかを指定）;
*/