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

/*
  ボーダースライドインアウト
  利用z-index: 1~9
*/
.slid-animate {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0 auto;
}
.slid-animate::before,
.slid-animate::after {
  content: '';
  display: block;
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
}
.slid-animate::before {
  z-index: 2;
  background-color: #1F74E2;
  opacity: 0;
}
.slid-animate.on::before,
.start .slid-animate::before {
    /*下で設定した@keyframesをセット*/
  -webkit-animation-name: borderInOut;
  animation-name: borderInOut;
 
  /*一回のアニメーションにかかる時間を設定*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  
  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.slid-animate::after {
  z-index: 1;
  background-color: #fff;
}
.slid-animate.on::after,
.start .slid-animate::after {
  /*下で設定した@keyframesをセット*/
  -webkit-animation-name: borderOut;
  animation-name: borderOut;
 
  /*一回のアニメーションにかかる時間を設定*/
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
 
  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/*ボーダースライドインアウトのエリアカスタム*/
#key-area .en .slid-animate::before,
#key-area .en .slid-animate::after {
  width: calc(100% + 12px);
}
@media (max-width: 767px) {
  #key-area .en .slid-animate::before,
  #key-area .en .slid-animate::after {
    width: calc(100% + 4px);
  }
}
#message .slid-animate::before{
  background-color: #FFF;
}
#message .slid-animate::after {
  background-color: #1F74E2;
}
#message .message-layout-wrapper .message-wrap .slid-animate::before{
  background-color: #1F74E2;
}
#message .message-layout-wrapper .message-wrap .slid-animate::after{
  background-color: #CFE4FE;
}


