@charset "utf-8";

/*-- share.css --*/





/*-- ページ背景 --*/
	
	:root
	{
		--CONTENT-WIDTH: 800px;
		--main-bg-color: #CFEFFF;
		--main-bg-color: #FFF;
		--main-font-color: #444444;
	}
	
	html
	{
		/*overflow-y: auto; /* これをやるとスクロールが効かなくなってしまうので要検証 */
		background-color: var(--main-bg-color);
		background: url('bg_dc4_visual.jpg') center top no-repeat fixed;
		background-size: cover;
		color: var(--main-font-color);
		scroll-behavior: smooth;
		scroll-padding-top: 64px;
	}
	@media screen and (max-width: 1000px)
	{
		html
		{
			scroll-padding-top: 106px;
		}
	}
	@media screen and (max-width: 825px)
	{
		html
		{
			background-size: 250% auto;
			scroll-padding-top: .5rem;
		}
	}
	body
	{
	}





/*-- ベース --*/

	:root
	{
		--CONTENT-WIDTH: 800px;
		--main-bg-color: #CFEFFF;
		--main-bg-color: #FFF;
		--main-font-color: #444444;
	}
	
	html, body, section
	{
	}
	
	body
	{
		overflow-x: hidden;
	}
	
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
	}
	
	p, ul, li, dl, dt, dd, figure, figcaption
	{
		margin: 0;
		padding: 0;
	}
	
	ul
	{
		list-style: none;
	}
	
	p + p, p + ul, p + ol, p + dl,
	ul + p, ul + ul, ul + ol, ul + dl,
	ol + p, ol + ul, ol + ol, ol + dl,
	dl + p, dl + ul, dl + ol, dl + dl
	{
		margin-top: 1rem;
	}
	
	ul ul
	{
		padding: 0 0 0 1.8rem;
	}
	
	ol > li
	{
		padding: 0 0 0 1rem;
	}
	
	ul.disc
	{
		list-style: disc;
		padding: 0 0 0 1.8rem;
	}
	
	em
	{
		font-style: normal;
	}



/*-- パーツ --*/
	
	dl.table
	{
		display: flex;
		flex-flow: wrap;
		width: 32rem;
		margin: 1rem auto 1rem 0;
	}
		
		dl.table > dt
		{
			width: 12rem;
		}
		
		dl.table > dd
		{
			width: 12rem;
		}
		
	
	ul.attention
	{
		padding: 0 0 0 1rem;
		text-indent: -1rem;
		list-style: none;
	}
		
		ul.attention > li:before
		{
			content: '※';
		}
		
		ul.attention > li + li
		{
			margin-top: .5rem;
		}
		
	main a[href]
	{
		display: inline-block;
		padding: .1rem .3rem;
		border-radius: .5rem !important;
		color: #F041AD !important;
	}
	
	main a[href]:hover
	{
		/*background-color: rgba(156, 197, 255, .7) !important;*/
		background-color: rgba(252, 71, 145, .5) !important;
		color: #FFF !important;
	}
	/*
	.af, dt, dd, p
	{
		font-family: 'M PLUS Rounded 1c', 'Meiryo', sans-serif;
		transform: rotate(0.03deg);
	}
	*/


/*-- ヘッダー --*/
	

