.main-logo .logo-jp {
	position : relative;
}

.main-logo .logo-jp .jp-item {
	opacity : 0;
	-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	animation : main-anim-jp 1.2s ease-out 1.7s both;
}

.main-logo .logo-jp:before {
	content : '';
	position : absolute;
	background : url('../../svg/bg-main.svg?20230616');
	background-size : cover;
}

.main-logo .logo-ttl {
	position : relative;
}

.main-logo .ttl-item {
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-57%, -50%);
	overflow : hidden;
}

.main-logo .ttl-item > svg {
	display : block;
	margin : 0 auto;
}

.main-logo .logo-thousand {
	position : relative;
}

.main-logo .logo-thousand .thousand-item {
	opacity : 0;
	-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	animation : main-anim-th 0.8s cubic-bezier(0, 0.86, 0.125, 1.02) 1.7s both;
}

.main-logo .logo-thousand:before {
	content : '';
	position : absolute;
	background : url('../../svg/bg-main.svg?20230616');
	background-size : cover;
}

.main-txt {
	text-align : center;
	font-weight : bold;
}

@media screen and (max-width: 767px) {
	.main-logo .logo-jp {
		width : 240px;
		margin : 15px auto 0;
	}
	.main-logo .logo-jp .jp-item {
		padding-left : 6px;
	}
	.main-logo .logo-jp .jp-item > svg {
		width : 112px;
	}
	.main-logo .logo-jp:before {
		width : 160px;
		height : 160px;
		bottom : -74px;
		left : -138px;
	}
	.main-logo .logo-ttl {
		width : 240px;
		height : 180px;
		margin : -68px auto 0;
	}
	.main-logo .ttl-item {
		width : 240px;
		height : 180px;
	}
	.main-logo .ttl-item > svg {
		animation : img-sprite-sp 1.4s steps(33) 0.5s both;
	}
	.main-logo .logo-thousand {
		width : 240px;
		margin : -52px auto 0;
	}
	.main-logo .logo-thousand .thousand-item > svg {
		width : 240px;
		height : 86px;
	}
	.main-logo .logo-thousand:before {
		width : 160px;
		height : 160px;
		bottom : -74px;
		right : -132px;
	}
	.main-txt {
		padding-top : 15px;
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
	.main-logo .logo-jp {
		width : 448px;
		margin : 50px auto 0;
	}
	.main-logo .logo-jp .jp-item {
		padding-left : 15px;
	}
	.main-logo .logo-jp .jp-item > svg {
		width : 198px;
	}
	.main-logo .logo-jp:before {
		width : calc(160px * 1.87);
		height : calc(160px * 1.87);
		bottom : calc(-74px * 1.87);
		left : calc(-138px * 1.87);
	}
	.main-logo .logo-ttl {
		width : 448px;
		height : 339px;
		margin : -112px auto 0;
	}
	.main-logo .ttl-item {
		width : 448px;
		height : 339px;
	}
	.main-logo .ttl-item > svg {
		animation : img-sprite-tab 1.4s steps(33) 0.5s both;
	}
	.main-logo .logo-thousand {
		width : 448px;
		margin : -97px auto 0;
	}
	.main-logo .logo-thousand .thousand-item > svg {
		width : 448px;
		height : 160px;
	}
	.main-logo .logo-thousand:before {
		width : calc(160px * 1.87);
		height : calc(160px * 1.87);
		bottom : calc(-74px * 1.87);
		right : calc(-132px * 1.87);
	}
	.main-txt {
		padding-top : 30px;
		font-size : 1.6rem;
	}
}

@media screen and (min-width: 961px) {
	.main-logo .logo-jp {
		width : 576px;
		margin : 50px auto 0;
	}
	.main-logo .logo-jp .jp-item {
		padding-left : 30px;
	}
	.main-logo .logo-jp .jp-item > svg {
		width : 243px;
	}
	.main-logo .logo-jp:before {
		width : calc(160px * 2.4);
		height : calc(160px * 2.4);
		bottom : calc(-74px * 2.4);
		left : calc(-138px * 2.4);
	}
	.main-logo .logo-ttl {
		width : 576px;
		height : 432px;
		margin : -144px auto 0;
	}
	.main-logo .ttl-item {
		width : 576px;
		height : 432px;
	}
	.main-logo .ttl-item > svg {
		animation : img-sprite-pc 1.4s steps(33) 0.5s both;
	}
	.main-logo .logo-thousand {
		width : 576px;
		margin : -125px auto 0;
	}
	.main-logo .logo-thousand .thousand-item > svg {
		width : 576px;
		height : 205px;
	}
	.main-logo .logo-thousand:before {
		width : calc(160px * 2.4);
		height : calc(160px * 2.4);
		bottom : calc(-74px * 2.4);
		right : calc(-132px * 2.4);
	}
	.main-txt {
		padding-top : 30px;
		font-size : 2.0rem;
	}
}

@media screen and (min-width: 1400px) {
	.main-logo .logo-jp {
		width : 768px;
		margin : 50px auto 0;
	}
	.main-logo .logo-jp .jp-item {
		padding-left : 30px;
	}
	.main-logo .logo-jp:before {
		width : calc(160px * 3.2);
		height : calc(160px * 3.2);
		bottom : calc(-74px * 3.2);
		left : calc(-138px * 3.2);
	}
	.main-logo .logo-ttl {
		width : 768px;
		height : 576px;
		margin : -179px auto 0;
	}
	.main-logo .ttl-item {
		width : 768px;
		height : 576px;
	}
	.main-logo .ttl-item > svg {
		animation : img-sprite-big 1.4s steps(33) 0.5s both;
	}
	.main-logo .logo-thousand {
		width : 768px;
		margin : -166px auto 0;
	}
	.main-logo .logo-thousand .thousand-item {
		animation : main-anim-th 0.8s cubic-bezier(0, 0.86, 0.125, 1.02) 1.7s both;
	}
	.main-logo .logo-thousand .thousand-item > svg {
		width : 768px;
		height : 275px;
	}
	.main-logo .logo-thousand:before {
		width : calc(160px * 3.2);
		height : calc(160px * 3.2);
		bottom : calc(-74px * 3.2);
		right : calc(-132px * 3.2);
	}
	.main-txt {
		padding-top : 30px;
		font-size : 2.4rem;
	}
}

@keyframes main-anim-jp {
	0% {
		opacity : 0;
		-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
		transform : translateX(20px);
	}
	100% {
		opacity : 1;
		-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
		transform : translateX(0px);
	}
}

@keyframes main-anim-th {
	0% {
		opacity : 0;
		-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
		transform : scale(3) translate(0, -200px);
	}
	100% {
		opacity : 1;
		-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
		transform : scale(1) translate(0, 0);
	}
}

@keyframes img-sprite-sp {
	0% {
		transform-origin : center top;
		transform : scale(1) translate(0, 0);
	}
	100% {
		transform-origin : center top;
		transform : scale(1) translate(0, -6600px);
	}
}

@keyframes img-sprite-tab {
	0% {
		transform-origin : center top;
		transform : scale(1.9) translate(0, 0);
	}
	100% {
		transform-origin : center top;
		transform : scale(1.9) translate(0, -6600px);
	}
}

@keyframes img-sprite-pc {
	0% {
		transform-origin : center top;
		transform : scale(2.4) translate(0, 0);
	}
	100% {
		transform-origin : center top;
		transform : scale(2.4) translate(0, -6600px);
	}
}

@keyframes img-sprite-big {
	0% {
		transform-origin : center top;
		transform : scale(3.2) translate(0, 0);
	}
	100% {
		transform-origin : center top;
		transform : scale(3.2) translate(0, -6600px);
	}
}