/*
 エリアスライドフェードイン
 利用z-index: 10~20
*/
.area-slid-animate {
  opacity: 0;
}
.area-slid-animate.on {
  /*keyframesセット*/
  -webkit-animation-name: borderIn;
  animation-name: borderIn;
 
  /*一回のアニメーションにかかる時間を設定*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;

  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.area-slid-animate::before {
  content: '';
  display: block;
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  min-height: 72px;
  width: 100%;
}
.area-slid-animate::before {
  z-index: 10;
  background-color: #1F74E2;
}
.area-slid-animate.on::before {
  /*keyframesをセット*/
  -webkit-animation-name: borderOut;
  animation-name: borderOut;
 
  /*一回のアニメーションにかかる時間を設定*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
 
  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


/*スケールアップ*/
.scaleup{
  transition: 0.2s;
}
.scaleup:hover {
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -o-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  position: relative;
  z-index: 100;
}
.scaleup.per30:hover {
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -o-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}

/*フェードインアップ*/
.fadein-up {
  opacity: 0;
}
.fadein-up.on {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  
  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


/*フェードイン*/
.fadein {
  opacity: 0;
}
.fadein.on,
.start .fadein {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  
    /*一回のアニメーションにかかる時間を設定*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  
  /*アニメーション遅延時間を設定*/
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;

  /*アニメーション終了後のスタイルを100%時のスタイルで保持*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


/*フェードインアウトダウン*/
.fadein-out-down {
  opacity: 0;
}
.fadein-out-down.on {
  -webkit-animation-name: fadeInOutDown;
  animation-name: fadeInOutDown;
  
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
}

/* フェードインアウトダウン エリアカスタム */
.home .arrow-down::before {
  opacity: 0;
  
  -webkit-animation-name: fadeInOutDownArrow;
  animation-name: fadeInOutDownArrow;
  
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;
  
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/*遅延実行設定*/
.on.delay_0_3{
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.on.delay_0_6{
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.on.delay_1_0,
.on.delay_1_0::before,
.on.delay_1_0::after{
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

.on.delay_1_2,
.on.delay_1_2::before,
.on.delay_1_2::after{
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.on.delay_1_4,
.on.delay_1_4::before,
.on.delay_1_4::after{
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.on.delay_1_5,
.on.delay_1_5::before,
.on.delay_1_5::after{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.on.delay_1_6,
.on.delay_1_6::before,
.on.delay_1_6::after{
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.on.delay_1_65,
.on.delay_1_65::before,
.on.delay_1_65::after{
  -webkit-animation-delay: 1.65s;
  animation-delay: 1.65s;
}

.on.delay_1_8,
.on.delay_1_8::before,
.on.delay_1_8::after{
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.on.delay_2_0,
.on.delay_2_0::before,
.on.delay_2_0::after{
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

.on.delay_2_4,
.on.delay_2_4::before,
.on.delay_2_4::after{
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.on.delay_2_5,
.on.delay_2_5::before,
.on.delay_2_5::after{
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.on.delay_3_0,
.on.delay_3_0::before,
.on.delay_3_0::after{
  -webkit-animation-delay: 3.0s;
  animation-delay: 3.0s;
}
.on.delay_3_5,
.on.delay_3_5::before,
.on.delay_3_5::after{
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

/*
  doSlideTriggerで順番に表示するアニメーション
*/
.start .delay_0_4,
.start .delay_0_4::before,
.start .delay_0_4::after{
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.start .delay_0_6,
.start .delay_0_6::before,
.start .delay_0_6::after{
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.start .delay_0_8,
.start .delay_0_8::before,
.start .delay_0_8::after{
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.start .delay_1_0,
.start .delay_1_0::before,
.start .delay_1_0::after{
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

.start .delay_1_2,
.start .delay_1_2::before,
.start .delay_1_2::after{
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.start .delay_1_4,
.start .delay_1_4::before,
.start .delay_1_4::after{
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.start .delay_1_6,
.start .delay_1_6::before,
.start .delay_1_6::after{
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.start .delay_2_0,
.start .delay_2_0::before,
.start .delay_2_0::after{
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

/*
  スクロール連動
  フェードアップ、フェードイン、ボーダースライドをスクロール連動で使う時、に利用。
*/
.doFadeInUp,
.doSlide,
.doSlideTrigger,
.doFadeIn {
  /*アニメーション実行前に付けたいスタイルがあれば設定する*/
}
.doFadeInUp.done,
.doSlide.done,
.doSlideTrigger.done {
  /*アニメーション実行後に付けたいスタイルがあれば設定する*/
}


/*slideFadeさせる要素の高さを指定*/
.std-h1 {
  height:72px;
}
@media (max-width: 767px) {
  .std-h1 {
    height:44px;
  }
}


/*キーフレーム設定*/
/*ボーダースライドイン*/
@-webkit-keyframes borderIn {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left; /*アニメーションの原点を左に*/
    }
    5% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    49% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
}

@keyframes borderIn {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left; /*アニメーションの原点を左に*/
    }
    5% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    49% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
}
/*ボーダースライドアウト*/
@-webkit-keyframes borderOut {
    0% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;  /*アニメーションの原点を右に*/
    }
    50% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}

@keyframes borderOut {
    0% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;  /*アニメーションの原点を右に*/
    }
    50% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}
/*ボーダースライドインアウト*/
@-webkit-keyframes borderInOut {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left; /*アニメーションの原点を左に*/
    }
    5% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    48% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    50% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    52% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}

@keyframes borderInOut {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left; /*アニメーションの原点を左に*/
    }
    5% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    48% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }
    50% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    52% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}
/*フェードインアップ*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*フェードイン*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*フェードインアウトダウン*/
@-webkit-keyframes fadeInOutDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeInOutDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
/* フェードインアウトダウン TOPスクロール用 */
@-webkit-keyframes fadeInOutDownArrow {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -0.6em, 0) rotate(45deg);
    transform: translate3d(0, -0.6em, 0) rotate(45deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0.6em, 0) rotate(45deg);
    transform: translate3d(0, 0.6em, 0) rotate(45deg);
  }
}

@keyframes fadeInOutDownArrow {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -0.6em, 0) rotate(45deg);
    transform: translate3d(0, -0.6em, 0) rotate(45deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0.6em, 0) rotate(45deg);
    transform: translate3d(0, 0.6em, 0) rotate(45deg);
  }
}