@charset "UTF-8";

/* ローディングアニメーション */
.ld-anim1 {
  position: relative;
  bottom: 0;
  -webkit-animation: ld-anim1 2.2s ease-in-out infinite;
  -webkit-transform-origin: middle center;
  -webkit-transform: rotate(0deg);
  animation: ld-anim1 2.2s ease-in-out infinite;
  transform-origin: middle center;
  transform: rotate(0deg);
}
  @-webkit-keyframes ld-anim1 {
    0%{
      -webkit-transform: rotate(0deg);
      bottom: 0;
    }
    20% {
      -webkit-transform: rotate(5deg);
      bottom: 5px;  
    }
    50% {
      -webkit-transform: rotate(0deg);
      bottom: 0px;  
    }
    70% {
      -webkit-transform: rotate(-5deg);
      bottom: 5px;  
    }
    100% {
      -webkit-transform: rotate(0deg);
      bottom: 0;
    }
  }
  @keyframes ld-anim1 {
    0%{
      transform: rotate(0deg);
      bottom: 0;
    }
    20% {
      transform: rotate(5deg);
      bottom: 5px;  
    }
    50% {
      transform: rotate(0deg);
      bottom: 0px;  
    }
    70% {
      transform: rotate(-5deg);
      bottom: 5px;  
    }
    100% {
      transform: rotate(0deg);
      bottom: 0;
    }
  }

