@charset "utf-8";





/* OverlayScrollbars */
	
	:root
	{
		--scrbar-rail-color: rgba(237, 104, 135, 0.3);
		--scrbar-handle-default-color: rgba(237, 30, 119, 1);
		--scrbar-handle-hover-color: rgba(0, 192, 0, 0.7);
		--scrbar-handle-drag-color: rgba(0, 192, 0, 1);
	}
	
	/*
	os-theme-round-dark
	*/
	
	.os-theme-round-dark > .os-scrollbar {
		padding: 0;
	}
	.os-theme-round-dark > .os-scrollbar-horizontal {
		right: 20px;
		height: 20px;
	}
	.os-theme-round-dark > .os-scrollbar-vertical {
		bottom: 20px;
		width: 20px;
	}
	.os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal {
		left: 20px;
		right: 0;
	}
	.os-theme-round-dark > .os-scrollbar-corner {
		height: 20px;
		width: 20px;
		background-color: transparent;
	}
	.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track {
		background: transparent;
	}
	.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
	.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
		content: '';
		display: block;
		position: absolute;
		background: var(--scrbar-rail-color);
	}
	.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
		left: 3px;
		right: 3px;
		height: 2px;
		top: 50%;
		margin-top: -1px;
	}
	.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
		top: 3px;
		bottom: 3px;
		width: 2px;
		left: 50%;
		margin-left: -1px;
	}
	.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
		background: transparent;
	}
	.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
		content: '';
		display: block;
		position: absolute;
		background: var(--scrbar-handle-default-color);
		border-radius: 100%;
		top: 3px;
		bottom: 3px;
		left: 3px;
		right: 3px;
		transform: scale(1);
	}
	.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
	.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
		transform: scale(1.3);
	}
	.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
		height: 100%;
		min-width: 20px;
		max-width: 20px;
	}
	.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
		width: 100%;
		min-height: 20px;
		max-height: 20px;
	}
	.os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
		transition: transform 0.3s;
	}
	
	
	
