@charset "utf-8";

/*
Site Name: 
Description: layout
*/

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

#header{
	width: 100%;
	margin: 0px auto;
	background-color: #FFF;
	text-align: center;
	overflow: hidden;
	position: relative;
	top: 0;
	z-index: 100;
}
#header .inner{
	width: 100%;
	height: 125px;
}

#main-visual{
	height: 350px;
	width: 100%;
	display: block;
	position: relative;
	z-index: 10;
}
#main-visual.js-parallax {
    background-image: url("../img/main-bg.jpg");
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
#home #main-visual{
	border-image: linear-gradient(to right, #DC76A0 0%, #DD7F96 14.2857%, #DD898C 14.2857%, #E1B167 28.5714%, #E3BF5A 28.5714%, #E1D744 42.8571%, #C9D35C 42.8571%, #ABCF79 57.1428%, #9DCC87 57.1428%, #77C6AA 71.4285%, #58C1C9 71.4285%, #32BAEC 85.7142%, #5895C9 85.7142%, #325DEC 100%)1/0 0 5px 0;
	border-style: solid;
	border-width: 0px 0px 5px 0px;
}
#contents #main-visual{
	height: 150px;
}

@media all and (max-width: 1025px){
#header{
	height: 195px;
	border-image: linear-gradient(to right, #DC76A0 0%, #DD7F96 14.2857%, #DD898C 14.2857%, #E1B167 28.5714%, #E3BF5A 28.5714%, #E1D744 42.8571%, #C9D35C 42.8571%, #ABCF79 57.1428%, #9DCC87 57.1428%, #77C6AA 71.4285%, #58C1C9 71.4285%, #32BAEC 85.7142%, #5895C9 85.7142%, #325DEC 100%)1/0 0 5px 0;
	border-style: solid;
	border-width: 0px 0px 5px 0px;
}
.fixed #header{
	height: 50px;
	animation-name: slideInDown;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	position: fixed;
	top: 0;
}
}
@media all and (max-width: 860px){
#main-visual{
    background-position: center 300px;
	background-size: 100% auto;
	background-attachment: scroll;
    height: 400px;
	
}
#main-visual.js-parallax {
    background-size: auto 700px;
}
#contents #main-visual{
    background-position: center 150px;
	height: 150px;
}
#contents #main-visual.js-parallax {
    background-size: auto 500px;
}
}

#content{
	padding-bottom: 120px;
	background-color: #FFF;
	text-align: left;
	position: relative;
}
#home #content{
	padding-bottom: 0px;
}
#footer{
	margin: 0px auto;
	border-image: linear-gradient(to right, #DC76A0 0%, #DD7F96 14.2857%, #DD898C 14.2857%, #E1B167 28.5714%, #E3BF5A 28.5714%, #E1D744 42.8571%, #C9D35C 42.8571%, #ABCF79 57.1428%, #9DCC87 57.1428%, #77C6AA 71.4285%, #58C1C9 71.4285%, #32BAEC 85.7142%, #5895C9 85.7142%, #325DEC 100%)1/5px 0 0 0;
	border-style: solid;
	border-width: 5px 0px 0px 0px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
@media all and (max-width: 768px){
#content:before{
	top: -60px;
}	
#container:before{
    background-position: center top;
    background-image: url("../img/main-visual_bg_sp.jpg");
}
}
@media all and (max-width: 640px){
#home #main-visual{
    height: 400px;
}
}

/* content layout */
#main,
#sub{
	width: 100%;
	padding-bottom: 60px;
}
.inner-content{
    max-width: 100%;
    margin: 0px auto;
	padding: 0px 30px;
    position: relative;	
}
#main .inner-content{
	max-width: 950px;
}
@media all and (max-width: 1025px){
.inner-content{
	padding: 0px 15px;
}
#main .inner-content{
	padding: 0px 30px;
}
}
@media all and (max-width: 768px){
#main,
#sub{
	float: none;
	clear: both;
	width: 100%;
}
}
/* 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;
}#