/*====================================================================================================

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。
　- all.min.css         Font Awesome を利用するためのCSS。基本触らないこと。
　- aos.css             AOSを利用するためのCSS。基本触らないこと。

　//基本的には変更しないCSS
　- base.css            基本の文字設定や、Webフォントの読み込みなど。基本触らなくてもOK。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS
　- animation.css       オリジナルのアニメーションCSS

====================================================================================================*/


/*------------------------------------------------------------------
  animation
------------------------------------------------------------------*/
.animation-shrink{
    display: block;
    overflow: hidden;
}
.animation-shrink{
    opacity: 0;
    transform: scale(1.2);
}
.animation-shrink.active{
    animation: shrinkInImg;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
@keyframes shrinkInImg {
    from{
        opacity: 0;
        transform: scale(1.2);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
@media print{
    .animation-shrink{
        opacity: 1;
        transform: scale(1);
    }
}

.animation-slidein-list{
    padding: 1px; /* 端が微妙に欠けてしまうバグの回避 */
    overflow: hidden;
}
.animation-slidein-list > li{
    opacity: 0;
    transform: translateX(80px);
}

.animation-slidein-list.active > li{
    animation: slideInList;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
@keyframes slideInList {
    from{
        opacity: 0;
        transform: translateX(80px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@media screen and (max-width:767px){
    .animation-slidein-list > li{
        transform: translateX(30px);
    }
    @keyframes slideInList {
        from{
            opacity: 0;
            transform: translateX(30px);
        }
        to{
            opacity: 1;
            transform: translateX(0);
        }
    }
}
@media print{
    .animation-slidein-list > li{
        opacity: 1;
        transform: translateX(0);
    }
}