@charset "UTF-8";

/* ====================================
	スクリーン共通スタイル
===================================== */
@media only screen {
	/* アニメーション */
	.updown {
		animation: updown 2.4s ease-in-out 0s infinite alternate;
	}
	.rotate_l {
		animation: rotate_l 2.4s ease-in-out 0s infinite alternate;
	}
	.rotate_r {
		animation: rotate_r 2.4s ease-in-out 0s infinite alternate;
	}

	.loaded .main-title-anime {
		opacity: 1;
		transform: scale(1);
		transition: all 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) .7s;
		/* easeOutExpo */
	}
	#mainVisual:not(.loaded) .main-title-anime {
		opacity: 0;
		transform: translate(-50%, 0) scale(1.3);
	}
	.main-plant, .main-pci, .main-cat, .main-right, .main-left {
		transform-origin: center 200%;
		transition: all 2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
		/* easeOutExpo */
	}
	#mainVisual:not(.loaded) .main-left {
		opacity: 0;
		transform: translateX(-200px) translateY(100px) rotate(-20deg);
	}
	#mainVisual:not(.loaded) .main-right {
		opacity: 0;
		transform: translateX(120px) translateY(100px) rotate(20deg);
	}
	#mainVisual:not(.loaded) .main-pci {
		opacity: 0;
		transform: translateX(-200px) translateY(100px) rotate(-20deg);
	}
	#mainVisual:not(.loaded) .main-cat {
		opacity: 0;
		transform: translateX(130px) translateY(100px) rotate(20deg);
	}
	#mainVisual:not(.loaded) .main-plant {
		opacity: 0;
		transform: translateX(-200px) translateY(100px) rotate(-20deg);
	}

	/* ケース一覧：トップ */
	.case-list.top-anime .flex-item {
		opacity: 0;
		/*transition: all 1.4s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
		transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		/* easeInOutBack */
	}
	.case-list.top-anime.passed .flex-item {
		opacity: 1;
	}
	.case-list.top-anime .flex-item:nth-of-type(4n-3) {

	}
	.case-list.top-anime .flex-item:nth-of-type(4n-2) {
		transition-delay: .2s;
	}
	.case-list.top-anime .flex-item:nth-of-type(4n-1) {
		transition-delay: .2s;
	}
	.case-list.top-anime .flex-item:nth-of-type(4n) {

	}
	.case-list.top-anime:not(.passed) .flex-item:nth-of-type(4n-3) {
		transform: translateX(-100px) translateY(-100px);
	}
	.case-list.top-anime:not(.passed) .flex-item:nth-of-type(4n-2) {
		transform: translateX(100px) translateY(-100px);
		transition-delay: .7s;
	}
	.case-list.top-anime:not(.passed) .flex-item:nth-of-type(4n-1) {
		transform: translateX(-100px) translateY(100px);
		transition-delay: .7s;
	}
	.case-list.top-anime:not(.passed) .flex-item:nth-of-type(4n) {
		transform: translateX(100px) translateY(100px);
	}

	/* 吹き出しアニメ */
	.img-layer-anime .img-layer {
		transition: all 1.4s;
		transform: translate(0,0);
		opacity: 1;
	}

	.img-layer-anime .img-layer2 {
		transition-delay: .7s;
	}

	.img-layer-anime .img-layer3 {
		transition-delay: 1.4s;
	}

	.img-layer-anime:not(.passed) .img-layer {
		transform: translate(0,20px);
		opacity: 0;
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media only screen and (min-width: 768px) {
	/* メインビジュアル */pci
	#mainVisual:not(.loaded) .main-left {
		opacity: 0;
		transform: translateX(-400px) translateY(100px) rotate(-20deg);
	}
	#mainVisual:not(.loaded) .main-right {
		opacity: 0;
		transform: translateX(100px) translateY(100px) rotate(20deg);
	}
	#mainVisual:not(.loaded) .main-pci {
		opacity: 0;
		transform: translateX(-400px) translateY(100px) rotate(-20deg);
	}
	#mainVisual:not(.loaded) .main-cat {
		opacity: 0;
		transform: translateX(300px) translateY(100px) rotate(20deg);
	}
	#mainVisual:not(.loaded) .main-plant {
		opacity: 0;
		transform: translateX(-400px) translateY(100px) rotate(-20deg);
	}

	/* ケース一覧：マウスオーバー */
	.case-list a:not(.active)::before {
		transition: all .25s ease-out;
	}
	.case-list a:not(.active).hovering::before {
		background: #269EA8;
		transform: translate(10%, 10%) scale(.65) rotate(11deg);
	}
	.case-list a.hovering .arrow {
		background-image: url(../images/arrow-on.png);
		animation: pyoko_l .2s ease-in-out 0s alternate;
	}
}

/* ====================================
	タブレットスタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1200px) {
}