@charset "utf-8";

@media all and (min-width:1201px) {
	#idx {
		width:100%;
		height:100%;
		min-width:100%;
		min-height:100%;
		padding:2.5rem 3.75rem;
		display:flex;
		align-items:center;
		flex:1;
	}
	#idx .slogan {
		min-width:40%;
		font-size:4vw;
		font-weight:700;
		line-height:4.5vw;
		text-align:left;
	}
	#idx .slogan .char {
		display:inline-block;
		opacity:0;
		transform:rotateY(-90deg);
		filter:blur(10px);
		animation:slogan-flip 0.5s ease-out forwards;
		animation-delay:calc(0.08s * var(--char-index));
	}
	@keyframes slogan-flip {
		0% {
			opacity:0;
			transform:rotateY(-90deg);
			filter:blur(10px);
		}
		100% {
			opacity:1;
			transform:rotateY(0deg);
			filter:blur(0);
		}
	}

	#idx .work {
		min-width:60%;
	}
}

/* Tablet & Desktop Device */
@media all and (min-width:769px) and (max-width:1200px) {
	#idx {
		width:100%;
		height:100%;
		min-width:100%;
		min-height:100%;
		padding:2.5rem 1rem;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		flex:1;
	}
	#idx .slogan {
		width:100%;
		font-size:6vw;
		font-weight:700;
		line-height:6.5vw;
		padding:0 4rem;
		text-align:center;
	}
	#idx .slogan .char {
		display:inline-block;
		opacity:0;
		transform:rotateY(-90deg);
		filter:blur(10px);
		animation:slogan-flip 0.5s ease-out forwards;
		animation-delay:calc(0.08s * var(--char-index));
	}
	@keyframes slogan-flip {
		0% {
			opacity:0;
			transform:rotateY(-90deg);
			filter:blur(10px);
		}
		100% {
			opacity:1;
			transform:rotateY(0deg);
			filter:blur(0);
		}
	}

	#idx .work {
		width:100%;
		margin-top:3rem;
	}
}

/* Mobile Device */
@media all and (max-width:768px) {
	#idx {
		width:100%;
		height:100%;
		min-width:100%;
		min-height:100%;
		padding:2.5rem 0;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		flex:1;
	}
	#idx .slogan {
		width:100%;
		font-size:8vw;
		font-weight:700;
		line-height:8.5vw;
		padding:0 4rem;
		text-align:center;
	}
	#idx .slogan .char {
		display:inline-block;
		opacity:0;
		transform:rotateY(-90deg);
		filter:blur(10px);
		animation:slogan-flip 0.5s ease-out forwards;
		animation-delay:calc(0.08s * var(--char-index));
	}
	@keyframes slogan-flip {
		0% {
			opacity:0;
			transform:rotateY(-90deg);
			filter:blur(10px);
		}
		100% {
			opacity:1;
			transform:rotateY(0deg);
			filter:blur(0);
		}
	}

	#idx .work {
		width:100%;
		margin-top:3rem;
	}
}