@charset "utf-8";

/*-- FREEAREA --*/
	
	#freearea-summary,
	#freearea-apply-rules,
	#privacy-policy,
	#freearea-join-rules
	{
		margin: 2rem auto;
	}
		
		#freearea-summary > .title,
		#freearea-apply-rules > .title,
		#privacy-policy > .title,
		#freearea-join-rules > .title
		{
			display: block;
			border-bottom: solid 2px #259;
			padding: 0 1rem .5rem;
			color: #259;
			font-weight: bold;
			font-style: italic;
		}
		
		/*-- 説明 --*/
		#freearea-summary > .desc
		{
			line-height: 1.6;
			padding: .5rem 1rem;
		}
			
			/*-- 説明装飾 --*/
			
			.desc em
			{
				font-weight: bold;
			}
			.dcsl2
			{
				color: #216DD1;
			}
			.wanted
			{
				color: #2687DD;
			}
			.provide
			{
				color: #FF7C19;
			}
			.date-range
			{
				color: #D10F30;
				font-size: 1.2rem;
				font-weight: bold;
			}
			.non-supporter
			{
				color: #090;
			}
			.important
			{
				color: #D10F30;
			}
			
		#freearea-apply-rules > ul,
		#privacy-policy > ul,
		#freearea-join-rules > ul
		{
			line-height: 1.4;
			padding: .5rem 2rem;
			font-size: .9rem;
		}
		
		#freearea-apply-rules li + li,
		#privacy-policy li + li,
		#freearea-join-rules li + li
		{
			margin-top: .5rem;
		}
		
		#freearea-apply-rules > p,
		#privacy-policy > p,
		#freearea-join-rules > p
		{
			padding: .5rem 1rem;
		}
		#freearea-apply-rules small
		{
			color: #666;
		}
		
	/*-- サイズ毎の処理 --*/
		
		@media screen and (min-width: 1225px)
		{
			#artist-list ul
			{
				justify-content: space-around;
				margin: -2rem 0 0 0;
				padding: 2rem 1% 0;
			}
			#artist-list li
			{
				width: 26%;
				margin: 2rem 0 0 0;
			}
		}
		@media screen and (max-width: 1224px) and (min-width: 725px)
		{
			#artist-list ul
			{
				justify-content: space-around;
				margin: -2rem 0 0 0;
				padding: 1rem 1% 0;
			}
			#artist-list li
			{
				width: 26%;
				margin: 2rem 0 0 0;
			}
		}
		@media screen and (max-width: 724px)
		{
			#artist-list ul
			{
				justify-content: space-around;
				margin: -2rem 0 0 0;
				padding: 1rem 1% 0;
			}
			#artist-list li
			{
				width: 42%;
				margin: 2rem 0 0 0;
			}
			#artist-list li .name
			{
				font-size: 1rem;
			}
		}


		#freearea-apply-start .attention
		{
			color: #900;
			text-align: right;
			font-size: .8rem;
		}