/* 全体 */
	
	*
	::before,
	::after
	{
		box-sizing: border-box;
	}
	
	html,
	body
	{
	}
	
	html
	{
		height: -webkit-fill-available;
		font-family: sans-serif;
	}
	body
	{
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}
	
	img
	{
		height: auto;
		object-fit: scale-down;
	}
	
	@keyframes showHideBlock
	{
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@keyframes messageBlink
	{
		0% {
			opacity: 1;
		}
		100% {
			opacity: .1;
		}
	}
	
	
	@keyframes showHideBlockCount
	{
		0% {
			opacity: 0;
			transform: scale(2);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	





/* スキップメッセージ レイヤー */
	
	#skip-message-layer
	{
		z-index: 60000;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
		
		#skip-message
		{
			position: fixed;
			bottom: 10px;
			right: 10px;
			color: #8CCEFF;
			
			animation: 1500ms ease-in 0s infinite alternate messageBlink;
		}





/* サーカスロゴ レイヤー */
	
	#circus-logo-layer
	{
		z-index: 50000;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		
		background: #FFF;
		
		-webkit-user-select: none;
		user-select: none;
		
		opacity: 0;
		animation: 3000ms linear 500ms 1 alternate forwards showLogo;
	}
	@keyframes showLogo
	{
		0% {
			opacity: 0;
		}
		25% {
			opacity: 1;
		}
		75% {
			opacity: 1;
		}
		99% {
			opacity: 0;
		}
		100% {
			z-index: -1;
		}
	}
		
		#circus-logo-layer img
		{
			width: 33.33%;
			max-width: 200px;
		}
		





/* 桜 レイヤー */
	
	#sakura-layer
	{
		z-index: 40000;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		
		-webkit-user-select: none;
		user-select: none;
		pointer-events: none;
	}
	
	/* 桜アニメーション */
	
	.sakura
	{
		display: block;
		/*z-index: 100000;*/
		position: fixed;
		/*animation-name: sakura_p1;*/
		/*animation-duration: 10s; ms も可*/
		animation-timing-function: linear;
		/*animation-delay: 0s;*/
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
		animation-play-state: running;
	}
	
	@keyframes sakura_p1
	{
		0% {
			transform: translateX(0px) translateY(0px) rotateZ(0deg) rotateX(0deg) rotateY(0deg)
		}
		100% {
			transform: translateX(-1000px) translateY(2160px) rotateZ(1800deg) rotateX(1800deg) rotateY(1200deg)
		}
	}
	
	@keyframes sakura_p2
	{
		0% {
			transform: translateX(0px) translateY(0px) rotateZ(270deg) rotateX(270deg) rotateY(270deg)
		}
		100% {
			transform: translateX(-1000px) translateY(2160px) rotateZ(2070deg) rotateX(2070deg) rotateY(1470deg)
		}
	}
	
	@keyframes sakura_p3
	{
		0% {
			transform: translateX(0px) translateY(0px) rotateZ(540deg) rotateX(540deg) rotateY(540deg)
		}
		100% {
			transform: translateX(-1000px) translateY(2160px) rotateZ(2340deg) rotateX(2340deg) rotateY(1740deg)
		}
	}
	
	@keyframes sakura_p4
	{
		0% {
			transform: translateX(0px) translateY(0px) rotateZ(710deg) rotateX(710deg) rotateY(710deg)
		}
		100% {
			transform: translateX(-1000px) translateY(2160px) rotateZ(2610deg) rotateX(2610deg) rotateY(1980deg)
		}
	}
	





/* メイン レイヤー */
	
	#main-layer
	{
		z-index: 30000;
		display: block;
		min-height: 100vh;
		
		background: rgba(255, 255, 255, .8);
		background: #FFF url('sakura_bg.jpg') center bottom no-repeat fixed;
		background-size: contain;
		
		-webkit-user-select: none;
		user-select: none;
		
		opacity: 0;
		animation: 1500ms ease-in 7000ms 1 alternate forwards showHideBlock;
	}
	@media screen and (orientation: portrait) {
		#main-layer
		{
			background: #FFF url('sakura_bg.jpg') center 5% no-repeat fixed;
			background-size: 150%;
		}
	}
		
		#twitter-block
		{
			z-index: 39000;
			position: fixed;
			top: 5px;
			right: 20px;
			display: flex;
			justify-content: flex-end;
			
			opacity: 0;
			animation: 1500ms ease-in 13000ms 1 alternate forwards showHideBlock;
		}
		
		#title-block
		{
		}
			
			#dc-20th-logo
			{
				display: block;
				width: 30%;
				margin: 0 auto;
				padding: 4rem 0 0;
				
				opacity: 0;
				animation: 1500ms ease-in 10000ms 1 alternate forwards showHideBlock;
			}
			
			#dc-20th-message
			{
				display: block;
				width: 60%;
				margin: 2rem auto 0;
				
				opacity: 0;
				animation: 1500ms ease-in 11500ms 1 alternate forwards showHideBlock;
			}
			@media screen and (orientation: portrait) {
				#dc-20th-message
				{
					margin: 3rem auto 0;
				}
			}
			





		#countdown-block
		{
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			margin: 3rem auto 0;
			transform: scale(2);
			
			opacity: 0;
			animation: 1500ms ease-in 13000ms 1 alternate forwards showHideBlockCount;
		}
			
			#countdown-subject
			{
				margin: 0 0 .2rem;
				color: #0AADFF;
				font-size: 1.2rem;
				text-shadow:
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1);
			}
			#countdown-counter
			{
				display: flex;
				justify-content: center;
				align-items: center;
			}
				
				#countdown-counter img
				{
					width: 36px;
					/* 36px × 9 = 324px */
					
					/*opacity: 0;*/
				}
				@media screen and (orientation: portrait) {
					#countdown-counter img
					{
						width: calc(100% / 9);
					}
				}
				/* 特定条件の場合はアニメーションで表示させる。 */
				
			#countdown-message
			{
				display: none;
				flex-flow: column;
				justify-contents: center;
				align-items: center;
				margin: 1rem 0 0;
				color: #F74C6D;
				font-size: 1.2rem;
				text-shadow:
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 .2rem rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1),
					0 0 1px rgba(255, 255, 255, 1);
				cursor: pointer;
				
				animation: 1500ms ease-in 0s infinite alternate messageBlink;
			}
			#countdown-message.enabled
			{
				display: flex;
			}
				
				#countdown-message div:first-child
				{
					font-size: 1.8rem;
				}
			





#last-projects-block
{
	width: 800px;
	max-width: calc(100% - 1rem);
	margin: 3rem auto;
	
	opacity: 0;
	animation: 1500ms ease-in 13000ms 1 alternate forwards showHideBlock;
}
	
	#last-projects-block .title
	{
		text-align: center;
		color: #0AADFF;
		text-shadow:
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 .2rem rgba(255, 255, 255, 1),
			0 0 1px rgba(255, 255, 255, 1),
			0 0 1px rgba(255, 255, 255, 1),
			0 0 1px rgba(255, 255, 255, 1);
		font-family: sans-serif;
		font-size: 1.2rem;
	}
	
	#last-projects-block ul
	{
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		margin: -.5rem 0 0 -.5rem;
		padding: 0;
		list-style: none;
	}
	
		#last-projects-block li
		{
			position: relative;
			width: calc(33.33% - .5rem);
			margin: .5rem 0 0 .5rem;
		}
		@media screen and (max-width: 724px)
		{
			#last-projects-block li
			{
				width: calc(50% - .5rem);
			}
		}
		#last-projects-block li:nth-child(1)
		{
			width: calc(100% - .5rem);
		}
			
			#last-projects-block img
			{
				display: block;
				width: 100%;
				height: auto;
				border-radius: 10px;
			}
			





		#product-block
		{
			max-width: calc(100% - 1rem);
			margin: 4rem auto 0;
			
			opacity: 0;
			animation: 1500ms ease-in 14500ms 1 alternate forwards showHideBlock;
		}
			
			#product-block ul
			{
				display: flex;
				flex-flow: column;
				align-items: center;
				width: 100%;
				margin: 0 auto;
				padding: 0;
				
				list-style: none;
			}
			#product-block ul.already
			{
				flex-flow: wrap;
				width: calc(600px + 1rem);
				margin: 0 auto;
			}
			@media screen and (max-width: 724px)
			{
				#product-block ul.already
				{
					width: 100%;
					margin: 0 0 0 -.5rem;
				}
			}
				
				#product-block li
				{
					display: flex;
					flex-flow: column;
					align-items: center;
					
					width: 100%;
					margin: 0;
					padding: .5rem 0 1rem;
				}
				#product-block ul.already li
				{
					width: calc(300px - .5rem);
					margin: 0 0 0 .5rem;
				}
				@media screen and (max-width: 724px)
				{
					#product-block ul.already li
					{
						width: calc(50% - .5rem);
						margin: 0 0 0 .5rem;
					}
				}
					
					#product-block .part
					{
						margin: 0;
						padding: 0;
						color: #16C1F7;
						text-shadow:
							0 0 .2rem rgba(255, 255, 255, 1),
							0 0 .2rem rgba(255, 255, 255, 1),
							0 0 .2rem rgba(255, 255, 255, 1),
							0 0 1px rgba(255, 255, 255, 1),
							0 0 1px rgba(255, 255, 255, 1),
							0 0 1px rgba(255, 255, 255, 1);
						font-family: sans-serif;
					}
					
					#product-block li a
					{
						display: block;
						margin: 0 auto;
					}
					#product-block :not(ul.already) li a
					{
						max-width: calc(100% - 1rem);
					}
						#product-block li img
						{
							display: block;
							width: 100%;
							height: auto;
							object-fit: scale-down;
						}
			

#footer-block
{
	display: flex;
	justify-content: center;
	margin: 3rem auto 0;
	padding: 5rem 0
	
	opacity: 0;
	animation: 1500ms ease-in 14500ms 1 alternate forwards showHideBlock;
}
	
	#footer-block a
	{
		display: block;
		width: 64px;
		margin: 2rem auto 0;
		padding: 2rem;
	}
		
		#footer-block img
		{
			display: block;
			width: 100%;
			height: auto;
			object-fit: scale-down;
		}