.ld-anim2 {
  -webkit-animation: ld-anim2 .6s both linear 1s;
  -webkit-transform-origin: bottom left;
  animation: ld-anim2 .6s both linear 1s;
  transform-origin: bottom left;
}
  @keyframes ld-anim2 {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      -webkit-transform: scale3d(0, 0, 0);
      -ms-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }
    10% {
      -webkit-transform: scale3d(.3, .3, .3);
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.4, 1.4, 1.4);
      -ms-transform: scale3d(1.4, 1.4, 1.4);
      transform: scale3d(1.4, 1.4, 1.4);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
      -ms-transform: scale3d(.9, .9, .9);
      transform: scale3d(.9, .9, .9);
    }
    60% {
      -webkit-transform: scale3d(1.08, 1.08, 1.08);
      -ms-transform: scale3d(1.08, 1.08, 1.08);
      transform: scale3d(1.08, 1.08, 1.08);
    }
    80% {
      -webkit-transform: scale3d(.95, .95, .95);
      -ms-transform: scale3d(.95, .95, .95);
      transform: scale3d(.95, .95, .95);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

.ld-anim3 {
  -webkit-animation: ld-anim3 2.3s ease-in-out infinite;
  -webkit-transform-origin: bottom center;
  animation: ld-anim3 2.3s ease-in-out infinite;
  transform-origin: bottom center;
}
  @-webkit-keyframes ld-anim3 {
    0% {
      -webkit-transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(-3deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }
  @keyframes ld-anim3 {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

.ld-anim4 {
  -webkit-animation: ld-anim4 2.1s ease-in-out infinite;
  -webkit-transform-origin: bottom center;
  animation: ld-anim4 2.1s ease-in-out infinite;
  transform-origin: bottom center;
}
  @-webkit-keyframes ld-anim4 {
    0% {
      -webkit-transform: translateY(0px);
    }
    10% {
      -webkit-transform: translateY(-9px);
    }
    25% {
      -webkit-transform: translateY(0px);
    }
    31% {
      -webkit-transform: translateY(-4px);
    }
    36% {
      -webkit-transform: translateY(0px);
    }
    40% {
      -webkit-transform: translateY(-2px);
    }
    43% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(0px);
    }
  }
  @keyframes ld-anim4 {
    0% {
      transform: translateY(0px);
    }
    10% {
      transform: translateY(-9px);
    }
    25% {
      transform: translateY(0px);
    }
    31% {
      transform: translateY(-4px);
    }
    36% {
      transform: translateY(0px);
    }
    40% {
      transform: translateY(-2px);
    }
    43% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(0px);
    }
  }

/* TOP人物出現 */
.anim1 {
  -webkit-animation: anim .5s both ease-in 3.5s;
  animation: anim .5s both ease-in-out 3.5s;
}
.anim2 {
  -webkit-animation: anim 1s both ease-in .4s;
  animation: anim 1s both ease-in-out .4s;
  visibility: visible !important;
}
  @-webkit-keyframes anim {
    0% {
      -webkit-transform: translate(0px, 800px);
    }
    60% {
      -webkit-transform: translate(0px, -65px);
    }
    70% {
      -webkit-transform: translate(0px, -45px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
    }
  }
  @keyframes anim {
    0% {
      transform: translate(0px, 800px);
    }
    60% {
      transform: translate(0px, -65px);
    }
    70% {
      transform: translate(0px, -45px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }

.anim3 {
  -webkit-animation: anim3 1s both ease-in .4s;
  animation: anim3 1s both ease-in-out .4s;
  visibility: visible !important;
}
  @-webkit-keyframes anim3 {
    0% {
      -webkit-transform: translate(0px, 300px);
    }
    60% {
      -webkit-transform: translate(0px, -65px);
    }
    70% {
      -webkit-transform: translate(0px, -45px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
    }
  }
  @keyframes anim3 {
    0% {
      transform: translate(0px, 300px);
    }
    60% {
      transform: translate(0px, -65px);
    }
    70% {
      transform: translate(0px, -45px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }

/* スライドイン */
.anim-slide1 {
  -webkit-animation: anim-slide1 .4s both ease-in-out 3.2s;
  animation: anim-slide1 .4s both ease-in-out 3.2s;
}
  @-webkit-keyframes anim-slide1 {
    0% {
      -webkit-transform: translateY(-400%);
    }
    85% {
      -webkit-transform: translateY(20%);
    }
    100% {
      -webkit-transform: translateY(0%);
    }
  }
  @keyframes anim-slide1 {
    0% {
      transform: translateY(-400%);
    }
    85% {
      transform: translateY(20%);
    }
    100% {
      transform: translateY(0%);
    }
  }

.anim-slide2 {
  -webkit-animation: anim-slide2 .6s both ease-in-out 3.3s;
  animation: anim-slide2 .6s both ease-in-out 3.3s;
}
  @-webkit-keyframes anim-slide2 {
    0% {
      -webkit-transform: translateY(-400%);
    }
    85% {
      -webkit-transform: translateY(15%);
    }
    100% {
      -webkit-transform: translateY(0%);
    }
  }
  @keyframes anim-slide2 {
    0% {
      transform: translateY(-400%);
    }
    85% {
      transform: translateY(15%);
    }
    100% {
      transform: translateY(0%);
    }
  }

.anim-slide3 {
  -webkit-animation: anim-slide3 .5s both ease-in-out 3.1s;
  animation: anim-slide3 .5s both ease-in-out 3.1s;
}
  @-webkit-keyframes anim-slide3 {
    0% {
      -webkit-transform: translateY(-1200%);
    }
    85% {
      -webkit-transform: translateY(25%);
    }
    100% {
      -webkit-transform: translateY(0%);
    }
  }
  @keyframes anim-slide3 {
    0% {
      transform: translateY(-1200%);
    }
    85% {
      transform: translateY(25%);
    }
    100% {
      transform: translateY(0%);
    }
  }

.anim-slide4 {
  -webkit-animation: anim-slide4 .3s both ease-in-out 3.5s;
  animation: anim-slide4 .3s both ease-in-out 3.5s;
}
  @-webkit-keyframes anim-slide4 {
    0% {
      -webkit-transform: translateX(-1500%);
    }
    100% {
      -webkit-transform: translateX(0%);
    }
  }
  @keyframes anim-slide4 {
    0% {
      transform: translateX(-1500%);
    }
    100% {
      transform: translateX(0%);
    }
  }

.anim-slide5 {
  -webkit-animation: anim-slide5 .3s both ease-in-out 3.5s;
  animation: anim-slide5 .3s both ease-in-out 3.5s;
}
  @-webkit-keyframes anim-slide5 {
    0% {
      -webkit-transform: translateX(70%);
    }
    100% {
      -webkit-transform: translateX(0%);
    }
  }
  @keyframes anim-slide5 {
    0% {
      transform: translateX(70%);
    }
    100% {
      transform: translateX(0%);
    }
  }

/* ムービー表示順 */
.anim-movie1 {
  -webkit-animation: anim-movie .3s both linear 3.5s;
  animation: anim-movie .3s both linear 3.5s;
}
.anim-movie2 {
  -webkit-animation: anim-movie .3s both linear 3.8s;
  animation: anim-movie .3s both linear 3.8s;
}
.anim-movie3 {
  -webkit-animation: anim-movie .3s both linear 4.1s;
  animation: anim-movie .3s both linear 4.1s;
}
.anim-movie4 {
  -webkit-animation: anim-movie .3s both linear 4.4s;
  animation: anim-movie .3s both linear 4.4s;
}
.anim-movie5 {
  -webkit-animation: anim-movie .3s both linear 4.7s;
  animation: anim-movie .3s both linear 4.7s;
}
  @-webkit-keyframes anim-movie {
    0% {
      -webkit-opacity: 0;
      background-color: #E6BE00;
    }
    100% {
      -webkit-opacity: 1;
      background-color: #E6BE00;
    }
  }
  @keyframes anim-movie {
    0% {
      opacity: 0;
      background-color: #E6BE00;
    }
    100% {
      opacity: 1;
      background-color: #E6BE00;
    }
  }

/* TOP吹き出し */
.anim-hk1-l {
  -webkit-animation: anim-hk .6s both linear .8s;
  -webkit-transform-origin: center right;
  animation: anim-hk .6s both linear .8s;
  transform-origin: center right;
  visibility: visible !important;
}
.anim-hk2-l {
  -webkit-animation: anim-hk .6s both linear 1.4s;
  -webkit-transform-origin: center right;
  animation: anim-hk .6s both linear 1.4s;
  transform-origin: center right;
  visibility: visible !important;
}
.anim-hk1-r {
  -webkit-animation: anim-hk .6s both linear .8s;
  -webkit-transform-origin: center left;
  animation: anim-hk .6s both linear .8s;
  transform-origin: center left;
  visibility: visible !important;
}
.anim-hk2-r {
  -webkit-animation: anim-hk .6s both linear 1.4s;
  -webkit-transform-origin: center left;
  animation: anim-hk .6s both linear 1.4s;
  transform-origin: center left;
  visibility: visible !important;
}

.anim-hk3 {
  -webkit-animation: anim-hk .6s both linear 6.6s;
  -webkit-transform-origin: bottom right;
  animation: anim-hk .6s both linear 6.6s;
  transform-origin: bottom right;
}

.anim-hk4 {
  -webkit-animation: anim-hk .6s both linear 6.6s;
  -webkit-transform-origin: top left;
  animation: anim-hk .6s both linear 6.6s;
  transform-origin: top left;
}
  @-webkit-keyframes anim-hk {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      -webkit-transform: scale3d(0, 0, 0);
    }
    10% {
      -webkit-transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.4, 1.4, 1.4);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
    }
    60% {
      -webkit-transform: scale3d(1.08, 1.08, 1.08);
    }
    80% {
      -webkit-transform: scale3d(.95, .95, .95);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
    }
  }
  @keyframes anim-hk {
    0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      -ms-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }
    10% {
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    20% {
      -ms-transform: scale3d(1.4, 1.4, 1.4);
      transform: scale3d(1.4, 1.4, 1.4);
    }
    40% {
      -ms-transform: scale3d(.9, .9, .9);
      transform: scale3d(.9, .9, .9);
    }
    60% {
      -ms-transform: scale3d(1.08, 1.08, 1.08);
      transform: scale3d(1.08, 1.08, 1.08);
    }
    80% {
      -ms-transform: scale3d(.95, .95, .95);
      transform: scale3d(.95, .95, .95);
    }
    100% {
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

/* 初めてのページ吹き出し */
.anim-hk3-l {
  -webkit-animation: anim-hk-root .5s both linear 0.4s;
  -webkit-transform-origin: center right;
  animation: anim-hk-root .5s both linear 0.4s;
  transform-origin: center right;
  visibility: visible !important;
}
.anim-hk3-r {
  -webkit-animation: anim-hk-root .5s both linear 0.4s;
  -webkit-transform-origin: center right;
  animation: anim-hk-root .5s both linear 0.4s;
  transform-origin: center left;
  visibility: visible !important;
}
  @-webkit-keyframes anim-hk-root {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      -webkit-transform: scale3d(0, 0, 0);
    }
    10% {
      -webkit-transform: scale3d(.3, .3, .3);
    }
    40% {
      -webkit-transform: scale3d(1.25, 1.25, 1.25);
    }
    70% {
      -webkit-transform: scale3d(.9, .9, .9);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
    }
  }
  @keyframes anim-hk-root {
    0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      -ms-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }
    10% {
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    40% {
      -ms-transform: scale3d(1.25, 1.25, 1.25);
      transform: scale3d(1.25, 1.25, 1.25);
    }
    70% {
      -ms-transform: scale3d(.9, .9, .9);
      transform: scale3d(.9, .9, .9);
    }
    100% {
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

/* TOP吹き出し拡大 */
.anim-hk-r {
  -webkit-animation: anim-hk-r 3s forwards infinite;
  -webkit-transform-origin: bottom left;
  animation: anim-hk-r 3s forwards infinite;
  transform-origin: bottom left;
}
.anim-hk-r2 {
  -webkit-animation: anim-hk-r 3s forwards infinite;
  -webkit-transform-origin: bottom left;
  animation: anim-hk-r 3s forwards infinite;
  transform-origin: top left;
}
.anim-hk-l {
  -webkit-animation: anim-hk-r 3s forwards infinite;
  -webkit-transform-origin: bottom left;
  animation: anim-hk-r 3s forwards infinite;
  transform-origin: bottom right;
}
  @-webkit-keyframes anim-hk-r {
    0% {
      -webkit-transform: scale(1);
    }
    7% {
      -webkit-transform: scale(1.2);
    }
    15% {
      -webkit-transform: scale(1);
    }
    100% {
      -webkit-transform: scale(1);
    }
  }
  @keyframes anim-hk-r {
    0% {
      transform: scale(1);
    }
    7% {
      transform: scale(1.2);
    }
    15% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }

/* 出現後吹き出し拡大ループ jsにて切り替え */
.anim-hk3-s {
  -webkit-animation: anim-hk-s 4.3s forwards infinite;
  -webkit-transform-origin: bottom right;
  animation: anim-hk-s 4.3s forwards infinite;
  transform-origin: bottom right;
}
.anim-hk4-s {
  -webkit-animation: anim-hk-s 4.3s forwards infinite;
  -webkit-transform-origin: top left;
  animation: anim-hk-s 4.3s forwards infinite;
  transform-origin: top left;
}
  @-webkit-keyframes anim-hk-s {
    0% {
      -webkit-transform: scale(1);
    }
    4% {
      -webkit-transform: scale(1.1);
    }
    11% {
      -webkit-transform: scale(1);
    }
    100% {
      -webkit-transform: scale(1);
    }
  }
  @keyframes anim-hk-s {
    0% {
      transform: scale(1);
    }
    4% {
      transform: scale(1.1);
    }
    11% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }

/* TOP Button拡大アニメーション */
.btn-anim1 {
  -webkit-animation: btn-anim1 2.6s forwards infinite;
  animation: btn-anim1 2.6s forwards infinite;
}
  @-webkit-keyframes btn-anim1 {
    0% {
      -webkit-transform: scale(1);
    }
    7% {
      -webkit-transform: scale(1.2);
    }
    15% {
      -webkit-transform: scale(1);
    }
    100% {
      -webkit-transform: scale(1);
    }
  }
  @keyframes btn-anim1 {
    0% {
      transform: scale(1);
    }
    7% {
      transform: scale(1.2);
    }
    15% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }

/* TOP背景カラー */
.anim-bgc {
  -webkit-animation: anim-bgc 16s both infinite 4.4s;
  animation: anim-bgc 16s both infinite 4.4s;
}
  @-webkit-keyframes anim-bgc {
    0% {
      background-color: #E6BE00;
    }
    1% {
      background-color: #E6BE00;
    }
    5% {
      background-color: #FFD300;
    }
    41% {
      background-color: #FFD300;
    }
    46% {
      background-color: #E6BE00;
    }
    100% {
      background-color: #E6BE00;
    }
  }
  @keyframes anim-bgc {
    0% {
      background-color: #E6BE00;
    }
    1% {
      background-color: #E6BE00;
    }
    5% {
      background-color: #FFD300;
    }
    41% {
      background-color: #FFD300;
    }
    46% {
      background-color: #E6BE00;
    }
    100% {
      background-color: #E6BE00;
    }
  }

.anim-bgc1 {
  -webkit-animation: anim-bgc1 16s both infinite 4.4s;
  animation: anim-bgc1 16s both infinite 4.4s;
}
  @-webkit-keyframes anim-bgc1 {
    0% {
      background-color: #FFD300;
    }
    1% {
      background-color: #FFD300;
    }
    6% {
      background-color: #E6BE00;
    }
    41% {
      background-color: #E6BE00;
    }
    46% {
      background-color: #FFD300;
    }
    100% {
      background-color: #FFD300;
    }
  }
  @keyframes anim-bgc1 {
    0% {
      background-color: #FFD300;
    }
    1% {
      background-color: #FFD300;
    }
    6% {
      background-color: #E6BE00;
    }
    41% {
      background-color: #E6BE00;
    }
    46% {
      background-color: #FFD300;
    }
    100% {
      background-color: #FFD300;
    }
  }

/* TOPスクロール矢印 */
.scr-anim {
  -webkit-animation:scr-anim 3s linear 0s infinite;
  animation:scr-anim 3s linear 0s infinite;
}
  @-webkit-keyframes scr-anim {
    0% {
        -webkit-transform:rotateY(0deg);
    }
    5% {
        -webkit-transform:rotateY(90deg);
    }
    10% {
        -webkit-transform:rotateY(180deg);
    }
    100% {
        -webkit-transform:rotateY(180deg);
    }
  }
  @keyframes scr-anim {
    0% {
        transform:rotateY(0deg);
    }
    5% {
        transform:rotateY(90deg);
    }
    10% {
        transform:rotateY(180deg);
    }
    100% {
        transform:rotateY(180deg);
    }
  }

/* #sec02 画像ランダムアニメーション */
#sec02 > a:hover {
  -webkit-animation: tc 4.2s linear infinite;
  animation: tc 4.2s linear infinite;
  opacity: 1;
}

.held-sec-1 > img:hover {
  -webkit-animation: tc 4.2s linear infinite;
  animation: tc 4.2s linear infinite;
  opacity: 1;
}

  @-webkit-keyframes tc {
    0% {
      -webkit-transform: rotate(0deg);
    }
    2% {
      -webkit-transform: rotate(3deg);
    }
    4% {
      -webkit-transform: rotate(-3deg);
    }
    6% {
      -webkit-transform: rotate(3deg);
    }
    8% {
      -webkit-transform: rotate(-3deg);
    }
    10% {
      -webkit-transform: rotate(3deg);
    }
    12% {
      -webkit-transform: rotate(-3deg);
    }
    14% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }
  @keyframes tc {
    0% {
      transform: rotate(0deg);
    }
    2% {
      transform: rotate(3deg);
    }
    4% {
      transform: rotate(-3deg);
    }
    6% {
      transform: rotate(3deg);
    }
    8% {
      transform: rotate(-3deg);
    }
    10% {
      transform: rotate(3deg);
    }
    12% {
      transform: rotate(-3deg);
    }
    14% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @-webkit-keyframes tc1 {
    0% {
      -webkit-transform: rotate(0deg);
    }
    2% {
      -webkit-transform: rotate(4deg);
    }
    4% {
      -webkit-transform: rotate(-4deg);
    }
    6% {
      -webkit-transform: rotate(4deg);
    }
    8% {
      -webkit-transform: rotate(-4deg);
    }
    10% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }
  @keyframes tc1 {
    0% {
      transform: rotate(0deg);
    }
    2% {
      transform: rotate(4deg);
    }
    4% {
      transform: rotate(-4deg);
    }
    6% {
      transform: rotate(4deg);
    }
    8% {
      transform: rotate(-4deg);
    }
    10% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }