@charset "utf-8";

@keyframes baseAniFadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* animation: baseAniFadein 0.3s linear normal forwards; */

@keyframes baseAniFadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dispBody {
  0% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; }
}


/*##### 浮き上がりフェードイン #####*/
.addAniUpFadein.aniWait {
  opacity: 0;
  transform: translateY(3em);
}
.addAniUpFadein.aniWait.active {
  animation: baseAniUpFadein 0.5s linear normal forwards;
}
@keyframes baseAniUpFadein {
  0% { transform: translateY(3em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


.aniFadein02.aniWait {
  position: relative;
}

.aniFadein02.aniWait .aniFadein01Cont {
  position: relative;
  z-index: 3;
  opacity: 0;
}

.aniFadein02.aniWait.typeNormal.active .aniFadein01Cont {
  animation: aniFadein02 2.0s ease-out normal 0.2s forwards;
}

.aniFadein02.aniWait.typeLater.active .aniFadein01Cont {
  animation: aniFadein02 2.0s ease-out normal 1.2s forwards;
}

.aniFadein02.aniWait.typeLater2.active .aniFadein01Cont {
  animation: aniFadein02 2.0s ease-out normal 1.7s forwards;
}

.aniFadein02.aniWait.typeLater3.active .aniFadein01Cont {
  animation: aniFadein02 2.0s ease-out normal 2.5s forwards;
}

.aniFadeinWait05s,
.aniFadeinWait1s,
.aniFadeinWait2s,
.aniFadeinWait3s,
.aniFadeinWait4s,
.aniFadeinWait5s {
  opacity: 0;
}
.aniFadeinWait05s.active {
  animation: aniFadein02 2.0s ease-out normal 0.5s forwards;
}
.aniFadeinWait1s.active {
  animation: aniFadein02 2.0s ease-out normal 1s forwards;
}
.aniFadeinWait2s.active {
  animation: aniFadein02 2.0s ease-out normal 2s forwards;
}
.aniFadeinWait3s.active {
  animation: aniFadein02 2.0s ease-out normal 3s forwards;
}
.aniFadeinWait4s.active {
  animation: aniFadein02 2.0s ease-out normal 4s forwards;
}
.aniFadeinWait5s.active {
  animation: aniFadein02 2.0s ease-out normal 5s forwards;
}

@keyframes aniFadein02 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.aniFadein02.aniWait:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #006ab3;
  background: -moz-linear-gradient(left, #006ab3 0%, #004370 100%);
  background: -webkit-linear-gradient(left, #006ab3 0%, #004370 100%);
  background: linear-gradient(to right, #006ab3 0%, #004370 100%);
}
.aniFadein02.aniWait.typeBlue:after {
  background-color: #006ab3;
  background: -moz-linear-gradient(left, #006ab3 0%, #004370 100%);
  background: -webkit-linear-gradient(left, #006ab3 0%, #004370 100%);
  background: linear-gradient(to right, #006ab3 0%, #004370 100%);
}
.aniFadein02.aniWait.typeBlue02:after {
  background-color: #003897;
  background: -moz-linear-gradient(left, #003897 0%, #002367 100%);
  background: -webkit-linear-gradient(left, #003897 0%, #002367 100%);
  background: linear-gradient(to right, #003897 0%, #002367 100%);
}
.aniFadein02.aniWait.typeBrown:after {
  background-color: #ac8c5c;
  background: -moz-linear-gradient(left, #ac8c5c 0%, #8a6436 100%);
  background: -webkit-linear-gradient(left, #ac8c5c 0%, #8a6436 100%);
  background: linear-gradient(to right, #ac8c5c 0%, #8a6436 100%);
}
.aniFadein02.typeFromRight.aniWait:after {
  left: auto;
  right: 0;
}


/*.aniFadein02.aniWait.active:not(.typeLater):not(.typeLater2):after {*/
.aniFadein02.aniWait.typeNormal.active:after {
  animation: aniFadein02After 1.2s ease-out normal forwards;
}

.aniFadein02.aniWait.typeLater.active:after {
  animation: aniFadein02After 1.0s ease-out normal 0.6s forwards;
}

.aniFadein02.aniWait.typeLater2.active:after {
  animation: aniFadein02After 1.0s ease-out normal 1.5s forwards;
}

.aniFadein02.aniWait.typeLater3.active:after {
  animation: aniFadein02After 1.0s ease-out normal 2.2s forwards;
}

@keyframes aniFadein02After {
  0% { width: 0; }
  50% { width: 200%; opacity: 1; }
  100% { width: 200%; opacity: 0; }
}

/*
@keyframes aniFadein02After {
  0% { width: 0; }
  60% { width: 200%; }
  80% { width: 200%; background-color: #333f40; }
  100% { width: 200%; background-color: transparent; }
}
*/

@keyframes aniFadein02AfterTypeBrown {
  0% { width: 0; }
  60% { width: 200%; }
  80% { width: 200%; background-color: #a68555; }
  100% { width: 200%; background-color: transparent; }
}

/*  100% { width: 0; z-index; -1; }*/



.aniFlowRight .flowTarget {
  position: relative;
  transition: right 0.2s ease;
}
.aniFlowRight:hover .flowTarget {
  animation: aniFlowRight 0.5s ease-out normal forwards;
}

@keyframes aniFlowRight {
  0% { right: 0; }
  100% { right: -7px; }
}


/*##### hover move to right #####*/
.aniMoveToRight {
  transition: transform 0.3s linear;
}

.aniMoveToRight:hover {
  -ms-transform: translateX(0.3em);
  transform: translateX(0.3em);
}


/*##### hover move to right #####*/
.aniFadein {
  opacity: 0;
  transition: opacity 0.3s linear 1.1s;
}

.aniFadein.active {
  opacity: 1;
}


/*##### Fadein Time #####*/
.aniFadeinTime {
  opacity: 0;
  animation: aniFadein02 0.6s ease-out normal 0.5s forwards;
}

.aniFadeinTime2 {
  opacity: 0;
  animation: aniFadein02 0.6s ease-out normal 0.7s forwards;
}


/*##### Drop Shadow #####*/
.aniDropShadow {
  transition: box-shadow ease-in 0.1s, transform ease-in 0.1s;
}

.aniDropShadow:hover {
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.8);
  transform: translate(-5px, -5px);
}


/*##### Gray Off #####*/
img.aniBaseGrayOff01 {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

img.aniBaseGrayOff01.active {
  animation: aniBaseGrayOff01 0.5s linear normal forwards;
}

@keyframes aniBaseGrayOff01 {
  0% { filter: grayscale(100%); }
  100% { filter: grayscale(0); }
}


/*##### Link Ani01 #####*/
.addLinkAni01 a,
a.addLinkAni01 {
  position: relative;
}

.addLinkAni01 a:hover,
a.addLinkAni01:hover {
  display: block;
}
@media all and (max-width: 750px){
  .addLinkAni01 a:hover,
  a.addLinkAni01:hover {
    display: inline;
  }
}

.addLinkAni01 a:after,
a.addLinkAni01:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 100%;
  height: 2px;
  background-color: #333;
  text-align: center;
  transition: 0.3s ease;
  transform: scaleX(0);
}
@media all and (max-width: 750px){
  .addLinkAni01 a:after,
  a.addLinkAni01:after {
    content: none;
  }
}

.addLinkAni01 a:hover:after,
a.addLinkAni01:hover:after {
  transform: scaleX(1);
}
@media all and (max-width: 750px){
  .addLinkAni01 a:hover:after,
  a.addLinkAni01:hover:after {
    transform: none;
  }
}


@keyframes aniTbScroll01 {
  0% { transform: translateX(0); }
  100% { transform: translateX(0.5em); }
}