@charset "utf-8";

/*
Site Name: 
Description: layout
*/

/* base layout
----------------------------------------- */
#container{
	padding: 0px;
	margin: 0px auto;
	text-align: center;
}

header{
	width: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 100;
}
#contents header{
	/**/
}

#headline-area{
	width: 100%;
	height: 541px;
	margin: 0px auto;
	background-color: #FFF;
	position: relative;
	text-align: center;
	overflow: hidden;
}
#contents #headline-area{
	height: 295px;
	background-image: url(../img/contents_header_bg.jpg);
	background-size: cover;
}

#search-area{
	margin: -40px 0px 0px;
	padding: 40px 0px 0px;
	position: relative;
	overflow: hidden;
}
#search-area:before {
	content: '';
	width: 120%;
	height: 90%;
	margin: 10px -10% 0;
	background: #F2E11A;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#search-area:after {
	content: '';
	width: 120%;
	height: 90%;
	margin: 10px -10% 0;
	background: #E5CE4F;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}

/*#search-area:before,
#search-area:after{
	margin: 10px -10% 0;
}*/
#contents #search-area #search-area-inner{
	min-height: 80px;
}


#content{
	overflow: hidden;
	zoom: 1;
}


footer{
	margin: 0px auto;
	text-align: center;
	overflow: hidden;
	clear: both;
}
footer #address-area{
	/*margin: -40px 0px 0px;*/
	padding: 40px 0px 0px;
	position: relative;
	overflow: hidden;
	/*padding: 75px 0px 40px;
	background-image: url(../img/yellow_bg.png);
	background-position: centert top;
	background-repeat: repeat-y;
	background-size: 100% auto;
	overflow: hidden;
	text-align: left;*/
}
footer #address-area:before {
	content: '';
	width: 120%;
	height: 90%;
	margin: 35px -10% 0;
	background: #F2E11A;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
footer #address-area:after {
	content: '';
	width: 120%;
	height: 90%;
	margin: 35px -10% 0;
	background: #E5CE4F;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
footer #address-area .contents-inner{
	padding: 55px 0px 0px;
}

@media all and (max-width: 640px){
#contents #headline-area{
	height: 350px;
	background-image: url(../img/contents_header_bg.jpg);
	background-position: center bottom;
	background-size: 200px cover;
}
	
#search-area{

}
#search-area:before{
	-webkit-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
#search-area:after{
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}	
	
footer #address-area:before {
	-webkit-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}
footer #address-area:after {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
footer #address-area .contents-inner{
	padding: 50px 0px 0px;
}
	
}

/* content layout */
.contents-inner{
	max-width: 950px;
	margin: 0px auto;
	clear: both;
}
#link-area .contents-inner{
	max-width: 926px;
	margin: 30px auto;
}
#contents #link-area .contents-inner{
	max-width: 890px;
	overflow: hidden;
}

#main{
	position: relative;
}
#main:after{
	/*content: "";
	max-width: 950px;
	margin: 0px auto;
	border-top: 40px solid #FFF;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	overflow: hidden;
	position: absolute;
	bottom: -70px;
	left: 0;
	right: 0;
	z-index: 10;*/
}
#main #contents-main{
	margin: 45px 0px 0px;
	text-align: left;
}
@media all and (max-width: 950px){
.contents-inner{
	margin: 0px 10px;
}
}
@media all and (max-width: 926px){
#link-area .contents-inner{
	margin: 30px 10px;
}
}
@media all and (max-width: 890px){
#contents #link-area .contents-inner{
	margin: 0px 10px;
}
}
@media all and (max-width: 768px){
#main,
#sub{
	float: none;
	clear: both;
	width: 100%;
}
}
@media all and (max-width: 640px){
#link-area .contents-inner{
	margin: 30px 10px;
}
}
/* column css
----------------------------------------- */
div.area80{
	width:80%;
	overflow:hidden;
}
div.area60{
	width:60%;
	overflow:hidden;
}
div.area55{
	width:55%;
	overflow:hidden;
}
div.area50{
	width:50%;
	overflow:hidden;
}
div.area45{
	width:45%;
	overflow:hidden;
}
div.area40{
	width:40%;
	overflow:hidden;
}
div.area35{
	width:35%;
	overflow:hidden;
}
@media all and (max-width: 640px){
div.area80,
div.area60,
div.area55,
div.area50,
div.area45,
div.area40,
div.area35{
	width:100%;
	overflow:hidden;
}
}

div.left{
	float:left;
	text-align: left;
}
div.right{
	float:right;
	text-align: left;
}
div.center{
	margin-right: auto;
	margin-left: auto;
}