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

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

#eyecatch{
	margin: 0 0 3rem;
	
	h1{
		.label1();
		margin: 0 0 3rem;
	}
}

/* ******************************
#data
****************************** */

#data{
	.box1(800px);
	margin-bottom: 3rem;
	
	dl{
		.flex_wrap();
		
		dt,
		dd{
			padding: 0 0 0.5rem;
			margin: 0 0 0.5rem;
			border-bottom: 1px dashed #ccc;
			color: @colorText1;
		}
		
		dt{
			width: 25%;
		}
		
		dd{
			width: 75%;
		}
	}
}

/* ******************************
#map
****************************** */

#map{
	>div{
		width: 100%;
		position: relative;
		padding-bottom: 25%;
		height: 0;
		overflow: hidden;

		>iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
}

/* ******************************
#staff
****************************** */

#staff{
	.box1();
	margin-top: 3rem;
	margin-bottom: 3rem;
	
	h2{
		.label1();
		margin-bottom: 3rem;
	}
	
	ul{
		.flex();
		-webkit-justify-content: space-between;
		justify-content: space-between;
		
		li{
			width: 22%;
			
			img{
				width: 100%;
				margin: 0 0 0.5rem;
			}
			
			span{
				display: block;
				text-align: center;
				color: @colorText1;
			}
		}
	}
}

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

/* ******************************
#data
****************************** */

#data{
	.box2();
	margin-bottom: 3rem;
	
	dl{
		display: block;
		
		dt,dd{
			width: 100%;
		}
	
		dt{
			font-size: @textS;
			line-height: 125%;
			border: none;
			padding: 0;
			margin: 0;
		}
		
		dd{
			padding: 0 0 0.5rem;
		}
	}
}

/* ******************************
#map
****************************** */

#map{
	>div{
		padding-bottom: 100%;
	}
}



/* ******************************
#staff
****************************** */

#staff{
	.box2();
	margin-top: 3rem;
	margin-bottom: 3rem;
	
	ul{
		.flex_wrap();
		
		li{
			width: 49%;
		}
		
		li:nth-of-type(1),
		li:nth-of-type(2){
			margin-bottom: 2%;
		}
	}
}

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