@charset "utf-8";

/*-- タイトル --*/
	
	#title-section
	{
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		align-items: center;
		padding: 30% 0 4%;
		text-align: center;
		-webkit-user-select: none;
			user-select: none;
		background: url('../bg_live_visual.jpg') center top no-repeat;
	}
		
		#title-strings
		{
			width: 50%;
			max-width: 600px;
		}
			
			#title-strings h1
			{
				width: 100%;
				max-width: 100%;
				margin: 0 auto;
				padding: 0;
				text-align: center;
				font-size: 48px;
			}
				
				#title-strings h1 img
				{
					display: block;
					width: 100%;
					max-width: 100%;
					margin: 0;
					padding: 0;
					object-fit: scale-down;
				}
				
			#title-strings p
			{
				width: 100%;
				max-width: 100%;
				margin: 5% auto 0;
				padding: 0 10%;
				text-align: center;
			}
				
				#title-strings p img
				{
					display: block;
					width: 100%;
					max-width: 100%;
					margin: 0 auto;
				}
				
		
	/*-- サイズ毎の処理 --*/
		
		@media screen and (min-width: 2160px)
		{
			#title-section
			{
				background-size: 100% auto;
			}
		}
		@media screen and (max-width: 2159px)
		{
			#title-section
			{
				background-size: 150% auto;
			}
		}
		@media screen and (max-width: 824px)
		{
			#title-section
			{
				background-size: 180% auto;
			}
			#title-strings
			{
				width: 80%;
				max-width: 600px;
			}
		}
		@media screen and (max-width: 524px)
		{
			#title-section
			{
				background-size: 220% auto;
			}
			#title-strings
			{
				width: 80%;
				max-width: 600px;
			}
		}





