/* ==============================


ローディング


=================================*/
body {
  margin: 0;
  padding: 0;
}
.loading {
  position: fixed;
  z-index: 10000000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #fdfdfd;
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}
.loading .circle {
  display: block;
  position: relative;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  border-top: 7px solid #81D1F3;
  border-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal both;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==============================


section04 marker


=================================*/
/*アニメーション前*/
.marker01 {
  padding: 0 5px;
  background-image: linear-gradient(#fff, #fff);
  background-size: 0 100%; /*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 1.0s cubic-bezier(.78, -0.01, .1, .99);
  transition-delay: 0.4s;
}
/*アニメーション後*/
.marker01.active {
  background-size: 100% 100%; /*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}
/*アニメーション前*/
.marker02 {
  margin: 0 5px;
  background-image: linear-gradient(#1d1f23, #1d1f23);
  background-size: 0 100%; /*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: .5s cubic-bezier(.78, -0.01, .1, .99);
  transition-delay: 0.2s;
}
/*アニメーション後*/
.marker02.active {
  background-size: 100% 100%; /*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}
/*文字の透明度*/
.marker01 > span {
  opacity: 0;
  transition: .3s;
  transition-delay: 0.6s;
}
.marker01.active > span {
  opacity: 1;
}
/* ==============================


h1 marker


=================================*/
/*アニメーション前*/
.marker03 {
  padding: 0 15px;
  background-image: linear-gradient(#fff, #fff);
  background-size: 0 100%; /*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 1.0s cubic-bezier(.78, -0.01, .1, .99);
  transition-delay: 0.8s;
}
/*アニメーション後*/
.marker03.active {
  background-size: 100% 100%; /*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}
/*アニメーション前*/
.marker04 {
  background-image: linear-gradient(#1d1f23, #1d1f23);
  background-size: 0 100%; /*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: .5s cubic-bezier(.78, -0.01, .1, .99);
  transition-delay: 0.8s;
}
/*アニメーション後*/
.marker04.active {
  background-size: 100% 100%; /*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}
/*文字の透明度*/
.marker03 > span {
  opacity: 0;
  transition: .3s;
  transition-delay: 1.2s; /*0.4遅れ*/
}
.marker03.active > span {
  opacity: 1;
}
@media screen and (max-width:767px) {
  /*アニメーション前*/
  .marker03 {
    padding: 0 2vw;
  }
}
/*------------------------------------------*/
/*--------------kv-----------------*/
/*------------------------------------------*/
.kv__container p {
  opacity: 0;
  transition: all 1.3s cubic-bezier(0.38, 0.1, 0, 0.89);
  transform: translateX(-5%);
}
.kv__container.active p {
  opacity: 1;
  transform: translateX(0%);
}
.kv__text_anchor::before {
  transition: all 1.3s cubic-bezier(0.38, 0.1, 0, 0.89);
  opacity: 0;
}
.active .kv__text_anchor::before {
  opacity: 1;
}
.kv__container .inner .kv__text_anchor p, .kv__container .inner .kv__text_anchor::before {
  transition-delay: 1.5s;
}
.kv__container .inner .kv__text_title-sub {
  transition-delay: 0.4s;
}
.kv__container .inner .kv__text_title {
  transition-delay: 0.7s;
}
.kv__container .inner .kv__text_title-sub-sub {
  transition-delay: 1.7s;
}
.kv__container .inner .kv__text_txt.k01 {
  transition-delay: 1.9s;
}
.kv__container .inner .kv__text_txt.k02 {
  transition-delay: 2.1s;
}
/*------------------------------------------*/
/*--------------kv-----------------*/
/*------------------------------------------*/
.kv_botton_nav {
  opacity: 0;
  transform: translateY(40%);
  transition: all 1.8s cubic-bezier(0.38, 0.1, 0, 0.89);
  transition-delay: 2.2s;
}
.kv_botton_nav.active {
  opacity: 1;
  transform: translateY(0%);
}

@media screen and (max-width:767px) {
.kv_botton_nav {
  transform: translateY(5%);
  transition-delay: 0s;
    
  transition: all 2.2s cubic-bezier(0.38, 0.1, 0, 0.89);

}
}
/* ==============================


スクロールアニメーション


=================================*/
.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.7s ease-in-out;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/*------------------------------------------*/
/*--------------sec09周り-----------------*/
/*------------------------------------------*/
.sec04__title.element {
  transform: translateX(-20%);
  transition: all 0.8s cubic-bezier(0.73, 0.27, 0.19, 0.9);
}
.sec04__title.is-fadein {
  transform: translateX(0);
}
/*------------------------------------------*/
/*--------------sec09周り-----------------*/
/*------------------------------------------*/
.sec09__point.element {
  transform: translateX(-50%)skewX(-30deg);
  transition: all 1.5s cubic-bezier(0.73, 0.27, 0.19, 0.9);
}
.sec09__point.is-fadein {
  transform: translateX(0)skewX(-30deg);
}
.sec09__bg-img-box.element {
  transform: translate(0%, 15%);
  transition: all 1.2s cubic-bezier(0.51, 0.35, 0.49, 0.88);
  transition-delay: 0.2s;
}
.sec09__bg-img-box.is-fadein {
  transform: translate(0%, 0%);
}
.sec09__meeting.element {
  transition: all 1.3s cubic-bezier(0.73, 0.27, 0.19, 0.9);
  transform: translateY(60px);
}
.sec09__meeting.is-fadein {
  transform: translateY(0px);
}
/*------------------------------------------*/
/*--------------sec09周り-----------------*/
/*------------------------------------------*/
.sec10__guest.element li img {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.4s ease-in-out;
}
.sec10__guest.is-fadein li img {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sec10__guest.is-fadein li:nth-child(1) img {
  transition-delay: 0.2s;
}
.sec10__guest.is-fadein li:nth-child(2) img {
  transition-delay: 0.4s;
}
.sec10__guest.is-fadein li:nth-child(3) img {
  transition-delay: 0.6s;
}
.sec10__guest.is-fadein li:nth-child(4) img {
  transition-delay: 0.8s;
}
.sec10__guest.is-fadein li:nth-child(5) img {
  transition-delay: 1.0s;
}