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

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

header{
	h1{
		margin-bottom: 1rem;
	}
	
	p:nth-of-type(2){
		text-align: center;
		color: @colorText;
		margin-bottom: 2rem;
	}
	
}

/* ******************************
#list
****************************** */

#list{
	background: #f0f0f0;
	padding-top: 2rem;
	padding-bottom: 2rem;
	
	>div{
		.box1();
		
		div{
			background: #fff;
			margin-bottom: 0.5rem;
			.flex_wrap();
			padding: 1rem;
			
			p.type{
				-webkit-order: 1;
				order: 1;
				width: 100%;
				margin: 0 0 0.5rem;
				
				span{
					color: @colorText;
					padding: 0 1rem;
					
					&.type1{background:rgb(255, 204, 204);}
					&.type2{background:rgb(255, 221, 153);}
					&.type3{background:rgb(204, 255, 204);}
				}
				
			}
			
			h2{
				-webkit-order: 2;
				order: 2;
				width: 100%;
				font-size: @textM;
				line-height: 125%;
				font-weight: normal;
				margin: 0 0 0.5rem;
				
				a{
					color: #f00;
					text-decoration: none;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
			
			p.schedule{
				-webkit-order: 3;
				order: 3;
				width: 100%;
				margin: 0 0 0.5rem;
				font-size: @textS;
				color: @colorText;
				
				&::before{
					content: '募集期間：';
				}
			}
			
			p.caption{
				-webkit-order: 4;
				order: 4;
				width: 100%;
				margin: 0.5rem 0 1rem;
				color: @colorText;
				border-top: 1px dashed #eee;
				border-bottom: 1px dashed #eee;
				padding: 1rem 0;
			}
			
			p.link{
				-webkit-order: 5;
				order: 5;
				width: 100%;
				
				a{
					display: block;
					width: 50%;
					margin: 0 auto;
					background: #f00;
					color: #fff;
					text-decoration: none;
					text-align: center;
					padding: 0.5rem;
					
					&:hover{
						background: #f66;
					}
				}
			}
		}
	}
}

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

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

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

header{
	p:nth-of-type(2){
		text-align: left;
	}
	
}

/* ******************************
#list
****************************** */

#list{
	padding-top: 1rem;
	padding-bottom: 1rem;
	
	>div{
		.box2();
		
		div{
			
			p.link{
				
				a{
					width: 100%;
				}
			}
		}
	}
}

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

}