/*-- NEWS --*/
	
	#news-section
	{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding-top: .5rem;
		padding-bottom: .5rem;
		background: linear-gradient(-5deg, #BFD7FC, #6489C1);
	}
		
		#news-section h2
		{
			display: flex;
			width: 12rem;
			padding: 0;
			color: #FFF;
			text-align: center;
		}
		
		#news-section dl
		{
			display: flex;
		}
			
			#news-section dt
			{
				color: #FFF;
			}
			
			#news-section dd
			{
				color: #FFF;
			}
		
		#news-section a
		{
			color: #FFCCEE !important;
		}
		
	/*-- サイズ毎の処理 --*/
		
		@media screen and (min-width: 1225px)
		{
			#news-section h2
			{
				width: 10rem;
				padding: 0;
			}
			#news-section dl
			{
				overflow-y: auto;
				flex-flow: wrap;
				justify-content: flex-start;
				align-items: flex-start;
				align-content: flex-start;
				width: calc(100% - 10rem);
				min-height: 6rem;
				max-height: 12rem;
			}
			
			#news-section dt
			{
				width: 6rem;
			}
			
			#news-section dd
			{
				width: calc(100% - 6rem);
			}
			#news-section dd + dt,
			#news-section dd + dt + dd
			{
				margin-top: .5rem;
				border-top: dotted .15rem rgba(255, 255, 255, .5);
				padding-top: .5rem;
			}
		}
		@media screen and (max-width: 1224px) and (min-width: 725px)
		{
			#news-section h2
			{
				width: 6rem;
				padding: 0;
			}
			#news-section dl
			{
				overflow-y: auto;
				flex-flow: wrap;
				justify-content: flex-start;
				align-items: flex-start;
				align-content: flex-start;
				width: calc(100% - 6rem);
				min-height: 6rem;
				max-height: 10rem;
			}
			
			#news-section dt
			{
				width: 6rem;
			}
			
			#news-section dd
			{
				width: calc(100% - 6rem);
			}
			#news-section dd + dt,
			#news-section dd + dt + dd
			{
				margin-top: .5rem;
				border-top: dotted .15rem rgba(255, 255, 255, .5);
				padding-top: .5rem;
			}
		}
		@media screen and (max-width: 724px)
		{
			#news-section
			{
				flex-flow: column;
			}
			#news-section h2
			{
				width: auto;
				margin: .2rem auto;
				padding: 0;
			}
			#news-section dl
			{
				overflow-y: auto;
				flex-flow: column;
				width: 100%;
				min-height: 3rem;
				max-height: 10rem;
				margin: .2rem auto;
			}
			#news-section dt
			{
				display: block;
				width: 100%;
			}
			#news-section dd
			{
				display: block;
				width: 100%;
			}
			#news-section dd + dt
			{
				margin-top: .5rem;
				border-top: dotted .15rem rgba(255, 255, 255, .5);
				padding-top: .5rem;
			}
		}
		


	#crowdfanding-appeal-section
	{
	}
		
		#crowdfanding-appeal-section .centering
		{
			display: flex;
			flex-flow: column;
			align-items: center;
		}
			
			#crowdfanding-appeal-section a
			{
				display: block;
				max-width: 100%;
				margin: 0 auto;
				padding: 0;
			}
			#crowdfanding-appeal-section a:hover
			{
				background: rgba(255, 255, 255, .7) !important;
				box-shadow: 0 0 1rem rgba(240, 65, 173, .7);
			}
				
				#crowdfanding-appeal-section img
				{
					display: block;
					width: 100%;
					max-width: 750px;
				}
				
			#crowdfanding-appeal-section .attention
			{
				margin-top: .5rem;
				color: #CC4998;
				font-size: 1.4rem;
			}
			
			#crowdfanding-appeal-section .annotation
			{
				margin-top: .5rem;
				text-align: center;
				color: #1C6BEF;
				font-size: 1.4rem;
			}
			
		@media screen and (max-width: 774px)
		{
			#crowdfanding-appeal-section a
			{
				margin: 0 .5rem;
			}
			#crowdfanding-appeal-section .attention,
			#crowdfanding-appeal-section .annotation
			{
				font-size: 1rem;
			}
		}
		
		#crowdfanding-appeal-section a.default
		{
			margin: 0;
			padding: 1rem;
			background: rgba(255, 255, 255, .7);
		}
			#crowdfanding-appeal-section a.default span
			{
				white-space: nowrap;
			}
		#crowdfanding-appeal-section a.default:hover
		{
			margin: 0;
			background: transparent !important;
			color: #F041AD !important;
		}




/*-- #freearea-appeal-section --*/
	
	#freearea-appeal-section
	{
		display: flex;
		flex-flow: column;
		align-items: center;
		margin: 2rem 0;
	}
		
		#freearea-appeal-section a
		{
			display: block;
			margin: 0 auto;
			padding: 0;
		}
		#freearea-appeal-section a:hover
		{
			background: rgba(255, 255, 255, .7) !important;
			box-shadow: 0 0 1rem rgba(240, 65, 173, .7);
		}
			
			#freearea-appeal-section img
			{
				display: block;
				width: 100%;
				max-width: 468px;
			}
			
	@media screen and (max-width: 774px)
	{
		#freearea-appeal-section a
		{
			margin: 0 .5rem;
		}
	}
	




/*-- crowdfunding/promotion-movie --*/
	
	#promotion-movie-block
	{
		z-index: 1;
		position: relative;
		margin: 0 0 1rem;
	}
		
		#promotion-movie-image
		{
			z-index: 2;
			position: relative;
			width: 100%;
			height: auto;
			border-radius: .5rem;
			cursor: pointer;
		}
		#promotion-movie-image:hover
		{
			opacity: .7;
		}
		
		#promotion-movie-frame
		{
			z-index: 1;
			position: relative;
			display: none;
			width: 100%;
			height: auto;
			top: 0;
			border-radius: .5rem;
			padding-top: 56.25%;
		}
			
			#promotion-movie-obj
			{
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				border-radius: .5rem;
			}
			
		#promotion-movie-block small
		{
			display: block;
			padding: .2rem .5rem;
			text-align: center;
			color: rgba(45, 109, 173, .7);
		}
		
	
	#archivement-comment
	{
		text-align: center;
		color:#3F6BEF;
		font-size: 1.2rem;
		font-weight: bold;
	}



/*-- from --*/
	
	#off-meeting-section,
	#from-section
	{
		
	}
		
		#off-meeting-section .frame,
		#from-section .frame
		{
			display: block;
			max-width: 100%;
			margin: 0 auto;
			border-radius: .5rem;
			padding: 1rem;
			background: rgba(255, 255, 255, .7);
			box-shadow: .2rem .2rem .5rem rgba(51, 79, 125, .7);
			color: #334F7D;
		}
			
			#off-meeting-section .message,
			#from-section .message
			{
				display: block;
			}
			#off-meeting-section .message +  .message
			{
				margin-top: 3rem;
			}
				
				#off-meeting-section .message p,
				#from-section .message p
				{
					max-width: 100%;
					line-height: 1.6;
				}
			
			#chronology-column
			{
				display: flex;
				align-items: center;
			}
				
				#chronology-block
				{
					display: block;
					width: 35%;
					padding: 1rem;
				}
				#chronology-block a:hover
				{
					background: transparent !important;
				}
					
					#chronology-block a,
					#chronology-block img
					{
						display: block;
						width: 100%;
						margin: 0;
					}
					
					#chronology-block small
					{
						display: block;
						margin: .2rem auto 0;
						color: #090;
						text-align: center;
						text-decoration: none;
						font-size: .8rem;
					}
					
		#kurita-signature
		{
			margin-top: 5rem;
			text-align: right;
		}
		
					
	/*-- サイズ毎の処理 --*/
		
		@media screen and (min-width: 825px)
		{
			#from-section .message
			{
				padding: 2rem 1rem;
			}
			#chronology-column .message
			{
				width: 65%;
			}
			#chronology-block
			{
				width: 35%;
			}
		}
		@media screen and (max-width: 824px)
		{
			#from-section .message
			{
				padding: 1rem 4rem;
			}
			#from-section .message br
			{
				display: none;
			}
			#chronology-column
			{
				flex-flow: column;
			}
			#chronology-column .message
			{
				width: 100%;
			}
			#chronology-block
			{
				width: 100%;
			}
		}
		@media screen and (max-width: 664px)
		{
			#from-section .message
			{
				padding: 1rem;
			}
			#chronology-column
			{
				width: 100%;
				flex-flow: column;
			}
			#chronology-block
			{
				width: 100%;
			}
		}





/*-- INFO --*/
	
	#info-section
	{
		
	}
		
		/* 開催日 */
			
			#info-section .date-time
			{
				text-align: center;
			}
				
				#info-section .date-time > .name
				{
					display: block;
					text-align: center;
					font-weight: bold;
				}
				
				#info-section .year,
				#info-section .month,
				#info-section .day
				{
					font-size: 2.4rem;
				}
				#info-section .unit
				{
					font-size: 1.4rem;
				}
				#info-section .wday
				{
					display: block;
					margin: 0 auto;
					color: #BF4962;
				}
				
			/*-- サイズ毎の処理 --*/
				
				@media screen and (min-width: 1225px)
				{
					#info-section .date-time
					{
						margin: 3rem auto;
					}
						
						#info-section .date-time > .name
						{
							margin: 1rem auto;
						}
				}
				@media screen and (max-width: 1224px) and (min-width: 725px)
				{
					#info-section .date-time
					{
						margin: 2rem auto;
					}
						
						#info-section .date-time > .name
						{
							margin: .5rem auto;
						}
				}
				@media screen and (max-width: 724px)
				{
					#info-section .date-time
					{
						margin: 2rem auto;
					}
						
						#info-section .date-time > .name
						{
							margin: .2rem auto;
						}
				}
				
		/* 公演 */
			
			#info-section .performance
			{
				text-align: center;
			}
				
				#info-section .performance > .name
				{
					display: block;
					margin: 1rem auto;
					font-weight: bold;
				}
				
				#info-section .performance ul
				{
					display: flex;
				}
					
					#info-section .performance li
					{
						display: block;
					}
						
						#info-section .performance .order
						{
							font-size: 1rem;
						}
						
						#info-section .performance .time
						{
							font-size: 2rem;
						}
						
				#info-section .performance .supplement
				{
					display: block;
					text-align: center;
					font-size: 1.0rem;
					color: #494;
				}
				
			/*-- サイズ毎の処理 --*/
				
				@media screen and (min-width: 1225px)
				{
					#info-section .performance
					{
						margin: 3rem auto;
					}
						
						#info-section .performance > .name
						{
							margin: 1rem auto;
						}
						
						#info-section .performance ul
						{
							justify-content: center;
							margin: 1rem 0 .5rem -1.5rem;
						}
							
							#info-section .performance li
							{
								margin: 0 0 0 1.5rem;
							}
				}
				@media screen and (max-width: 1224px) and (min-width: 725px)
				{
					#info-section .performance
					{
						margin: 2rem auto;
					}
						
						
						#info-section .performance > .name
						{
							margin: .5rem auto;
						}
						
						#info-section .performance ul
						{
							justify-content: center;
							margin: 1rem 0 .5rem -1.5rem;
						}
							
							#info-section .performance li
							{
								margin: 0 0 0 1.5rem;
							}
				}
				@media screen and (max-width: 724px)
				{
					#info-section .performance
					{
						margin: 2rem auto;
					}
						
						
						#info-section .performance > .name
						{
							margin: .2rem auto;
						}
						
						#info-section .performance ul
						{
							flex-flow: wrap;
							margin: -.3rem 0 0;
						}
							
							#info-section .performance ul li
							{
								width: 50%;
								margin: .3rem 0 0;
							}
							
						#info-section .performance .supplement
						{
							margin: .3rem auto 0;
						}
				}
				
		/* 会場 */
			
			#info-section .place
			{
				font-size: 1.0rem;
				text-align: center;
			}
				#info-section .place > .name
				{
					display: block;
					font-weight: bold;
				}
				#info-section .place > div
				{
					margin: 1rem auto;
				}
					#info-section .place > div > .name
					{
						font-size: 1.8rem;
						font-weight: bold;
					}
					#info-section .place > div > .address
					{
						margin: .4rem auto;
					}
						
						#info-section .place > div .station
						{
							font-weight: bold;
						}
						
			/*-- サイズ毎の処理 --*/
				
				@media screen and (min-width: 1225px)
				{
					#info-section .place
					{
						margin: 3rem auto;
					}
						
						#info-section .place > .name
						{
							margin: 1rem auto;
						}
							
							#info-section .place > div .access
							{
								margin-left: 1rem;
							}
							
						#info-section .place > div .station > span:nth-child(2):before
						{
							display: inline;
							content: '：';
						}
						
						#info-section .place > div .station > span:nth-child(3):before
						{
							display: inline;
							content: '・';
						}
				}
				@media screen and (max-width: 1224px) and (min-width: 725px)
				{
					#info-section .place
					{
						margin: 2rem auto;
					}
						
						#info-section .place > .name
						{
							margin: .5rem auto;
						}
							
							#info-section .place > div .access
							{
								margin-left: 1rem;
							}
						
						#info-section .place > div .station > span:nth-child(2):before
						{
							display: inline;
							content: '：';
						}
						
						#info-section .place > div .station > span:nth-child(3):before
						{
							display: inline;
							content: '・';
						}
				}
				@media screen and (max-width: 724px)
				{
					#info-section .place
					{
						margin: 2rem auto;
					}
						
						#info-section .place > .name
						{
							margin: .2rem auto;
						}
							
							#info-section .place > div .access
							{
								display: block;
								width: 8rem;
								margin: .5rem auto;
							}
						
						#info-section .place > div .station
						{
							display: flex;
							flex-flow: column;
							align-items: flex-start;
							width: 16rem;
							margin: 0 auto;
						}
							
							#info-section .place > div .station span
							{
								display: block;
								margin-left: 2rem;
							}
							
							#info-section .place > div .station span:nth-child(1)
							{
								align-self: center;
								margin-left: 0;
								text-align: center;
							}
				}
				





/*-- discussion --*/
	
	#discussion-section
	{
		padding: 0 0 4rem;
	}
		
		#discussion-section .description
		{
			text-align: center;
		}
			
			#discussion-section .description .slack
			{
				color: #44895E;
			}
			
			#discussion-section .description .twitter
			{
				color: #2F9FED;
			}
			
			#discussion-section .description .slive
			{
				color: #0C479B;
			}
			
		#discussion-section ul
		{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 -1rem;
		}
			
			#discussion-section li
			{
				display: block;
				width: calc(50% - 1rem);
				margin: 1rem 0 0 1rem;
			}
				
				#discussion-section a
				{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					text-decoration: none;
					font-weight: bold;
					background: rgba(255, 255, 255, .7);
				}
				#discussion-section a:hover
				{
					background: rgba(255, 255, 255, .7) !important;
					box-shadow: 0 0 1rem rgba(240, 65, 173, .7);
				}
				#discussion-section li.slack a
				{
					border-style: solid;
					border-width: .2rem;
					border-color: #2FBC81 #E51E5B #FFC333 #38D0FD;
					padding: 1rem 3rem;
					color: #555 !important;
				}
				
				#discussion-section li.twitter a
				{
					border-style: solid;
					border-width: .2rem;
					border-color: #2F9FED;
					padding: 1rem 3rem;
					color: #2F9FED !important;
				}
				
		@media screen and (min-width: 825px)
		{
		}
		@media screen and (max-width: 824px)
		{
			#discussion-section ul
			{
				flex-flow: column;
			}
			#discussion-section li
			{
				display: block;
				width: calc(100% - 2rem);
				max-width: 600px;
			}
		}