/*-- ベース --*/
	
	/*-- 進捗ナビゲーション --*/
		
		.xhrform-proc-navigation
		{
			display: flex;
			display: block;
			word-break: keep-all;
			white-space: nowrap;
	  		width: calc(100% - 2rem);
			max-width: 800px;
			margin: 1rem auto;
			padding: 0;
				font-size: 1.2rem;
		}
		.xhrform-proc-navigation.hidden
		{
			display: none;
		}
			
			.xhrform-proc-navigation ul
			{
				display: flex;
				flex-flow: wrap;
				width: 100%;
				margin: -.5rem 0 0 -.5rem;
				list-style: none;
			}
				
				.xhrform-proc-navigation ul:before
				{
					content: '進捗';
					margin: .5rem 0 0 .5rem;
					border-radius: .5rem;
					padding: .5rem 1rem .4rem;
					background: #00D;
					color: #FFF;
				}
				
				.xhrform-proc-navigation li
				{
					flex: 0 1 auto;
					display: block;
					margin: .5rem 0 0 .5rem;
					border-style: none none solid;
					border-width: 0 0 .5rem;
					border-color: #DDD;
					padding: .2rem .5rem;
					list-style: none;
				}
				
				.xhrform-proc-navigation li.current
				{
					border-color: #00D;
					color: #00D;
				}
				
				.xhrform-proc-navigation li + li
				{
					margin-left: .5rem;
				}
				
				
				
				
				
	/*-- 操作ナビゲーション --*/
		
		.xhrform-proc-controls
		{
			display: flex;
			justify-content: space-between;
			align-items: stretch
		}
			
			.xhrform-proc-button,
			.xhrform-call-button
			{
				position: relative;
				display: flex;
				align-items: center;
				box-shadow: 0 .2rem .2rem rgba(0, 0, 0, .3);
				-webkit-user-select: none;
				user-select: none;
				cursor: pointer;
			}
			
			.xhrform-proc-button
			{
				align-items: center;
				width: 200px;
				height: 40px;
				font-weight: bold;
			}
			.xhrform-proc-button:active,
			.xhrform-call-button:active
			{
				top: 5px;
			}
			.xhrform-prev-button
			{
				justify-content: right;
				left: 20px;
				margin-right: auto;
				padding: 0 2rem 0 1rem;
			}
			.xhrform-prev-button:before
			{
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: -20px;
				width: 0px;
				height: 0px;
				margin: auto;
				border-style: solid;
				border-color: transparent #FCCC66 transparent transparent;
				border-width: 20px 20px 20px 0;
			}
			.xhrform-next-button
			{
				justify-content: left;
				right: 20px;
				margin-left: auto;
				padding: 0 1rem 0 2rem;
			}
			.xhrform-next-button:before
			{
				content: '';
				position: absolute;
				top: 0;
				right: -20px;
				bottom: 0;
				width: 0px;
				height: 0px;
				margin: auto;
				border-style: solid;
				border-color: transparent transparent transparent #FCCC66;
				border-width: 20px 0 20px 20px;
			}
			@media screen and (max-width: 624px)
			{
				.xhrform-proc-button
				{
					width: calc(50% - 30px);
				}
				.xhrform-prev-button
				{
					padding: 0 1rem 0 .5rem;
				}
				.xhrform-next-button
				{
					padding: 0 .5rem 0 1rem;
				}
			}
			.xhrform-prev-button.hidden,
			.xhrform-next-button.hidden
			{
				display: none;
			}
			
			.xhrform-panel input[type="text"],
			.xhrform-panel input[type="tel"],
			.xhrform-panel input[type="email"]
			{
				border-style: solid;
				border-width: .2rem;
				border-color: #CCC;
				border-radius: .2rem;
				padding: .2rem;
				font-size: 1.4rem;
			}
				
				.xhrform-panel input[type="text"]::placeholder,
				.xhrform-panel input[type="tel"]::placeholder,
				.xhrform-panel input[type="email"]::placeholder
				{
					color: #CCC;
				}
					
					.xhrform-panel input[type="text"].w08,
					.xhrform-panel input[type="tel"].w08,
					.xhrform-panel input[type="email"].w08
					{
						width: 100%;
						max-width: 8rem;
					}
					
					.xhrform-panel input[type="text"].w12,
					.xhrform-panel input[type="tel"].w12,
					.xhrform-panel input[type="email"].w12
					{
						width: 100%;
						max-width: 12rem;
					}
					
					.xhrform-panel input[type="text"].w30,
					.xhrform-panel input[type="tel"].w30,
					.xhrform-panel input[type="email"].w30
					{
						width: 100%;
						max-width: 30rem;
					}
					
					.xhrform-panel input[type="text"].w50,
					.xhrform-panel input[type="tel"].w50,
					.xhrform-panel input[type="email"].w50
					{
						width: 100%;
						max-width: 50rem;
					}
					
			.xhrform-panel textarea
			{
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				height: 8rem;
				min-height: 8rem;
				max-height: 14rem;
				border-style: solid;
				border-width: .2rem;
				border-color: #CCC;
				border-radius: .2rem;
				padding: .2rem;
				font-size: 1.2rem;
			}
				
				.xhrform-panel textarea::placeholder
				{
					color: #CCC;
				}
					
					
					
					
	/*-- #xhrform-lightbox --*/
		
		#xhrform-lightbox
		{
			z-index: 10000;
			display: none;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: 100vw;
			max-height: 100%;
			/*bottom: 0;
			right: 0;*/
			background: rgba(0, 0, 0, .7);
			-webkit-overflow-scrolling: touch;
		}
		
		#xhrform-lightbox.open
		{
			display: flex;
		}
			
			#xhrform-loading-image
			{
				display: none;
			}
			.loading #xhrform-loading-image
			{
				display: block;
			}
				
			
			#xhrform-lightbox .main
			{
				display: flex;
				flex-flow: column;
				width: calc(100% - 4rem);
				max-width: 800px;
				height: calc(100% - 4rem);
				max-height: 600px;
			}
			#xhrform-lightbox.loading .main
			{
				display: none;
			}
				
				#xhrform-lightbox .toolbar
				{
					display: block;
					justify-content: flex-end;
					align-items: center;
				}
					
					#xhrform-lightbox .toolbar .close-button
					{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 32px;
						height: 32px;
						margin: 0 0 0 auto;
						padding: 0 .7rem;
						color: #999;
						font-size: 24px;
						cursor: pointer;
					}
					
				#xhrform-lightbox .content
				{
					overflow-y: auto;
					width: 100%;
					height: 100%;
					margin: auto;
					padding: .5rem;
					background: #FFF;
				}
				
		@media screen and (max-width: 624px)
		{
			#xhrform-lightbox .main
			{
				width: calc(100% - 2rem);
				height: calc(100% - 2rem);
			}
		}
		
		
		
	/*-- 注記 --*/
		
		.xhrform-annotation-list
		{
			color: #5AD;
			font-size: .8rem;
		}
		.xhrform-annotation-list li
		{
			text-indent: 1em;
			margin: 0 0 0 -1em;
		}
		.xhrform-annotation-list li:before
		{
			content: '※';
		}
		
		
