@charset "utf-8";

header{
	opacity: 1;
	visibility: visible;
}
@media screen and (min-width: 771px){

}
@media screen and (max-width: 770px){

}

/*--------------------------------------------------------------------*/

#main{
	overflow: hidden;
}

/*--------------------------------------------------------------------*/

.pagehead .scroll{
	font-size: 17.36vw;
	color: rgba(0,0,0,.05);
	line-height: .9;
	left: 40%;
	width: 100%;
	overflow: hidden;
	max-width: calc(100% - 540px);
}

/*--------------------------------------------------------------------*/

#page:before{
	width: 540px;
	height: 100%;
	background-color: #333;
}
#page:after{
	position: absolute;
    width: 1px;
    height: 100%;
    background-color: #E2E2E2;
    right: 200px;
    top: 0;
}
#page #wrapper{
	position: relative;
	z-index: 1;
}
#page footer{
	background-color: #fff;
}
@media screen and (min-width: 771px){

}
@media screen and (max-width: 770px){
	#page:before{
		width: 100vw;
		height: 100%;
		background-color: #333;
	}
	#page:after{
		right: 50vw;
		z-index: -1;
		opacity: .3;
	}
}

/*--------------------------------------------------------------------*/


.pagehead{
	height: 390px;
	border-bottom: 1px solid #E2E2E2;
}
.pagehead .title{
	color: #fff;
	padding-left: 3.75em;
	position: relative;
	z-index: 100;
}
.pagehead .title .en{
	font-size: 5.4rem;
}
.pagehead .title .en:first-letter{
	color: #3A8153;
}
@media screen and (min-width: 771px){

}
@media screen and (max-width: 770px){
	.pagehead{
		height: 70vw;
		max-height: 320px;
	}
	.pagehead .title{
		padding-left: 12vw;
	}
	.pagehead .title .en{
		font-size: 3rem;
		line-height: 1.2;
	}
}