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

body>div{
	.box1();
	.flex();
	
	section{
		padding: 3rem 1rem 4rem;
		-webkit-flex: 1;
		flex: 1;
		
		h2{
			.label1();
			margin: 0 0 2rem;
		}
		
		p:nth-of-type(1){
			margin: 0 0 0.5rem;
			
			img{
				width: 100%;
				height: auto;
			}
		}
		
		p:nth-of-type(2){
			margin: 0 0 0.5rem;
			color: @colorText1;
		}
		
		p:nth-of-type(3){
			.button1(100%);
		}
	}
	
	section:nth-of-type(2),
	section:nth-of-type(3){
		border-left: 1px solid @color2;
	}
}

/* ******************************
#eyecatch
****************************** */

#eyecatch{
	margin: 0 0 3rem;
	
	h2{
		font-weight: lighter;
		font-family: 'source-han-serif-japanese', serif;
		text-align: center;
		color: @colorText1;
		font-size: @textL;
		line-height: 150%;
		margin: 3rem 0;
		background: url('../images/line.png') no-repeat;
		background-size: 100% auto;
		background-position: center bottom;
		padding: 0 0 3.5rem;
		
		span{
			strong{
				color: @color1;
			}
		}
		
		span:nth-of-type(1){
			display: block;
		}
	}
	
	>div{
		margin: 0 0 2rem;
	}
	
	>div:nth-of-type(2){
		.box1(800px);
		
		div{
			background: @color2;
			padding: 1rem;
			color: @colorText1;
			
			p:nth-of-type(2){
				.button1(40%);
				margin-top: 1rem;
			}
		}
	}
}

/* ******************************
#news
****************************** */

#news{
	h2{
		.label1();
		margin-bottom: 1rem;
	}
	
	>div{
		background: @color2;
		padding: 1rem 0;
		
		ul{
			.box1();
			.flex();
			
			li{
				width: 23.5%;
				margin-right: 2%;
				
				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:last-child{
				margin: 0;
			}
		}
		
		>p{
			.button1();
			margin: 1rem auto 0;
		}
	}
}

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

body>div{
	.box2();
	display: block;
	
	section{
		padding: 1rem 0;
	}
	
	section:nth-of-type(2),
	section:nth-of-type(3){
		border: none;
		border-top: 1px solid @color2;
	}
}

/* ******************************
#eyecatch
****************************** */

#eyecatch{
	h2{
		span:nth-of-type(2){
			display: block;
		}
	}
	
	>div:nth-of-type(2){
		.box2();
		
		div{
			p:nth-of-type(2){
				.button1(100%);
			}
		}
	}
}

/* ******************************
#news
****************************** */

#news{
	>div{
		ul{
			display: block;
			.box2();
			
			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();
					}
				}
			}
		}
		
		>p{
			.button1(92%);
		}
	}
}

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