@charset "UTF-8";
/* ---	animation   --- */

/* hover txt change */

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/
.sNavi li a{
position: relative;
  /*はみ出る要素を隠す*/
overflow: hidden;
padding:10px 60px; /* * 0912 services 崩れる */
}
.sNavi li a:hover{
  opacity: 1;
}
.sNavi li span{
position: absolute;
left:0;  /*50%*/
top:0;
transition: all .5s;
/* transform: translate(-50%, 0); *//*X方向に-50% ※中央寄せにするため*/
display: block;
opacity:1;
white-space: nowrap;
letter-spacing: -0.5px;
}
/*差し替わるテキストの設定*/
.sNavi li span:nth-child(2){
  opacity:0;
  transform: translate(0,100%);/*X方向に-50% Y方向に100%*//*0*/
  font-size: 90%;
  /* background-image: linear-gradient(0deg, rgba(48, 113, 185, 0.5), rgba(255, 255, 255, 0.5) 15%); */
  background: rgba(48, 113, 185, 0.8);
  color: #fff;
  padding: 0 4px;
  margin-left: -4px;
}
/*hoverするとテキストが入れ替わる設定*/
.sNavi li:hover span:nth-child(1){
  opacity:0;
  transform: translate(0,-100%);/*X方向に-50% Y方向に-100%*//*0*/
}
.sNavi li:hover span:nth-child(2){
opacity:1;/*不透明に*/
transform: translate(0, 0);/*X方向に-50% Y方向に0*//*0*/
}
@media screen and (max-width: 1279px) {
  .sNavi li span{
    left:50%;
    transform: translate(-50%, 0);
  }
  .sNavi li span:nth-child(2){
      transform: translate(-50% ,100%);/*X方向に-50% Y方向に100%*//*0*/
    }
    /*hoverするとテキストが入れ替わる設定*/
    .sNavi li:hover span:nth-child(1){
      transform: translate(-50% ,-100%);/*X方向に-50% Y方向に-100%*//*0*/
    }
    .sNavi li:hover span:nth-child(2){
    transform: translate(-50% , 0);/*X方向に-50% Y方向に0*//*0*/
    background: rgba(48, 113, 185, 0.8);
    color: #fff;
    }
    .sNavi li a {
      padding: 10px 30px;
    }
}



/*----------------*/
/* Animate.css 用 */
.anm__delay-025s{  
  animation-delay: 0.25s;
}
.anm__delay-05s{  
  animation-delay: 0.5s;
}
.anm__delay-075s{  
  animation-delay: 0.75s;
}
.anm__delay-1s{  
  animation-delay: 1s;
}
.anm__delay-125s{  
  animation-delay: 1.25s;
}
.anm__delay-15s{  
  animation-delay: 1.5s;
}
.anm__delay-175s{  
  animation-delay: 1.75s;
}
.anm__delay-2s{  
  animation-delay: 2s;
}
.anm__delay-225s{  
  animation-delay: 2.25s;
}
.anm__delay-250s{  
  animation-delay: 2.5s;
}
.anm__delay-275s{  
  animation-delay: 2.75s;
}
.anm__delay-3s{  
  animation-delay: 3s;
}

/**-------------------
  * text bound box *
-------------------**/
.bound-box {
  position: relative;
  width: 100%;
  height: 120px;
}

.bound span.moveOn, .bound_4 span.moveOn, .bound_8 span.moveOn, .bound_9 span.moveOn {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  margin: auto;
}

/*7文字*/
.bound span.moveOn:nth-child(1) {
  left: -7.5em;
  animation: bounda 0.8s forwards ease-in-out 0s;
}

.bound span.moveOn:nth-child(2) {
  left: -5em;
  animation: bounda 0.8s forwards ease-in-out 0.1s;
}

.bound span.moveOn:nth-child(3) {
  left: -2.5em;
  animation: bounda 0.8s forwards ease-in-out 0.2s;
}

.bound span.moveOn:nth-child(4) {
  left: 0em;
  animation: bounda 0.8s forwards ease-in-out 0.3s;
}

