.anime_item .anime_item_0 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 120px;
		height: 100px;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.step1 .anime_item_0 {
		transform: scale(0)
}
@media(max-width: 960px) {
		.anime_item .anime_item_0 {
				width: 120px;
				height: 100px;
		}
}
/* ==== 1 ==== */
.pt1_item {
		width: 320px;
		height: 320px;
		position: relative;
}
.pt1_item_gr {
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		width: 320px;
		height: 320px
}
.pt1_item_gr .pt1_pt {
		position: absolute;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ar-1, .ar-2, .ar-3, .ar-4 {
		width: 75px;
		top: 126px;
}
.ar-5, .ar-6, .ar-7, .ar-8 {
		width: 68px;
		left: 126px;
}
.ar-1 {
		left: 0;
}
.ar-2 {
		left: 79px;
}
.ar-3 {
		right: 0;
}
.ar-4 {
		right: 79px;
}
.ar-5 {
		top: 0;
}
.ar-6 {
		top: 79px;
}
.ar-7 {
		bottom: -1px;
}
.ar-8 {
		bottom: 78px;
}
/* =============== */
.pt1_item_gr {
		transform: rotate(-45deg) scale(0.1);
		opacity: 0;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}
.ar-1 {
		transform: translateX(93px);
		opacity: 0;
}
.ar-3 {
		transform: translateX(-93px);
		opacity: 0;
}
.ar-5 {
		transform: translateY(93px);
		opacity: 0;
}
.ar-7 {
		transform: translateY(-93px);
		opacity: 0;
}
.step1 .pt1_item_gr {
		opacity: 1;
		transform: rotate(-45deg) scale(1);
}
.step2 .ar-1 {
		transform: translateX(0px);
		opacity: 1;
}
.step2 .ar-3 {
		transform: translateX(0px);
		opacity: 1;
}
.step2 .ar-5 {
		transform: translateY(0px);
		opacity: 1;
}
.step2 .ar-7 {
		transform: translateY(0px);
		opacity: 1;
}
.step2 .ar-2, .step2 .ar-4, .step2 .ar-6, .step2 .ar-8 {
		opacity: 0;
}
.step3 .pt1_item_gr {
		transform: rotate(0deg) scale(1);
}
.step3 .ar-2 {
		transform: translateX(-50px);
}
.step3 .ar-4 {
		transform: translateX(50px);
}
.step3 .ar-6 {
		transform: translateY(-50px);
}
.step3 .ar-8 {
		transform: translateY(50px);
}
.step4 .ar-2 {
		transform: translateX(0px);
		opacity: 1;
}
.step4 .ar-4 {
		transform: translateX(0px);
		opacity: 1;
}
.step4 .ar-6 {
		transform: translateY(0px);
		opacity: 1;
}
.step4 .ar-8 {
		transform: translateY(0px);
		opacity: 1;
}
/* ==== 2 ==== */
.pt2_item {
		width: 320px;
		height: 320px;
}
.pt2_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
}
.pt2_item_gr .pt2_dot {
		width: 30px;
		height: 30px;
		position: absolute;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt2_dot {
		top: 145px;
		left: 145px;
}
.dot-1 {
		left: 115px;
		top: 115px;
}
.dot-2 {
		left: 175px;
		top: 115px;
}
.dot-3 {
		left: 115px;
		top: 175px;
}
.dot-4 {
		left: 175px;
		top: 175px;
}
.dot-5 {
		left: 85px;
		top: 145px;
}
.dot-6 {
		left: 145px;
		top: 85px;
}
.dot-7 {
		left: 205px;
		top: 145px;
}
.dot-8 {
		left: 145px;
		top: 205px;
}
.dot-9 {
		left: 0;
		top: 0;
}
.dot-10 {
		top: 0;
		left: inherit;
		right: 0;
}
.dot-11 {
		top: inherit;
		bottom: 0;
		left: 0
}
.dot-12 {
		top: inherit;
		bottom: 0;
		left: inherit;
		right: 0;
}
/* ============ */
.dot-1 {
		transform: translate(30px, 30px);
}
.dot-2 {
		transform: translate(-30px, 30px);
}
.dot-3 {
		transform: translate(30px, -30px);
}
.dot-4 {
		transform: translate(-30px, -30px);
}
.dot-5 {
		transform: translate(60px, 0px);
}
.dot-6 {
		transform: translate(0px, 60px);
}
.dot-7 {
		transform: translate(-60px, 0px);
}
.dot-8 {
		transform: translate(0px, -60px);
}
.dot-9 {
		transform: translate(145px, 145px);
}
.dot-10 {
		transform: translate(-145px, 145px);
}
.dot-11 {
		transform: translate(145px, -145px);
}
.dot-12 {
		transform: translate(-145px, -145px);
}
.pt2_item_gr {
		opacity: 0;
		transition: opacity 0.2s;
}
.step1 .pt2_item_gr {
		opacity: 1;
}
.step1 .dot-1, .step1 .dot-2, .step1 .dot-3, .step1 .dot-4 {
		transform: translate(0, 0);
}
.step2 .dot-5, .step2 .dot-6, .step2 .dot-7, .step2 .dot-8 {
		transform: translate(0, 0);
}
.step3 .dot-9, .step3 .dot-10, .step3 .dot-11, .step3 .dot-12 {
		transform: translate(0, 0);
}
.step4 .dot-9 {
		transform: translate(145px, 0);
}
.step4 .dot-10 {
		transform: translate(0px, 145px);
}
.step4 .dot-11 {
		transform: translate(0, -145px);
}
.step4 .dot-12 {
		transform: translate(-145px, 0);
}
/* ==== 3 ==== */
.pt3_item {
		width: 320px;
		height: 320px;
}
.pt3_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt3_item_gr .pt3_ccl {
		width: 140px;
		height: 140px;
		position: absolute;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s;
}
.pt3_ccl {
		transform: scale(0.6);
		top: 90px;
		left: 90px;
}
.ccl-1, .ccl-1_vt {
		left: 21px;
		transform: translateX(69px) scale(0.6);
}
.ccl-2, .ccl-2_vt {
		left: 159px;
		transform: translateX(-69px) scale(0.6);
}
.ccl-3, .ccl-3_vt {
		top: 21px;
		transform: translateY(69px) scale(1);
		opacity: 0;
}
.ccl-4, .ccl-4_vt {
		top: 159px;
		transform: translateY(-69px) scale(1);
		opacity: 0;
}
/* ============ */
.pt3_item_gr {
		opacity: 0;
}
.step1 .pt3_item_gr {
		opacity: 1
}
.step1 .ccl-1, .step1 .ccl-1_vt {
		left: 21px;
		transform: translateX(69px) scale(1);
}
.step1 .ccl-2, .step1 .ccl-2_vt {
		left: 159px;
		transform: translateX(-69px) scale(1);
}
.step2 .ccl-1, .step2 .ccl-1_vt, .step2 .ccl-2, .step2 .ccl-2_vt {
		transform: translateX(0) scale(1);
}
.step3 .pt3_item_gr {
		transform: rotate(-90deg)
}
.step4 .pt3_item_gr {
		transform: rotate(-180deg)
}
.step4 .ccl-1_vt, .step4 .ccl-2_vt {
		opacity: 0;
}
.step4 .ccl-1,.step4 .ccl-2 {
	transform: rotate(180deg);
}
.step4 .ccl-3, .step4 .ccl-4 {
		opacity: 1
}
.step4 .ccl-3, .step4 .ccl-3_vt, .step4 .ccl-4, .step4 .ccl-4_vt {
		transform: translateY(0) rotate(90deg);
}
/* ==== 4 ==== */
.pt4_item {
		width: 320px;
		height: 320px;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s;
}
.pt4_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt4_item_gr .pt4_retouch {
		position: absolute;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s;
}
.retouch-1, .retouch-2 {
		width: 38px;
		height: 28px;
}
.retouch-3, .retouch-4 {
		width: 28px;
		height: 38px;
}
.retouch-1 {
		left: 109px;
		top: 146px
}
.retouch-2 {
		left: 173px;
		top: 146px
}
.retouch-3 {
		left: 146px;
		top: 109px
}
.retouch-4 {
		left: 146px;
		top: 173px
}
.retouch-5, .retouch-6, .retouch-7, .retouch-8 {
		width: 88px;
		height: 88px;
}
.retouch-5 {
		left: 0;
		top: 116px;
}
.retouch-6 {
		left: 232px;
		top: 116px;
}
.retouch-7 {
		left: 116px;
		top: 0;
}
.retouch-8 {
		left: 116px;
		top: 232px;
}
.pt4_item_gr .pt4_bar {
		width: 250px;
		height: 10px;
		position: absolute;
		left: 35px;
		top: 154.5px;
}
.pt4_bar_in {
		width: 100%;
		height: 100%;
		background: #282828;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt4_bar-1 {
		transform: rotate(17.9deg);
}
.pt4_bar-2 {
		transform: rotate(-17.9deg)
}
.pt4_bar-3 {
		transform: rotate(72deg)
}
.pt4_bar-4 {
		transform: rotate(-72deg)
}
.pt4_bar_in {
		opacity: 0;
}
.pt4_bar-1 .pt4_bar_in {
		transform-origin: left center;
		transform: scaleX(0)
}
.pt4_bar-2 .pt4_bar_in {
		transform-origin: right center;
		transform: scaleX(0)
}
.pt4_bar-3 .pt4_bar_in {
		transform-origin: left center;
		transform: scaleX(0)
}
.pt4_bar-4 .pt4_bar_in {
		transform-origin: left center;
		transform: scaleX(0)
}
/* ============== */
.retouch-1 {
		transform: translateX(12px)
}
.retouch-2 {
		transform: translateX(-12px)
}
.retouch-3 {
		transform: translateY(12px)
}
.retouch-4 {
		transform: translateY(-12px)
}
.retouch-5, .retouch-6, .retouch-7, .retouch-8 {
		opacity: 0;
}
.retouch-5 {
		transform: translateX(90px);
}
.retouch-6 {
		transform: translateX(-90px);
}
.retouch-7 {
		transform: translateY(90px);
}
.retouch-8 {
		transform: translateY(-90px);
}
.pt4_item_gr {
		opacity: 0;
}
.step1 .pt4_item_gr {
		opacity: 1;
}
.step1 .retouch-1, .step1 .retouch-2 {
		transform: translateX(0px)
}
.step1 .retouch-3, .step1 .retouch-4 {
		transform: translateY(0px)
}
.step2 .retouch-5, .step2 .retouch-6 {
		transform: translateX(0px);
		opacity: 1;
}
.step3 .retouch-7, .step3 .retouch-8 {
		transform: translateY(0px);
		opacity: 1;
}
.step4 .pt4_bar-1 .pt4_bar_in, .step4 .pt4_bar-2 .pt4_bar_in, .step4 .pt4_bar-3 .pt4_bar_in, .step4 .pt4_bar-4 .pt4_bar_in {
		transform: scaleX(1);
		opacity: 1;
}
/* ==== 5 ==== */
.pt5_item {
		width: 320px;
		height: 320px;
}
.pt5_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt5_item_gr .pt5_star {
		width: 280px;
		height: 280px;
		position: absolute;
		top: 20px;
		left: 20px;
		transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.star-2, .star-3 {
		opacity: 0;
}
.star-2 {
		transform: scale(0, 0.5);
}
.star-3 {
		transform: scale(0.5, 0);
}
/* ============== */
.pt5_item_gr {
		opacity: 0;
}
.step1 .pt5_item_gr {
		opacity: 1;
}
.star-1 {
		transform: scale(0.3) rotate(-180deg)
}
.step1 .star-1 {
		transform: scale(1) rotate(0deg);
}
.step2 .star-2 {
		transform: scale(0.65, 0.5);
		opacity: 1;
}
.step2 .star-3 {
		transform: scale(0.5, 0.65);
		opacity: 1;
}
.step3 .star-2, .step3 .star-3 {
		transform: scale(1, 1);
}
.step3 .pt5_item_gr {
		transform: rotate(90deg);
}
.step4 .pt5_item_gr {
		transform: rotate(180deg);
}
.step3 .star-1 {
		animation: stepStar 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.step4 .star-1 {
		transform: scale(1) rotate(0deg);
}
@keyframes stepStar {
		0% {
				transform: scale(1) rotate(0deg);
		}
		40%, 45% {
				transform: scale(2.2);
		}
		100% {
				opacity: 1;
		}
}
/* ==== 6 ==== */
.pt6_item {
		width: 320px;
		height: 320px;
}
.pt6_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt6_item_gr .pt6_maru {
		position: absolute;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt6_maru {
		width: 26px;
		height: 26px;
		top: 142px;
		left: 142px;
}
.maru-1 {
		left: 118px;
		top: 148px;
}
.maru-2 {
		left: 178px;
		top: 148px;
}
.maru-3 {
		left: 148px;
		top: 118px;
}
.maru-4 {
		left: 148px;
		top: 178px;
}
.maru-5, .maru-6, .maru-7, .maru-8 {
		transform: scale(1.47);
}
.maru-5 {
		left: 80px;
		top: 148px;
}
.maru-6 {
		left: 217px;
		top: 148px;
}
.maru-7 {
		left: 148px;
		top: 79px;
}
.maru-8 {
		left: 148px;
		top: 217px;
}
.maru-9, .maru-10, .maru-11, .maru-12 {
		transform: scale(2.29);
}
.maru-9 {
		left: 25px;
		top: 148px;
}
.maru-10 {
		left: 272px;
		top: 148px;
}
.maru-11 {
		left: 148px;
		top: 20px;
}
.maru-12 {
		left: 148px;
		top: 272px;
}
.pt6_maru::after {
		display: block;
		position: absolute;
		top: 0;
		left: 5px;
		color: #fff;
		font-size: 14px;
}
/* =========== */
.pt6_item_gr {
		opacity: 0;
}
.step1 .pt6_item_gr {
		opacity: 1;
}
.maru-1 {
		transform: translate(30px, 0px);
}
.maru-2 {
		transform: translate(-30px, 0px);
}
.maru-3 {
		transform: translate(0px, 30px);
}
.maru-4 {
		transform: translate(0px, -30px);
}
.maru-5, .maru-6, .maru-7, .maru-8, .maru-9, .maru-10, .maru-11, .maru-12 {
		opacity: 0;
}
.maru-5 {
		transform: translate(68px, 0px) scale(1);
}
.maru-6 {
		transform: translate(-68px, 0px) scale(1);
}
.maru-7 {
		transform: translate(0px, 68px) scale(1);
}
.maru-8 {
		transform: translate(0px, -68px) scale(1);
}
.maru-9 {
		transform: translate(68px, 0px) scale(1);
}
.maru-10 {
		transform: translate(-68px, 0px) scale(1);
}
.maru-11 {
		transform: translate(0px, 68px) scale(1);
}
.maru-12 {
		transform: translate(0px, -68px) scale(1);
}
.step1 .maru-1, .step1 .maru-2, .step1 .maru-3, .step1 .maru-4 {
		transform: translate(0px, 0px);
		opacity: 1
}
.step2 .maru-7, .step2 .maru-8 {
		transform: translate(0px, 0px) scale(1.47);
		opacity: 1
}
.step3 .maru-5, .step3 .maru-6 {
		transform: translate(0px, 0px) scale(1.47);
		opacity: 1;
}
.step3 .pt6_item_gr {
		transform: rotate(90deg);
}
.step4 .pt6_item_gr {
		transform: rotate(180deg);
}
.step4 .maru-9 {
		transform: translate(0px, 0px) scale(2.29);
		opacity: 1;
}
.step4 .maru-10 {
		transform: translate(0px, 0px) scale(2.29);
		opacity: 1;
}
.step4 .maru-11 {
		transform: translate(0px, 0) scale(2.29);
		opacity: 1;
}
.step4 .maru-12 {
		transform: translate(0px, 0) scale(2.29);
		opacity: 1;
}
/* ==== 7 ==== */
.pt7_item {
		width: 320px;
		height: 320px;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s;
}
.pt7_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt7_item_gr .pt7_bar {
		position: absolute;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s;
}
.pt7_bar {
		top: 142px;
		left: 142px;
		width: 36px;
		height: 36px;
}
.bar-9, .bar-11 {
		width: 40px;
		height: 80px;
}
.bar-10, .bar-12 {
		width: 80px;
		height: 40px;
}
.bar-1 {
		left: 120px;
		top: 120px;
		transform-origin: center bottom;
}
.bar-2 {
		left: 164px;
		top: 120px;
		transform-origin: left center;
}
.bar-3 {
		left: 120px;
		top: 164px;
		transform-origin: right center;
}
.bar-4 {
		left: 164px;
		top: 164px;
		transform-origin: center top;
}
.bar-5, .bar-8 {
		transform: scaleX(0)
}
.bar-6, .bar-7 {
		transform: scaleY(0)
}
.bar-5 {
		left: 76px;
		top: 120px;
		transform-origin: right center;
}
.bar-6 {
		left: 164px;
		top: 76px;
		transform-origin: center bottom;
}
.bar-7 {
		left: 120px;
		top: 208px;
		transform-origin: center top;
}
.bar-8 {
		left: 208px;
		top: 164px;
		transform-origin: left center;
}
.bar-9 {
		left: 4px;
		top: 120px;
		transform-origin: right center;
		width: 40px;
		height: 80px;
}
.bar-10 {
		left: 120px;
		top: 4px;
		transform-origin: center bottom;
		width: 80px;
		height: 40px;
}
.bar-11 {
		left: 276px;
		top: 120px;
		transform-origin: right center;
		width: 40px;
		height: 80px;
}
.bar-12 {
		left: 120px;
		top: 276px;
		transform-origin: center top;
		width: 80px;
		height: 40px;
		transform: translateY(-50px)
}
.bar-9 {
		transform: translateX(50px);
		opacity: 0;
}
.bar-10 {
		transform: translateY(50px);
		opacity: 0;
}
.bar-11 {
		transform: translateX(-50px);
		opacity: 0;
}
.bar-12 {
		transform: translateY(-50px);
		opacity: 0;
}
.pt7_item_gr {
		transform: scale(0.2);
}
.step1 .pt7_item_gr {
		transform: scale(1);
}
.step2 .bar-1, .step2 .bar-4 {
		transform: scaleY(2.9)
}
.step2 .bar-2, .step2 .bar-3 {
		transform: scaleX(2.9)
}
.step3 .bar-5, .step3 .bar-8 {
		transform: scaleX(1.69)
}
.step3 .bar-6, .step3 .bar-7 {
		transform: scaleY(1.69)
}
.step4 .bar-9, .step4 .bar-11 {
		transform: translateX(0);
		opacity: 1;
}
.step4 .bar-10, .step4 .bar-12 {
		transform: translateY(0);
		opacity: 1;
}
/* ==== 8 ==== */
.pt8_item {
		width: 320px;
		height: 320px;
		position: relative;
}
.pt8_item_gr {
		width: 320px;
		height: 320px;
		position: relative;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.pt8_item_gr .pt8_copy {
		position: absolute;
		transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.copy-1, .copy-2 {
		top: 0;
		left: 0;
		width: 320px;
		height: 320px;
}
.copy-3 {
		left: 123px;
		top: 65px;
		width: 77px;
}
.copy-4 {
		left: 123px;
		top: 235px;
		width: 77px;
}
.copy-5 {
		left: 65px;
		top: 123px;
		width: 18px;
}
.copy-6 {
		left: 235px;
		top: 123px;
		width: 18px;
}
/* ============= */
.pt8_item_gr {
		opacity: 0;
}
.step1 .pt8_item_gr {
		opacity: 1
}
.copy-1, .copy-2 {
		transform: scale(0.33);
}
.copy-3, .copy-4, .copy-5, .copy-6 {
		opacity: 0;
}
.copy-3 {
		transform-origin: left center;
		transform: scaleX(0)
}
.copy-4 {
		transform-origin: right center;
		transform: scaleX(0)
}
.copy-5 {
		transform-origin: center bottom;
		transform: scaleY(0)
}
.copy-6 {
		transform-origin: center top;
		transform: scaleY(0);
}
.step1 .pt8_item_gr {
		opacity: 1;
		transform: rotate(90deg);
}
.step2 .copy-1 {
		transform: scale(1)
}
.step2 .copy-2 {
		transform: scaleX(0.3)
}
.step3 .copy-2 {
		transform: scaleX(1)
}
.step3 .copy-3, .step3 .copy-4, .step3 .copy-5, .step3 .copy-6 {
		opacity: 1;
}
.step4 .copy-3 {
		transform: scaleY(1);
}
.step4 .copy-4 {
		transform: scaleY(1);
}
.step4 .copy-5 {
		transform: scaleY(1);
}
.step4 .copy-6 {
		transform: scaleY(1);
}
.step4 .pt8_item_gr {
		transform: rotate(180deg);
}