/*-- 応募案内 --*/
	
	#wait-accept
	{
		display: flex;
		flex-flow: column;
		align-items: center;
		margin: 1rem auto;
		border-style: solid;
		border-width: 2px;
		padding: 1rem 2rem;
		box-shadow: .2rem .2rem .2rem rgba(0, 0, 0, .3);
	}
		
		#wait-accept em
		{
			display: block;
		}
		
		#wait-accept small
		{
			display: block;
			margin: .5rem auto;
			font-size: small;
		}
		
		#wait-accept .saturday
		{
			color: #5496F9;
		}
		
		#wait-accept .attention
		{
			margin-top: 1rem;
		}
		
	#wait-accept.before
	{
		border-color: #F9B247;
		background: rgba(249, 247, 196, .7);
	}
		
		#wait-accept.before small
		{
			color: #F98E30;
		}
		
	#wait-accept.accepting
	{
		border-color: #82C4F9;
		background: rgba(255, 255, 255, .7);
	}
		
		#wait-accept.accepting small
		{
			color: #5496F9;
		}
	
	#wait-accept.after
	{
		border-color: #DDD;
		background: rgba(0, 0, 0, .5);
		color: #DDD;
	}
	
/*-- プロフィールページ --*/
		#xhrform-profile-table
	{
		margin: 1rem auto;
		border-style: solid none;
		border-width: .15rem;
		border-color: #DDD;
		padding: 1rem 0;
	}
			#xhrform-profile-table dt
			{
				display: flex;
				align-items: center;
				color: #060;
				font-size: 1.2rem;
			}
			
			#xhrform-profile-table dt.required::after
			{
				content: '必須';
				line-height: 1;
				margin: 0 0 0 .5rem;
				border-radius: .2rem;
				padding: .2rem .5rem;
				background: #D81C30;
				color: #FFF;
				font-size: 1.1rem;
			}
			
			#xhrform-profile-table dd
			{
				margin: .2rem 0 0;
			}
			
			#xhrform-profile-table dd + dt
			{
				margin-top: 1rem;
				border-top: solid .15rem #DDD;
				padding-top: 1rem;
			}
			
			#xhrform-profile-table dd + dd
			{
				margin-top: .2rem;
			}
			
	#xhrform-profile-postcode
	{
	}
	
	#xhrform-profile-postcode-search-button
	{
		display: inline-flex;
		padding: .2rem 1rem;
		background: #FCCC66;
		color: #FC6316;
		text-shadow: rgba(252, 114, 33, .3);
	}
	
	/*-- #zipcode-result (lightbox) --*/
		
		#xhrform-postcode-result
		{
			-webkit-pointer-events: auto;
			pointer-events: auto;
		}
			
			#xhrform-postcode-result > .desc
			{
				margin: 0 0 .5rem;
				padding: .2rem .5rem;
				background: #FFD;
				box-shadow: .2rem .2rem .2rem #FFD14F;
				text-align: left;
			}
			
			#xhrform-postcode-result .page
			{
				display: flex;
				flex-flow: column wrap;
				margin: .5rem 0;
				padding: 0;
				background: #FFF;
				box-shadow: .2rem .2rem .2rem #FFD14F;
				list-style: none;
			}
				
				#xhrform-postcode-result li
				{
					display: block;
					width: 100%;
					margin: 0;
					padding: .2rem 0;
				}
				
					#xhrform-postcode-result li a
					{
						display: flex;
						margin: 0;
						padding: .2rem .5rem;
						font-size: 1.2rem;
						cursor: pointer;
					}
					
					#xhrform-postcode-result li a:hover
					{
						background: #DFD;
					}
						
						#xhrform-postcode-result .pc
						{
							white-space: nowrap;
							word-break: normal;
						}
						
						#xhrform-postcode-result .lv1
						{
							margin-left: .5rem;
							white-space: nowrap;
							word-break: normal;
						}
						
						#xhrform-postcode-result .lv2
						{
							margin-left: .5rem;
							white-space: nowrap;
							word-break: normal;
						}
						
						#xhrform-postcode-result .ln1
						{
							margin-left: .5rem;
							white-space: nowrap;
							word-break: normal;
						}
						
				#xhrform-postcode-result li + li
				{
					border-top: solid .15rem #DDD;
				}
				
	#xhrform-profile-email-input-alert
	{
		display: none;
		margin: 0 1rem;
		background: #F99;
		color: #FFF;
	}
	#xhrform-profile-email-input-alert.view
	{
		display: inline-block;
		padding: .2rem .5rem;
	}



