/* ******************************************************************
 *	File name		: top.css
 *	Summary			: css base
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

body::before{
	animation:bg_blur 1s linear 0s forwards alternate;
}
@keyframes bg_blur{
	0% {filter:blur(3px);}
	100% {filter:blur(0px);}
}

/* ------------------------------------------------
   main_img
------------------------------------------------- */

#main_img{
	position:relative;
	width:100%;
	height:285px;
	margin:0px;
	z-index:0;
	}
	#main_img p{
		position:absolute;
		top:20px;
		left:calc(50% - 470px);
		font-family: 'Noto Serif JP', serif;
		font-size:0.87rem;
		color:rgba(255,255,255,0.5);
		line-height:1.5;
		animation:color_kirari 5s linear 0s infinite alternate;
}
@keyframes font_kirari{
	0%   {opacity:0;line-height:1;}
	100% {opacity:1;line-height:1.5;}
}
@keyframes color_kirari{
	0% {color:rgba(255,255,255,0.5);}
	100% {color:rgba(0,228,239,0.5);}
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#main_img p{
		left:20px;
	}
}
@media only screen and (max-width:767px){
	#main_img{
		height:240px;
	}
	#main_img p{
		top:70px;
		font-size:0.6rem;
	}
}

/* -----------------------------------------------------------------
   News
----------------------------------------------------------------- */

#news{
	position:relative;
	width:880px;
	margin:0 auto;
	max-width:100%;
	padding:15px 30px 20px;
	background:rgba(255,255,255,0.95);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}
#news #newsframe{
	position:absolute;
	top:20px;
	left:20px;
	width:100%;
	height:100%;
	z-index:-1;
	overflow:hidden;
	}
	#news #newsframe::before{
		content:" ";
		position:absolute;
		top:-10px;
		left:-10px;
		width:100%;
		height:100%;
		border:4px solid #006CD8;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		animation:border_kirari 5s linear 0s infinite alternate;
}
@keyframes border_kirari{
	0% {border:4px solid #006CD8;}
	100% {border:4px solid #00E4EF;}
}
/* --- responsive --- */
@media screen and (max-width:940px){
	#news #newsframe{
		display:none;
	}
}

#news h2{
	position:relative;
	height:28px;
	padding:0 0 0 30px;
	font-weight:bold;
	font-size:1.1rem;
	background:url(../../image/base/h2_bg.png) no-repeat 0 0;
	margin:0 0 5px;
	color:#006CD8;
	}
	#news h2::after{
		content:" ";
		position:absolute;
		left:15px;
		bottom:2px;
		width:790px;
		max-width:calc(100% - 20px);
		height:1px;
		background:#006CD8;
}
#news ul{
	position:relative;
	width:780px;
	max-width:100%;
	margin:0 auto;
	list-style:none;
	}
	#news ul li{
		position:relative;
		width:100%;
		margin:0 0 10px;
		line-height:1.5;
		}
		#news ul li:last-child{
			margin:0 0 0px;
		}
		#news ul li .date{
			display:block;
			position:relative;
		}
		#news ul li p{
			width:100%;
			margin:0px !important;
		}
		#news ul li a{
			text-decoration:underline;
			color:#006CD8;
		}
		#news ul li a:hover{
			text-decoration:none;
		}
		#news ul li *{
			font-weight:bold;
			font-size:0.87rem;
}

#news .more{
	position:absolute;
	top:15px;
	right:20px;
	text-align:right;
	text-decoration:none;
	}
	#news .more a{
		position:relative;
		padding-right:30px;
		text-decoration:none;
		font-weight:bold;
		font-size:1.0rem;
		color:#006CD8;
	}
	#news .more a::after{
		content:" ";
		position:absolute;
		top:4px;
		right:0px;
		border:8px solid transparent;
		border-left:13px solid #7EB4EA;
		transition-duration:0.5s;
	}
	#news .more a:hover::after{
		border-left:13px solid #006CD8;
}


/* --- responsive --- */
@media screen and (max-width:767px){
	#news{
		padding:15px 20px 20px;
	}
	#news ul li{
		padding-bottom:10px;
		border-bottom:1px dotted #006CD8;
		}
		#news ul li:last-child{
			padding-bottom:0px;
			border-bottom:none;
		}
		#news ul li *{
			font-size:0.77rem;
}
	#news .more{
		right:0px;
		}
		#news .more a{
			padding-right:25px;
			font-size:0.84rem;
	}
}