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

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

#eyecatch{
	margin: 0 0 2rem;
	
	h1{
		.label1();
		margin: 0 0 3rem;
	}
	
	>div:nth-of-type(1){
		background: url('../images/works/eyecatch_background.jpg');
		margin: 0 0 2rem;
		
		div{
			.flex();
			max-width: 1440px;
			margin: 0 auto;
			
			p,h2{
				width: 50%;
			}
			
			p img{
				width: 100%;
				height: auto;
			}
			
			h2{
				padding: 1rem;
				.flex();
				align-items: center;
				justify-content: center;
				text-align: center;
				font-family: 'source-han-serif-japanese', serif;
				color: @color5;
				font-size: @textL;
				font-weight: normal;
				line-height: 150%;
			}
		}
	}
	
	>div:nth-of-type(2){
		.box1(800px);
		color: @colorText1;
	}
}

/* ******************************
#gallery
****************************** */

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

/* ******************************
#contact
****************************** */

#contact{
	background: @color3;
}

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

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

#eyecatch{
	>div:nth-of-type(1){
		div{
			display: block;
			
			p,h2{
				width: 100%;
			}
			
			h2{
				font-size: @textM;
			}
		}
	}
	
	>div:nth-of-type(2){
		.box2();
	}
}

/* ******************************
#gallery
****************************** */

#gallery{
	>div{
		>p:nth-of-type(1){
			.box2();
			margin-bottom: 2rem;
			text-align: left;
		}
		
		>p:nth-of-type(2){
			.box2();
			margin-top: 2rem;
		}
	}
}

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