@charset "utf-8";

/* ==================== INDEX ====================

    A.全デバイス
    • デモ画面用
    • スクロールトリガー用全共通
    • フェードイン
    • フェードアウト
    • 左からスライドイン
    • 右からスライドイン
    • 下からスライドイン
    • 上からスライドイン

	B.desktop (min-width: 600px)
	• desktop フリップ めくる円形カード

	C.mobile (max-width: 599px)
	• mobile フリップ めくる円形カード

==================== INDEX ==================== */


/*==================== デモ画面用 ====================*/

.demo_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 50vh;
    background: #fff;
    border: 1px solid #fff;
}

.demo_container ._animateByScroll_ {
    position: absolute;
}

@keyframes rotate_loop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes intrc_zoom {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.demo_rec1 {
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
    height: 80px;
    width: 80px;
    background: rgb(199, 255, 110);
    animation: 3s linear 0s infinite normal rotate_loop;
}

.demo_rec1:hover,
.demo_rec1:focus {
    animation: .2s linear 0s 1 normal intrc_zoom;
}

/*==================== スクロールトリガー用全共通 ====================*/

._animateByScroll_ {
    margin: 0;
}

/*==================== フェードイン ====================*/

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


/* トリガー : 任意 : 1.5s 後に発動 */

.fadeIn > * {
    opacity: 0;
}

.fadeIn *._on_ {
    animation: 1s ease-in 1.5s 1 normal forwards running fade_in;
}


/* トリガー : スクロール */

.fadeIn *._animateByScroll_,
.fadeIn *._animateByScroll_._off_ {
    opacity: 0;
}

.fadeIn *._animateByScroll_._on_ {
    animation: 1s ease-in 0s 1 normal forwards running fade_in;
}

/*==================== フェードアウト ====================*/

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


/* トリガー : 任意 : 1.5s 後に発動 */

.fadeOut > * {
    opacity: 1;
}

.fadeOut *._on_ {
    animation: 1s ease-in 1.5s 1 normal forwards running fade_out;
}


/* トリガー : スクロール */

.fadeOut *._animateByScroll_,
.fadeOut *._animateByScroll_._off_ {
    opacity: 1;
}

.fadeOut *._animateByScroll_._on_ {
    animation: 1s ease-in 0s 1 normal forwards running fade_out;
}

/*==================== 左からスライドイン ====================*/

@keyframes slide_in_left {
    0% {
        transform: translateX(-20vw);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* トリガー : 任意 : 1.5s 後に発動 */

.slideInFromLeft > * {
    opacity: 0;
}

.slideInFromLeft *._on_ {
    animation: .5s ease-in-out 1.5s 1 normal forwards running slide_in_left;
}


/* トリガー : スクロール */

.slideInFromLeft *._animateByScroll_,
.slideInFromLeft *._animateByScroll_._off_ {
    opacity: 0;
}

.slideInFromLeft *._animateByScroll_._on_ {
    animation: .5s ease-in-out 0s 1 normal forwards running slide_in_left;
}


/*==================== 右からスライドイン ====================*/

@keyframes slide_in_right {
    0% {
        transform: translateX(20vw);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* トリガー : 任意 : 1.5s 後に発動 */

.slideInFromRight > * {
    opacity: 0;
}

.slideInFromRight *._on_ {
    animation: .5s ease-in-out 1.5s 1 normal forwards running slide_in_right;
}


/* トリガー : スクロール */

.slideInFromRight *._animateByScroll_,
.slideInFromRight *._animateByScroll_._off_ {
    opacity: 0;
}

.slideInFromRight *._animateByScroll_._on_ {
    animation: .5s ease-in-out 0s 1 normal forwards running slide_in_right;
}

/*==================== 下からスライドイン ====================*/

@keyframes slide_in_bottom {
    0% {
        transform: translateY(5vh);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* トリガー : 任意 : 1.5s 後に発動 */

.slideInFromBottom > * {
    opacity: 0;
}

.slideInFromBottom *._on_ {
    animation: .5s ease-in-out 1.5s 1 normal forwards running slide_in_bottom;
}


/* トリガー : スクロール */

.slideInFromBottom *._animateByScroll_,
.slideInFromBottom *._animateByScroll_._off_ {
    opacity: 0;
}

.slideInFromBottom *._animateByScroll_._on_ {
    animation: .5s ease-out 0s 1 normal forwards running slide_in_bottom;
}


/*==================== 上からスライドイン ====================*/

@keyframes slide_in_top {
    0% {
        transform: translateY(-20vh);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* トリガー : 任意 : 1.5s 後に発動 */

.slideInFromTop > * {
    opacity: 0;
}

.slideInFromTop *._on_ {
    animation: .5s ease-in-out 1.5s 1 normal forwards running slide_in_top;
}


/* トリガー : スクロール */

.slideInFromTop *._animateByScroll_,
.slideInFromTop *._animateByScroll_._off_ {
    opacity: 0;
}

.slideInFromTop *._animateByScroll_._on_ {
    animation: .5s ease-in-out 0s 1 normal forwards running slide_in_top;
}


/*==================== desktop ====================*/

@media all and (min-width: 600px) {

	/*==================== desktop フリップ めくる円形カード ====================*/
    
    /* デモ用設定 ここから */

    .demo_animation_flip_wrapper {
        display: inline-block;
        position: relative;
		width: 300px;
		height: 300px;
    }

    .demo_animation_flip_wrapper .round_card p {
        text-align: center;
        color: #fff;
        font-size: 2rem;
    }

    .demo_animation_flip_wrapper .back_side p {
        text-align: left;
    }

    .demo_animation_flip_wrapper #round_card_a1 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/pear.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    .demo_animation_flip_wrapper #round_card_a2 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/apples.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    .demo_animation_flip_wrapper #round_card_a3 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/almond_nuts.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    /* ここまで デモ用設定 */

    input.for_touch_ui {
        position: absolute !important;
        z-index: -1;
        visibility: hidden;
    }

	.animation_flip {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
		transform-origin: 50% 0;
		transition: transform 1s;
		width: 100%;
		height: 100%;
		cursor: help;
	}

    .animation_flip .flex_item {
        padding: 0 40px;
    }

	.animation_flip .round_card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: rgb(163, 228, 59);
		border-radius: 50%;
	}

	.animation_flip._click .round_card {
		background: rgba(172, 101, 201, 0.75);
	}
	
	.animation_flip .round_card + .back_side {
		opacity: 0;
		transition: opacity .75s ease-out 0.25s;
		transform: rotateY(180deg);
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #eeff55;
		color: #2b2b2b;
		border-radius: 50%;
	}

	.animation_flip:hover {
		transform: rotateY(180deg);
	}

	.animation_flip:hover .back_side {
		opacity: 1;
	}

	.animation_flip._click:hover {
		transform: rotateY(0deg);
	}

	.animation_flip._click:hover .back_side {
		opacity: 0;
	}

	input.for_touch_ui:checked + .animation_flip._click {
		transform: rotateY(180deg);
	}

	input.for_touch_ui:checked + .animation_flip._click .back_side {
		opacity: 1;
	}

}

/*==================== mobile ====================*/

@media all and (max-width: 599px) {

	/*==================== mobile フリップ めくる円形カード ====================*/
    
    /* デモ用設定 ここから */

    .demo_animation_flip_wrapper {
        display: inline-block;
        position: relative;
		width: 43vw;
		height: 43vw;
        font-size: 75%;
    }

    .demo_animation_flip_wrapper p {
        line-height: 1.3;
    }

    .demo_animation_flip_wrapper .round_card p {
        text-align: center;
        color: #fff;
        font-size: 2rem;
    }

    .demo_animation_flip_wrapper .back_side p {
        text-align: left;
    }

    .demo_animation_flip_wrapper #round_card_a1 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/pear.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    .demo_animation_flip_wrapper #round_card_a2 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/apples.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    .demo_animation_flip_wrapper #round_card_a3 + .animation_flip .back_side {
        background: #444 url(/demo_images/01/almond_nuts.jpg) center center / cover no-repeat !important;
        background-blend-mode: lighten;
        color: #fff !important;
        font-weight: bold !important;
        text-align: center;
    }

    /* ここまで デモ用設定 */

    input.for_touch_ui {
        position: absolute !important;
        z-index: -1;
        visibility: hidden;
    }

	.animation_flip {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
		transform-origin: 50% 0;
		transition: transform 1s;
		width: 100%;
		height: 100%;
		cursor: help;
	}

    .animation_flip .flex_item {
        padding: 0 5vw;
    }

	.animation_flip .round_card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: rgb(163, 228, 59);
		border-radius: 50%;
	}
	
	.animation_flip .round_card + .back_side {
		opacity: 0;
		transition: opacity .75s ease-out 0.25s;
		transform: rotateY(180deg);
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #eeff55;
		color: #2b2b2b;
		border-radius: 50%;
	}

	input.for_touch_ui:checked + .animation_flip {
		transform: rotateY(180deg);
	}

	input.for_touch_ui:checked + .animation_flip .back_side {
		opacity: 1;
	}

}