@import (less,optional) './common.css';

input,select,textarea{
	border: 1px solid #ccc;
}

select{
	-webkit-appearance: menulist;
	appearance: menulist;
	cursor: pointer;
}

textarea{
	width: 100%;
	height: 5rem;
}

label,
input[type=radio],
input[type=checkbox]{
	cursor: pointer;
}

label{
	line-height: 125%;
	
	&:after{
		display: block;
		content: '';
		margin: 0 0 0.5rem;
	}
}

label:last-of-type:after{
	margin: 0 !important;
}

input[type=text]{
	width: 50%;
}

/* ******************************
header
****************************** */

header{
	margin-bottom: 2rem;
	h1{
		text-align: left;
		line-height: 125%;
		border-top: 1px dashed #ccc;
		padding: 2rem 0 0;
	}
	
	p.caption{
		text-align: left;
		margin: 0;
		padding: 0;
		color: @colorText;
	}

	p.schedule{
		width: 100%;
		margin: 1rem 0 0;
		color: @colorText;
		
		&::before{
			content: '募集期間：';
		}
	}
	
}

/* ******************************
section.question
****************************** */

section.question{
	background: #f0f0f0;
	padding: 2rem 0 0;
	
	>div:nth-of-type(1){
		.box1();
		
		h2{
			font-size: 1rem;
			margin: 0 0 1rem;
			color: @colorText;
		}
		
		>div{
			background: #fff;
			padding: 0.5rem 1rem;
			
			p:nth-of-type(1){
				color: @colorText;
				
				span::after{
					font-size: @textS;
					color: #f00;
					content: ' ※必須';
				}
			}
			
			p:nth-of-type(2){
				color: @colorText;
			}
		}
		
		>div:last-of-type{
			padding-bottom: 1rem;
			margin: 0 !important;
		}
	}
	
	>div:nth-of-type(2){
		.box1();
		.flex();
		padding-top: 1rem;
		padding-bottom: 2rem;
		
		p{
			width: 50%;
			background: #fff;
			padding: 1rem;
			-webkit-align-items: center;
			align-items: center;
			
			input,a{
				display: block;
				width: 100%;
				border: none;
				text-align: center;
				padding: 1rem;
				color: #fff;
			}
			
			input{
				background: #f00;
			}
			
			a{
				background: #999;
				text-decoration: none;
			}
		}
		
		p:nth-of-type(1){padding-right:0.5rem;}
		p:nth-of-type(2){padding-left:0.5rem;}
	}
}

section.question:nth-of-type(1){
	display: none;
}

section.question:nth-of-type(1),
section.question:nth-of-type(2){
	>div{
		>div{
			margin-bottom: 1px;
			.flex;
			-webkit-align-items: center;
			align-items: center;
			
			p:nth-of-type(1){
				width: 20%;
				padding-right: 1rem;
			}
		}
	}
}

section.question:nth-of-type(3){
	margin-bottom: 2rem;
	>div{
		>div{
			p:nth-of-type(1){
				margin: 0 0 0.5rem;
			}
		}
	}
}

@media screen and (max-width:480px){

/* ****************************** start smartphone ****************************** */

input,select,textarea,label{
	font-size: @textL;
	width: 100%;
}

input[type=text]{
	width: 100%;
}

label{
	border: 1px solid #ccc;
	padding: 1rem;
	margin: 0 0 0.25rem;
	display: block;
	
	input{
		width: auto;
	}
}

/* ******************************
section.question
****************************** */

section.question{
	>div:nth-of-type(1){
		.box2();
	}
	
	>div:nth-of-type(2){
		.box2();
		padding-top: 1rem;
		padding-bottom: 2rem;
		
		p{
			a{
				font-size: @textL;
			}
		}
	}
}

section.question:nth-of-type(2){
	>div{
		>div{
			display: block;
			
			p:nth-of-type(1){
				width: 100%;
				padding-right: 0;
				padding: 0 0 0.5rem;
			}
		}
	}
}

/* ****************************** end smartphone ****************************** */

}