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

/*

紺　#182548  rgba(24,37,72,0.5)
オレンジ #FFA500　rgba(255,165,0,0.5)

*/

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

#wrapper{
	padding-top:470px;
}
/* --- responsive --- */
@media(max-width:767px){
	#wrapper{
		padding-top:15%;
	}
}


/* -----------------------------------------------------------------
   pickup
----------------------------------------------------------------- */

#pickup{}

#pickup ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
}
#pickup ul li{
	width:312px;
	max-width:32%;
	font-size:0.87rem;
	line-height:1.4;
	border:1px solid rgba(24,37,72,0.2);
	transition-duration:0.5s;
	overflow:hidden;
	}
	#pickup ul li:hover{
		-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);
	}
	#pickup ul li a{
		font-size:inherit;
		color:#000;
	}
	#pickup ul li p{
		height:100%;
		padding:5px 10px 10px;
		border-left:5px solid #FFA500;
}
/* --- responsive --- */
@media(max-width:767px){
	#pickup ul li{
		max-width:100%;
		margin:0 auto 15px;
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	background:rgba(24,37,72,0.1);
}
#news .contents{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
}
#news h2{
	position:relative;
	width:200px;
	min-height:160px;
	padding:30px 10px;
	font-size:1.00rem;
	font-weight:bold;
	text-align:center;
	background:rgba(255,255,255,1);
	}
	#news h2:after{
		content:" ";
		position:absolute;
		top:2px;
		left:2px;
		width:calc(100% - 6px);
		height:calc(100% - 6px);
		border:1px solid rgba(24,37,72,0.3);
	}
	#news h2 span{
		display:block;
		margin:5px 0 0 0;
		font-size:1.2rem;
		color:#FFA500;
}

#news_list{
	position:relative;
	width:calc(100% - 220px);
	list-style:none;
}
#news_list li{
	position:relative;
	width:100%;
	margin:0px !important;
	padding:7px 0 7px 100px;
	font-size:0.84rem;
	border-bottom:1px dotted rgba(24,37,72,0.5);
	}
	#news_list li span.date{
		position:absolute;
		top:5px;
		left:5px;
		width:90px;
		font-size:0.87rem;
		z-index:0;
	}
	#news_list li a{
		display:block;
		margin:-7px 0 -7px -100px;
		padding:7px 0 7px 100px;
		font-size:inherit;
		z-index:1;
		color:#000;
		transition-duration:0.5s;
	}
	#news_list li a:hover{
		background:rgba(24,37,72,0.1);
}

#news_list_link{
	position:absolute;
	top:100px;
	left:0px;
	width:200px;
	text-align:center;
	}
	#news_list_link a{
		display:inline-block;
		position:relative;
		margin:0 auto;
		padding:2px 15px 2px 25px;
		font-weight:normal;
		font-size:0.77rem;
		text-decoration:none;
		border:1px solid rgba(0,0,0,0.2);
		background:rgba(255,255,255,1);
		color:#000;
		line-height:1.5;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}
	#news_list_link a:before{
		content:" ";
		position:absolute;
		top:5px;
		left:10px;
		border: 6px solid transparent;
		border-left: 6px solid rgba(0,0,0,0.5);
}

/* --- responsive --- */
@media(max-width:767px){
	#news h2{
		width:100%;
		min-height:0px;
		padding:10px 10px;
	}
	#news_list{
		width:100%;
	}
	#news_list li span.date{
		display:block;
		position:relative;
		top:0px;
		left:0px;
		width:100%;
		margin:5px 0;
		}
		#news_list li a{
			padding:5px 0 0px 0px;
	}

	#news_list_link{
		position:relative;
		top:0px;
		left:0px;
		width:100%;
		padding-top:20px;
	}
}

/* -----------------------------------------------------------------
   info_banner
----------------------------------------------------------------- */

#info_banner{
	width:1040px;
	max-width:100%;
	margin:0 auto;
	padding:20px;
	text-align:center;
}
#info_banner p{
	margin-bottom:25px;
}
#info_banner .lr_set{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
}
#info_banner .lr_set a{
	display:inline-block;
	padding:10px;
	background:rgba(24,37,72,0.1);
	transition-duration:0.5s;
}
#info_banner .lr_set a:hover{
	background:rgba(24,37,72,0.3);
}

/* --- responsive --- */
@media(max-width:767px){
	#info_banner p{
		margin-bottom:15px;
	}
	#info_banner .lr_set a{
		padding:0px;
	}
}