@charset "utf-8";
/* CSS Document */

/* =========================================
   初期設定とアニメーション共通スタイル
   ========================================= */

/* アニメーション対象要素の初期状態（画面に入るまでは非表示） */
.action-l-r,
.action-r-t,
.action-l,
.action-sr,
.action-bound,
.action-bound2,
.action-bound3,
.action-bound4,
.action-sl,
.action-su,
.action-zoom,
.action-zoom2 {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* タイプライター用の初期設定 */
.writer1 {
    opacity: 0;
    border-right: 2px solid #333;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

/* アニメーション実行時に付与されるクラス */
.is-animated {
    opacity: 1 !important;
}

/* =========================================
   各アニメーションのキーフレーム定義
   ========================================= */

/* action-l-r: backInLeft - 左側から跳ねるように登場 */
@keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.action-l-r.is-animated {
    animation-name: backInLeft;
}

/* action-r-t: rotateInDownRight - 右上から回転しながら登場 */
@keyframes rotateInDownRight {
    0% {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
        transform-origin: right bottom;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transform-origin: right bottom;
    }
}
.action-r-t.is-animated {
    animation-name: rotateInDownRight;
}

/* action-l: rotateInUpLeft - 左下から回転しながら登場 */
@keyframes rotateInUpLeft {
    0% {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
        transform-origin: left bottom;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transform-origin: left bottom;
    }
}
.action-l.is-animated {
    animation-name: rotateInUpLeft;
}

/* action-sr: slideInRight - 右からスライド */
@keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
.action-sr.is-animated {
    animation-name: slideInRight;
}

/* action-bound: backInUp - 下から跳ねるように登場 */
@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.action-bound.is-animated {
    animation-name: backInUp;
}

/* action-bound2: backInRight - 右から跳ねるように登場 */
@keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.action-bound2.is-animated {
    animation-name: backInRight;
}

/* action-bound3: backInDown - 上から跳ねるように登場 */
@keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.action-bound3.is-animated {
    animation-name: backInDown;
}

/* action-bound4: backInLeft - 左から跳ねるように登場 */
.action-bound4.is-animated {
    animation-name: backInLeft;
}

/* action-sl: slideInLeft - 左からスライド */
@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
.action-sl.is-animated {
    animation-name: slideInLeft;
}

/* action-su: slideInUp - 下からスライド */
@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
.action-su.is-animated {
    animation-name: slideInUp;
}

/* action-zoom: zoomInDown - 上からズームイン */
@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
    100% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}
.action-zoom.is-animated {
    animation-name: zoomInDown;
}

/* action-zoom2: zoomInUp - 下からズームイン */
@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
    100% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}
.action-zoom2.is-animated {
    animation-name: zoomInUp;
}

/* タイプライター効果のカーソル点滅アニメーション */
.writer1.is-typing {
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { 
        border-color: transparent;
    }
    50% { 
        border-color: #333;
    }
}