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

header+h1{
	.label1();
	margin: 0 0 3rem;
}

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

#list{
	background: @color2;
	
	ul{
		.box1();
		.flex_wrap();
		padding-top: 2%;
			
		li{
			width: 23.5%;
			margin: 0 2% 2% 0;
				
			a{
				display: block;
				background: #fff;
				text-decoration: none;
				
				p:nth-of-type(1){
					padding: 100% 0 0;
					position: relative;
					overflow: hidden;
					
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
					}
				}
				
				p:nth-of-type(2){
					padding: 0.5rem;
					color: @colorText1;
					line-height: 125%;
					
					time{
						font-size: @textS;
						line-height: 150%;
						display: block;
					}
				}
			}
			
			a:hover{
				-webkit-animation: fadeIn 2s ease 0s 1 normal;
				animation: fadeIn 2s ease 0s 1 normal;
				
				p:nth-of-type(2){
					color: @color1;
					-webkit-animation: fadeIn 2s ease 0s 1 normal;
					animation: fadeIn 2s ease 0s 1 normal;
				}
			}
		}
		
		li:nth-child(4n){
			margin: 0 0 2%;
		}
	}
}

/* ******************************
#paging
****************************** */

#paging{
	.box1(640px);
	margin: 0 auto;
	.flex();
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	div{
		width: 49%;
		margin: 3rem 0 0;
	}
	
	div:nth-child(1){
		p{
			.button1(@width:100%,@right:auto,@left:0.5rem,@rotate:225deg);
		}
	}
	
	div:nth-child(2){
		p{
			.button1(@width:100%);
		}
	}
}

@media screen and (max-width:480px){
/* ****************************** start smartphone ****************************** */

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

#list{
	padding: 2% 0;
	
	ul{
		.box2();
		display: block;
			
		li{
			width: 100%;
			margin: 0 0 0.5rem;
			
			a{
				.flex();
				position: relative;
				
				p:nth-of-type(1){
					width: 30%;
					padding: 30% 0 0;
				}
				
				p:nth-of-type(2){
					width: 70%;
					-webkit-align-self: center;
					align-self: center;
				}
				
				&:after{
					.arrow();
				}
			}
		}
	}
}

/* ******************************
#paging
****************************** */

#paging{
	.box2();
}

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