/*-- メニュー (上部固定/サイド兼用) --*/
	
	/*-- メニュー ベース --*/
		
		#menu-bar
		{
			z-index: 2;
			top: .5rem;
			display: flex;
			justify-content: center;
			align-items: flex-start;
		}
			
			/*-- サイズ毎の処理 --*/
			@media screen and (min-width: 825px)
			{
				#menu-bar
				{
					position: fixed;
					top: 0;
					width: 100%;
					margin: 0 auto;
					padding: .5rem 0;
				}
					
					#menu-bar ul
					{
						flex-flow: wrap;
					}
			}
			@media screen and (max-width: 824px)
			{
			}
			
			
			
	/*-- メニュー ナビゲーションボタン --*/
		
		#navigation-buttons
		{
			z-index: 2;
			flex: 0 1 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			
			#navigation-buttons a
			{
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				-webkit-user-select: none;
				user-select: none;
			}
				
				#menu-bar .button img
				{
					width: 100%;
				}
		/* サーカスへ戻る
		#circus-logo
		{
			display: block;
			width: 80px;
		}
			
			#circus-logo a,
			#circus-logo img
			{
				display: block;
				width: 80px;
			}
			*/
		
		/*-- サイズ毎の処理 --*/
			
			@media screen and (min-width: 825px)
			{
				#toggle-button
				{
					display: none;
				}
				
				#navigation-buttons
				{
					flex: 0 1 auto;
					margin: -1.5rem 0 0 -1rem;
				}
				
					#navigation-buttons li
					{
						width: 120px;
						margin: 1.5rem 0 0 1rem;
					}
						
						#navigation-buttons a
						{
							width: 100%;
						}
						
							#navigation-buttons img
							{
								display: block;
								width: 100%;
							}
							
					#navigation-buttons a.wait:hover
					{
						cursor: wait;
					}
					
					#navigation-buttons a:hover
					{
						cursor: pointer;
						animation: hover-rotate 500ms ease 0s 1 normal forwards running;
					}
					
				#navigation-buttons li + li
				{
					margin-left: 1rem;
				}
				
				#menu-bar .toggle-button,
				#menu-bar .label
				{
					display: none;
				}
				
			}
			@media screen and (max-width: 824px)
			{
				#navigation-buttons
				{
					z-index: 3;
					position: fixed;
					right: -12rem;
					top: 0;
					bottom: 0;
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: stretch;
					width: 12rem;
					height: 100vh;
					margin: auto 0;
					padding: 0 0 0 1rem;
					background: rgba(53, 98, 171, .7);
				}
					
					#toggle-button
					{
						position: absolute;
						bottom: 50%;
						left: -30px;
						display: block;
						width: 30px;
						border-radius: .5rem 0 0 .5rem;
						padding: 1rem 0;
						background: rgba(53, 98, 171, .7);
						color: #FFF;
						text-align: center;
						font-size: 1rem;
						cursor: pointer;
						-webkit-user-select: none;
						user-select: none;
					}
					
					#toggle-button:before
					{
						content: '≪';
					}
					
					#navigation-buttons a
					{
						display: block;
						justify-content: flex-end;
						align-items: center;
						border-radius: 5rem 0 0 5rem;
						padding: .5rem 1rem;
						background: rgba(255, 255, 255, .7);
						color: #3562AB;
					}
					#navigation-buttons .button + li
					{
						margin-top: 1rem;
					}
					#menu-bar li .button
					{
						display: none;
					}
					#menu-bar li .label
					{
						display: block;
						white-space: nowrap;
					}
					
				/* open 時 */
					
					#navigation-buttons.open #toggle-button:before
					{
						content: '≫';
					}
					
					#navigation-buttons.close
					{
						animation: close-sidebar 200ms ease 0s 1 normal forwards running;
						right: -12rem;
					}
					
					#navigation-buttons.open
					{
						animation: open-sidebar 200ms ease 0s 1 normal forwards running;
						right: 0;
					}
					
			}
			
			
			
			
	/*-- メニュー ソーシャルボタン --*/
		
		#menu-bar .social-buttons
		{
			flex: 0;
			display: flex;
		}
			
			#menu-bar .social-buttons li
			{
				display: block;
			}
				
				#menu-bar .social-buttons a
				{
					display: block;
					width: 32px;
					height: 32px;
					border-radius: 5rem;
					cursor: pointer;
					-webkit-user-select: none;
					user-select: none;
				}
				#menu-bar .social-buttons a.circus
				{
					width: 40px;
				}
					
					
					#menu-bar .social-buttons img
					{
						display: block;
						width: 100%;
						height: 100%;
					}
					
		/*-- サイズ毎の処理 --*/
			
			@media screen and (min-width: 825px)
			{
				#menu-bar .social-buttons
				{
					flex: 0 0 auto;
					width: 152px;
					margin: 0;
					padding: 0 8px;
				}
					
					#menu-bar .social-buttons li
					{
						flex: 0 1 auto;
					}
						
					#menu-bar .social-buttons li + li
					{
						margin-left: 16px;
					}
						
					#menu-bar .social-buttons a:hover
					{
						animation: hover-rotate 500ms ease 0s 1 normal forwards running;
					}
			}
			@media screen and (max-width: 824px)
			{
				#menu-bar .social-buttons
				{
					z-index: 2;
					position: fixed;
					display: flex;
					flex-flow: column;
					align-items: center;
					top: 0;
					right: 0;
					margin: 0;
					padding: .5rem .1rem;
				}
					
					#menu-bar .social-buttons li
					{
						flex: 0 1 auto;
					}
						
					#menu-bar .social-buttons li + li
					{
						margin-top: .5rem;
					}
						
					#menu-bar .social-buttons a:hover
					{
						animation: hover-rotate 500ms ease 0s 1 normal forwards running;
					}
					
					#menu-bar .social-buttons li:nth-child(1)
					{
						margin-top: .5rem;
						order: 2;
					}
					
					#menu-bar .social-buttons li:nth-child(2)
					{
						margin-top: .5rem;
						order: 3;
					}
					
					#menu-bar .social-buttons li:nth-child(3)
					{
						order: 1;
					}
					
			}
			
			
			
			
			
	/*-- メニュー アニメーション --*/
		
		/* ボタン */
		
		@keyframes hover-rotate {
			0% {
				transform: scale(1);
			}
			100% {
				transform: scale(1.5) rotateX(360deg);
			}
		}
		
		/* サイドバー */
		
		@keyframes open-sidebar {
			0% {
				right: -12rem;
			}
			100% {
				right: 0;
			}
		}
		
		@keyframes close-sidebar {
			0% {
				right: 0;
			}
			100% {
				right: -12rem;
			}
		}
		
	/*-- メニュー対応アンカー --*/
	
	.anchor
	{
		display:block;
	}
	@media screen and (max-width: 824px)
	{
		.anchor
		{
		/*	margin-bottom: 1rem !important;*/
		}
		
	}





/*-- メイン --*/
	
	main
	{
		z-index: 1;
		position: relative;
		display: block;
		overflow-x: hidden;
		width: 100%;
		margin: 0 auto;
	}
	@media screen and (max-width: 824px)
	{
		main
		{
		}
	}

	@media screen and (min-width: 825px)
	{
		.centering
		{
			width: calc(100vw - 20px);
			margin-left: 50%;
			padding-left: calc((100% - var(--CONTENT-WIDTH)) / 2);
			padding-right: calc((100% - var(--CONTENT-WIDTH)) / 2);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width: 824px)
	{
		.centering
		{
			padding: 1rem 2rem;
		}
	}
	@media screen and (max-width: 724px)
	{
		.centering
		{
			padding: .2rem .5rem;
		}
	}
	




	/*-- セクション共通 --*/
		
		.section
		{
			margin: 3rem auto;
			padding-bottom: 1rem;
		}
		
		.section.theme
		{
			padding-bottom: 6rem;
			background: transparent url('section_footer_bg.png') center bottom no-repeat;
		}
		
			.section.theme h2
			{
				margin-top: 2rem;
				margin-bottom: 2rem;
				background: transparent url('section_header_bg.png') center center no-repeat;
				-webkit-user-select: none;
					user-select: none;
			}
				
				.section.theme h2 img
				{
					max-width: 100%;
					max-height: 60px;
				}
				
		/*-- サイズ毎の処理 --*/
			
			@media screen and (min-width: 1225px)
			{
				.section.theme
				{
					margin-bottom: 6rem;
					padding-top: 2rem;
				}
			}
			@media screen and (max-width: 1224px) and (min-width: 725px)
			{
				.section.theme
				{
					margin-bottom: 4rem;
					padding-top: 1rem;
				}
			}
			@media screen and (max-width: 724px)
			{
				.section.theme
				{
					margin-bottom: 4rem;
					padding-top: 1rem;
				}
			}
			





/*-- フッター --*/
	
	footer
	{
		margin-top: auto;
		padding: 1rem 2rem;
		background: linear-gradient(-5deg, #BFD7FC, #6489C1);
		color: #FFF;
		text-align: center;
	}