/*-- 入力内容確認ページ --*/
	
	#xhrform-confirm-table
	{
		margin: 1rem auto;
		border-style: none;
		border-width: .15rem;
		border-color: #DDD;
		padding: 1rem 0;
		border-radius: .5rem;
		padding: 1rem;
		background: rgba(255, 255, 255, .7);
	}
		
		#xhrform-confirm-table dt
		{
			display: flex;
			align-items: center;
			color: #060;
			font-size: 1.2rem;
		}
		
		#xhrform-confirm-table dd + dt
		{
			border-top: solid 1px #DDD;
		}
		
		#xhrform-confirm-table dd
		{
			margin: .2rem 0 0;
		}
			
		#xhrform-confirm-name
		{
			display: inline-block;
		}
		
		#xhrform-confirm-address-level1
		{
		}
		
		#xhrform-confirm-address-level2
		{
			border-top: dashed 1px #DDD;
		}
		
		#xhrform-confirm-address-line1
		{
			border-top: dashed 1px #DDD;
		}
		
		#xhrform-confirm-address-line2
		{
			min-height: 1rem;
			border-top: dashed 1px #DDD;
		}
		
		#xhrform-confirm-memo
		{
			white-space: pre-wrap;
			overflow-y: scroll;
			max-height: 14rem;
		}
		
/*-- 応募完了ページ --*/
	
	#xhrform-finished-messages
	{
		display: flex;
		flex-flow: column;
		justify-content: center;
		border-radius: .5rem;
		padding: 1rem;
		background: rgba(255, 255, 255, .7);
	}
		
		#xhrform-finished-messages p
		{
			padding: 1rem;
		}
		
		#xhrform-finished-messages a
		{
			margin: 2rem auto;
			padding: .5rem 1rem;
		}

/*-- ユーザー指定 --*/
	
	.xhrform-proc-controls
	{
		margin: 2rem auto;
	}
		
		.xhrform-proc-button
		{
			background: #FCCC66;
			color: #FC6316;
			text-shadow: rgba(252, 114, 33, .3);
		}
		.xhrform-proc-button:hover,
		.xhrform-call-button:hover
		{
			background: #FC6316 !important;
			color: #FFF !important;
		}
		.xhrform-prev-button:hover:before
		{
			border-color: transparent #FC6316 transparent transparent !important;
		}
		.xhrform-next-button:hover:before
		{
			border-color: transparent transparent transparent #FC6316 !important;
		}
		
	.xhrform-call-button
	{
		background: #FCCC66;
		color: #FC6316;
		text-shadow: rgba(252, 114, 33, .3);
	}
	
	
	
	
	
/*-- ボタン無効化 --*/
	
	.xhrform-proc-button[disabled]
	{
		background: #DDD;
		color: #666;
		text-shadow: rgba(252, 114, 33, .3);
	}
	.xhrform-proc-button[disabled]:hover
	{
		background: #DDD !important;
		color: #666 !important;
	}
	.xhrform-prev-button[disabled]:before
	{
		border-color: transparent #DDD transparent transparent !important;
	}
	.xhrform-next-button[disabled]:before
	{
		border-color: transparent transparent transparent #DDD !important;
	}
	.xhrform-prev-button[disabled]:hover:before
	{
		border-color: transparent #DDD transparent transparent !important;
	}
	.xhrform-next-button[disabled]:hover:before
	{
		border-color: transparent transparent transparent #DDD !important;
	}
	.xhrform-proc-button[disabled]:active
	{
		top: 0;
	}