@charset "UTF-8";

/*---------------------
* 拡大アニメーション(1)
---------------------*/

.scalechange1 {
    display: block;
    visibility: visible !important;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important;
    -webkit-animation: scalechange1 1.8s;
    animation: scalechange1 1.8s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes scalechange1 {
    0% {
        transform: scale(1);

        opacity: 1;
    }

    25% {
        transform: scale(1.03);
    }

    40% {
        transform: scale(.9);
    }

    50% {
        transform: scale(1.02);
    }

    60% {
        transform: scale(.93);
    }

    70% {
        transform: scale(1.01);

        opacity: 1;
    }

    80% {
        transform: scale(.95);
    }

    90% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes scalechange1 {
    0% {
        transform: scale(1);

        opacity: 1;
    }

    25% {
        transform: scale(1.03);
    }

    40% {
        transform: scale(.9);
    }

    50% {
        transform: scale(1.02);
    }

    60% {
        transform: scale(.93);
    }

    70% {
        transform: scale(1.01);

        opacity: 1;
    }

    80% {
        transform: scale(.95);
    }

    90% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}


/*---------------------
* 拡大アニメーション(2)
---------------------*/

.scalechange2 {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation: scalechange2 2s linear infinite;
    -moz-animation: scalechange2 2s linear infinite;
    -ms-animation: scalechange2 2s linear infinite;
    -o-animation: scalechange2 2s linear infinite;
    animation: scalechange2 2s linear infinite;
}

@-webkit-keyframes scalechange2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scalechange2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*---------------------
* 上下アニメーション
---------------------*/

.updown {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation: updown 1.2s linear infinite;
    -moz-animation: updown 1.2s linear infinite;
    -ms-animation: updown 1.2s linear infinite;
    -o-animation: updown 1.2s linear infinite;
    animation: updown 1.2s linear infinite;
}

@-webkit-keyframes updown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    30% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    80% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes updown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    30% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    80% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


/*---------------------
* スクロールフェードイン
---------------------*/

.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}


/*---------------------
* 帯アニメーション
*
* 要素の配置に注意
* div.text-container > div > span.text-container__title > span.text-container__title__inner
---------------------*/

/*画像用*/

.img-container {
    overflow: hidden;
    position: relative;
}

.img-container > img {
    display: block;
    opacity: 0;
    position: relative;
    transition: all .5s .3s ease;
    z-index: 0;
}

.img-container::before {
    background: #000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-101%);
    transition: all .8s 0s ease;
    width: 100%;
    z-index: 1;
}

/*テキスト用*/

.text-container__title {
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.text-container__title::before {
    background: #000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-101%);
    transition: all .8s .3s ease;
    width: 100%;
    z-index: 1;
}

.text-container__title__inner {
    display: inline-block;
    opacity: 0;
    transition: all .8s .5s ease;
}

.text-container__text {
    left: -50px;
    opacity: 0;
    position: relative;
    transition: all .5s .5s ease;
}

/*アクティブ時の動作(画像・テキスト共通)*/

.img-container.active img {
    opacity: 1;
}

.img-container.active:before {
    transform: translateX(101%);
}

.text-container.active .text-container__title:before {
    transform: translateX(101%);
}

.text-container.active .text-container__title__inner {
    opacity: 1;
}

.text-container.active .text-container__text {
    left: 0;
    opacity: 1;
}


/*---------------------
* 波紋アニメーション(1)
---------------------*/

.ripple_wrap {
    display: inline-block;
    position: relative;
}

/*波紋させたい要素*/

.ripple_main {
    position: relative;
    z-index: 3;
}

/*波紋本体*/

.ripple1,
.ripple2 {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

/*波紋1*/

.ripple1 {
    background: #666;
    box-shadow: 0 0 5px #666;
    z-index: 2;
    /*アニメーション*/
    animation-name: rippleAnimation1;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation-name: rippleAnimation1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-name: rippleAnimation1;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
}

@keyframes rippleAnimation1 {
    0% {
        transform: scale(1, 1);
        opacity: 0.7;
    }

    80% {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }

    100% {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

@-webkit-keyframes rippleAnimation1 {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1.3, 1.3);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

@-moz-keyframes rippleAnimation1 {
    0% {
        -moz-transform: scale(1, 1);
        opacity: 0.7;
    }

    80% {
        -moz-transform: scale(1.3, 1.3);
        opacity: 0;
    }

    100% {
        -moz-transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

/*波紋2*/

.ripple2 {
    background: #666;
    box-shadow: 0 0 5px #666;
    z-index: 1;
    /*アニメーション*/
    animation-name: rippleAnimation2;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation-name: rippleAnimation2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-name: rippleAnimation2;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
}

@keyframes rippleAnimation2 {
    0% {
        transform: scale(1, 1);
        opacity: 0.7;
    }

    20% {
        transform: scale(1, 1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

@-webkit-keyframes rippleAnimation2 {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 0.7;
    }

    20% {
        -webkit-transform: scale(1, 1);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

@-moz-keyframes rippleAnimation2 {
    0% {
        -moz-transform: scale(1, 1);
        opacity: 0.7;
    }

    20% {
        -moz-transform: scale(1, 1);
        opacity: 0.7;
    }

    100% {
        -moz-transform: scale(1.3, 1.3);
        opacity: 0;
    }
}

/*---------------------
* 波紋アニメーション(2)
---------------------*/

.pulse_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ff2c2c;
    box-shadow: 0 0 20px #ff2c2c;
    cursor: pointer;
}

.pulse_btn::before,
.pulse_btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: 1px solid #ff2c2c;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
    animation: pulsate 1.5s linear infinite;
    /*borderを消して背景色にするパターン*/
    /*border-width: 0;
    background: #ff2c2c;*/
}

.pulse_btn::after {
    animation-delay: 1s;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/*---------------------
* 装飾ライン
---------------------*/

.line {
    width: 1px;
    height: 30px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 999;
    position: relative;
}

.line .line_move {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    /*アニメーション*/
    animation-name: line;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation-name: line;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-name: line;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
}

@keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

@-webkit-keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

@-moz-keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}


/*---------------------
* スクロールアイコン
---------------------*/

.scroll_icon {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    padding-top: 40px;
    padding-bottom: 15px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #fff;
    z-index: 2;
}

.scroll_icon span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 32px;
    margin-left: -9px;
    border: solid 1px #fff;
    border-radius: 50px;
    box-sizing: border-box;
}

.scroll_icon span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}

@-webkit-keyframes sdb {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        -webkit-transform: translate(0, 12px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes sdb {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        transform: translate(0, 12px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/*------------------------------
* リストのフェードイン表示
------------------------------*/

ul.archive_list_effect > li {
    opacity: 0;
}