@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

p{
    overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;

}

/* 上下のアニメーション*/
.downAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}
.hover-click.open .downAnime{
    opacity: 1;
}
.hover-click a{
    pointer-events: none;
}
.hover-click.open a{
    pointer-events: initial;
}
.hover-click.open .slideAnimeDownUp{
  animation-name: slideTextY100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.main_textArea .slideAnimeDownUp,
.btm_textArea.slideAnimeDownUp{
    animation-name:slideTextY100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}

.main_textArea .slideAnimeUpDown,
.btm_textArea.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
        transform: translateY(-100%);/* 要素を下の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}