@charset"UTF-8";


/*================================================
CONT_HEAD
================================================*/

/*641---------*/
@media screen and (min-width:641px){
	#CONT_HEAD{
		background-image: url(../images/ph_main.jpg);
	}
}


/*================================================
box
================================================*/

/*641---------*/
@media screen and (min-width:641px){
	#HAIR .box{
		margin-bottom: 50px;
	}
	
	#HAIR .box .left{
		width: 580px;
	}
		
		#HAIR .box .left span{
			font-size: 1.1rem;
		}
		
	#HAIR .box .right{
		width: 360px;
	}
}

/*640---------*/
@media screen and (max-width:640px){
	#HAIR .box{
		margin-bottom: 50px;
	}
	
	#HAIR .box .left,
	#HAIR .box .right{
		width: 100%;
	}
	
		#HAIR .box .left span{
			font-size: 1.1rem;
		}
	
	#HAIR .box .right{
		background-color: #b8b8b8;
		height: 180px;
	}
	
	#HAIR .box .left{
		margin-bottom: 30px;
	}
}



/*clear---------*/
#HAIR .box{
	zoom:1;
}

#HAIR .box:before,
#HAIR .box:after{
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
}
#HAIR .box:after{
	clear: both;
}


/*================================================
title_box
================================================*/

/*641---------*/
@media screen and (min-width:641px){
	#HAIR .title_box{
		border-bottom: 1px solid #8a7a3f;
		position: relative;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	#HAIR .title_box .ti_left{
		float: left;
		color: #8a7a3f;
	}
	
	#HAIR .title_box .ti_right{
		float: right;
		position: absolute;
		bottom: 10px;
		right: 0;
		text-align: right;
	}
	
		
	
	#HAIR .title_box .ti_left h2{
		font-size: 2rem;
		margin-bottom: 2px;
	}
}


/*640---------*/
@media screen and (max-width:640px){
	#HAIR .title_box{
		border-bottom: 1px solid #8a7a3f;
		position: relative;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	#HAIR .title_box .ti_left{
		color: #8a7a3f;
	}
	#HAIR .title_box .ti_right{

	}
	
	#HAIR .title_box .ti_left h2{
		font-size: 1.6rem;
		margin-bottom: 2px;
	}
}




/*clear---------*/
#HAIR .title_box{
	zoom:1;
}

#HAIR .title_box:before,
#HAIR .title_box:after{
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
}
#HAIR .title_box:after{
	clear: both;
}