@charset "utf-8";

#PAGEHEADER #WARP #PAGEHEADER_BLOCK{
	background:none;
	box-shadow:none;
	padding:0;
}
#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv{
	border:solid 1px #ccc;
	color:#333;
	position:relative;
	overflow:hidden;
	height: 210px;
}
#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .copy{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 65%, rgba(255,247,247,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 65%,rgba(255,247,247,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 65%,rgba(255,247,247,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	z-index:10;
}
#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .copy p{
	margin:20px 30px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:150%;
	line-height:180%;
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow{
	float:right;
	width:390px;
	max-width: 100%;
	position: relative;
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img {
	animation: show 12s infinite;
	-webkit-animation: show 12s infinite;
	max-width: 100%;
	opacity: 0;
	position: absolute;
}

@keyframes show {
	0% {opacity:0}
	10% {opacity:1}
	25% {opacity:1}
	30% {opacity:0}
}
@-webkit-keyframes show {
	0% {opacity:0}
	10% {opacity:1}
	25% {opacity:1}
	30% {opacity:0}
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img:nth-of-type(1) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img:nth-of-type(2) {
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img:nth-of-type(3) {
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
}

#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img:nth-of-type(4) {
	animation-delay: 9s;
	-webkit-animation-delay: 9s;
}


/* main
----------------------------------------------------------------------------------------------------------*/
main #CONTENTS #CONTENTS_BLOCK .row .col img{
	width:100%;
}



@media screen and (max-width: 770px) {
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .copy{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 65%, rgba(255,247,247,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 65%,rgba(255,247,247,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 65%,rgba(255,247,247,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		z-index:10;
	}
}
@media screen and (max-width: 640px) {
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv {
		height:auto;
		min-height: 190px;
	}
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .copy{
		width:100%;
		height:100%;
		background:rgba(255,255,255,0.7);
		z-index:10;
	}
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .copy p{
		font-size:120%;
	}
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow{
		float:none;
		width:100%;
		max-width: 100%;
		position: relative;
	}
	#PAGEHEADER #WARP #PAGEHEADER_BLOCK .mv .slideshow img{
		width:100%;
	}
}