.bound span.moveOn:nth-child(5) {
  left: 2.5em;
  animation: bounda 0.8s forwards ease-in-out 0.4s;
}

.bound span.moveOn:nth-child(6) {
  left: 5em;
  animation: bounda 0.8s forwards ease-in-out 0.5s;
}

.bound span.moveOn:nth-child(7) {
  left: 7.5em;
  animation: bounda 0.8s forwards ease-in-out 0.6s;
}

/*4文字*/
.bound_4 span.moveOn:nth-child(1) {
  left: -3.75em;
  animation: bounda 0.8s forwards ease-in-out 0s;
}

.bound_4 span.moveOn:nth-child(2) {
  left: -1.25em;
  animation: bounda 0.8s forwards ease-in-out 0.1s;
}

.bound_4 span.moveOn:nth-child(3) {
  left: 1.25em;
  animation: bounda 0.8s forwards ease-in-out 0.2s;
}

.bound_4 span.moveOn:nth-child(4) {
  left: 3.75em;
  animation: bounda 0.8s forwards ease-in-out 0.3s;
}

/*8文字*/
.bound_8 span.moveOn:nth-child(1) {
  left: -8.75em;
  animation: bounda 0.8s forwards ease-in-out 0s;
}

.bound_8 span.moveOn:nth-child(2) {
  left: -6.25em;
  animation: bounda 0.8s forwards ease-in-out 0.1s;
}

.bound_8 span.moveOn:nth-child(3) {
  left: -3.75em;
  animation: bounda 0.8s forwards ease-in-out 0.2s;
}

.bound_8 span.moveOn:nth-child(4) {
  left: -1.25em;
  animation: bounda 0.8s forwards ease-in-out 0.3s;
}

.bound_8 span.moveOn:nth-child(5) {
  left: 1.25em;
  animation: bounda 0.8s forwards ease-in-out 0.4s;
}

.bound_8 span.moveOn:nth-child(6) {
  left: 3.75em;
  animation: bounda 0.8s forwards ease-in-out 0.5s;
}

.bound_8 span.moveOn:nth-child(7) {
  left: 6.25em;
  animation: bounda 0.8s forwards ease-in-out 0.6s;
}

.bound_8 span.moveOn:nth-child(8) {
  left: 8.75em;
  animation: bounda 0.8s forwards ease-in-out 0.7s;
}

/*9文字*/
.bound_9 span.moveOn:nth-child(1) {
  left: -10em;
  animation: bounda 0.8s forwards ease-in-out 0s;
}

.bound_9 span.moveOn:nth-child(2) {
  left: -7.5em;
  animation: bounda 0.8s forwards ease-in-out 0.1s;
}

.bound_9 span.moveOn:nth-child(3) {
  left: -5em;
  animation: bounda 0.8s forwards ease-in-out 0.2s;
}

.bound_9 span.moveOn:nth-child(4) {
  left: -2.5em;
  animation: bounda 0.8s forwards ease-in-out 0.3s;
}

.bound_9 span.moveOn:nth-child(5) {
  left: 0em;
  animation: bounda 0.8s forwards ease-in-out 0.4s;
}

.bound_9 span.moveOn:nth-child(6) {
  left: 2.5em;
  animation: bounda 0.8s forwards ease-in-out 0.5s;
}

.bound_9 span.moveOn:nth-child(7) {
  left: 5em;
  animation: bounda 0.8s forwards ease-in-out 0.6s;
}

.bound_9 span.moveOn:nth-child(8) {
  left: 7.5em;
  animation: bounda 0.8s forwards ease-in-out 0.7s;
}

.bound_9 span.moveOn:nth-child(9) {
  left: 10em;
  animation: bounda 0.8s forwards ease-in-out 0.8s;
}

@keyframes bounda {
  0% {
    opacity: 0;
    top: 0;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    top: -25%;
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    top: 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    top: 0;
    transform: scale(1);
  }
}
/* moveOn trigger　*/
.aTrgr,.Trigger {
  opacity: 0;
}