@charset "utf-8";

/*
* top.css
* date---2017/10/27
*/

/*===============================================
	top.css
	===============================================*/

/* layout
------------------------------- */
.content{
	clear: both;
	width: 100%;
}
/*@media screen and (max-width:980px) and (min-width:768px){
	.content{
		padding: 0 15px;
	}
	}*/
	.content:after {
		content:" ";
		display:block;
		clear:both;
	}

/* hero
------------------------------- */
#hero {
	position: relative;
	width: 100%;
	margin-top: 90px;
}
#hero_img{
	height: 580px;
	background-image: url(img/main.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
#hero_txt{
	position: absolute;
	right: 0;
	bottom: 0;
	border-top: 10px solid rgba(255,255,255,0.5);
	border-left: 10px solid rgba(255,255,255,0.5);
}
#hero_txt div{
	padding: 50px 60px;
	background-color: rgba(255,255,255,0.9);
}
#hero_txt h1{
	margin-bottom: 10px;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.4;
}
#hero_txt p{
	margin-bottom: 0;
	font-size: 125%;
	font-weight: bold;
}
#hero_txt .copy{
	padding: 8px 20px 8px 20px;
	color: #00A0E9;
	border-left: 2px solid #00A0E9;
	line-height: 1.6;
}
@media screen and (max-width:1600px) and (min-width:1201px){
	#hero_img{
		background-position: 50% top;
	}
	#hero_txt div{
		padding: 40px;
	}
	#hero_txt h1{
		font-size: 42px;
	}
}
@media screen and (max-width:1200px) and (min-width:980px){
	#hero_img{
		background-position: 25% top;
	}
	#hero_txt div{
		padding: 30px 40px;
	}
	#hero_txt h1{
		font-size: 40px;
	}
}
/*@media screen and (max-width:979px) and (min-width:768px){
	#hero {
		margin-top: 60px;
	}
	#hero_img{
		height: 580px;
		background-position: 20% top;
	}
	#hero_txt div{
		padding: 30px;
	}
	#hero_txt h1{
		font-size: 36px;
	}
}
@media screen and (max-width:767px){
	#hero {
		width: 100%;
		margin-top: 60px;
	}
	#hero_img{
		height: auto;
		padding-top: 50%;
		background-position: left top;
	}
	#hero_txt{
		clear: both;
		position: static;
		right: auto;
		top: auto;
		width: 100%;
		margin-top: 0;
	}
	#hero_txt div{
		width: 100%;
		padding: 10px;
	}
	#hero_txt h1{
		font-size: 22px;
	}
	#hero_txt .copy{
		padding: 10px 0 10px 10px;
	}
	}*/


/* pickup_link
------------------------------- */
#pickup_link{
	padding: 30px 0;
	background-color: #F5F5F5;
}
/*@media screen and (max-width:767px){
	#pickup_link{
		padding: 10px 0 0;
	}
	}*/
	.ul_pickup4w{
		width: 980px;
		margin: 0 auto;
		list-style: none;
	}
	.ul_pickup4w li{
		float: left;
		display: inline;
		width: 237px;
		height: 90px;
		margin-left: 10px;
	}
	.ul_pickup4w li:first-child{
		margin-left: 0;
	}
	.ul_pickup4w li a{
		position: relative;
		display: block;
		width: 100%;
		height: 90px;
		padding: 0;
		background-color: #FFF;
		border: 1px solid #00A1E9;
		color: #00A1E9;
		font-size: 125%; /* 22px*/
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.05em;
		line-height: 88px;
		transition: all .3s;
	}
	.ul_pickup4w li.li2 a{
		padding: 16px 0;
		line-height: 28px;
	}
	.ul_pickup4w li a:after{
		position: absolute;
		top: 50%;
		right: 10px;
		content: '';
		margin-top: -4px;
		width: 8px;
		height: 8px;
		border-top: 1px solid #00A1E9;
		border-right: 1px solid #00A1E9;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transition: all .3s;
	}
	.ul_pickup4w li a:hover::after {
		right: 5px;
		border-top: 1px solid #FFF;
		border-right: 1px solid #FFF;
	}
	.ul_pickup4w li a:hover{
		background-color: #00A1E9;
		color: #FFF;
		text-decoration: none;
	}
/*@media screen and (max-width:979px){
	.ul_pickup4w{
		width: auto;
		margin: 0 10px;
	}
	.ul_pickup4w li{
		float: left;
		display: inline;
		width: 50%;
		height: 50px;
		margin-left: 0;
		margin-bottom: 10px;
		padding: 0 5px;
	}
	.ul_pickup4w li a,
	.ul_pickup4w li.li2 a{
		height: 50px;
		font-size: 14px;
		letter-spacing: 0;
		line-height: 48px;
	}
	.ul_pickup4w li.li2 a{
		padding: 6px 0;
		line-height: 18px;
	}
	}*/

/* pickup_contents
------------------------------- */
#pickup_contents{
	padding: 79px 0 80px;
	background: url(img/bg_pickup.png);
	border-top: 1px solid #FFF;
}
/*@media screen and (max-width:767px){
	#pickup_contents{
		padding: 9px 0 0;
	}
	}*/
	.ul_pickup2w{
		width: 980px;
		margin: 0 auto;
		list-style: none;
	}
	.ul_pickup2w li{
		float: left;
		display: inline;
		width: 470px;
		margin-left: 40px;
	}
	.ul_pickup2w li h2{
		height: 88px;
		font-size: 22px;
		line-height: 88px;
		border-top: 2px solid #00A1E9;
	}
	.ul_pickup2w li:first-child{
		margin-left: 0;
	}
	.ul_pickup2w li a{
		display: block;
		width: 100%;
		background-color: #FFF;
		color: #333;
		font-weight: bold;
		text-align: center;
	}
	.ul_pickup2w li a h2{
		position: relative;
		transition: all .3s;
	}
	.ul_pickup2w li a h2:after{
		position: absolute;
		top: 50%;
		right: 12px;
		content: '';
		margin-top: -6px;
		width: 12px;
		height: 12px;
		border-top: 2px solid #00A1E9;
		border-right: 2px solid #00A1E9;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transition: all .3s;
	}
	.ul_pickup2w li a:hover{
		background-color: #F5F5F5;
		color: #00A1E9;
		text-decoration: none;
	}
	.ul_pickup2w li a:hover h2:after {
		right: 7px;
	}
	.ul_pickup2w li a:hover img{
		filter: alpha(opacity=80);
		-ms-filter: alpha(opacity=80);
		opacity: 0.8;
		-moz-opacity: 0.8;
		-khtml-opacity: 0.8;
	}
/*@media screen and (max-width:979px){
	.ul_pickup2w{
		width: auto;
		margin: 0;
	}
	.ul_pickup2w li{
		width: 50%;
		margin-left: 0;
		padding: 0 15px;
	}
}
@media screen and (max-width:767px){
	.ul_pickup2w{
		width: auto;
		margin: 0;
	}
	.ul_pickup2w li{
		float: none;
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	.ul_pickup2w li h2{
		height: 48px;
		font-size: 15px;
		line-height: 48px;
		border-top: 2px solid #00A1E9;
	}
	.ul_pickup2w li:first-child{
		margin-left: 0;
	}
	}*/

/* bottom_contents
------------------------------- */
#news_cont{
	float: left;
	/*width: 470px;*/
	width: 100%;
	/*height: 500px;*/
	margin: 80px 0;
	padding: 0 40px;
}
#blog_cont{
	float: right;
	width: 470px;
	height: 500px;
	margin: 80px 0;
	padding: 0 40px;
}
/*@media screen and (max-width:979px) and (min-width:768px){
	#news_cont{
		width: 48%;
	}
	#blog_cont{
		width: 48%;
	}
}
@media screen and (max-width:767px){
	#news_cont,
	#blog_cont{
		float: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 15px;
	}
	#blog_cont.line_box{
		border-top: 0;
		border-bottom: 0;
	}
	}*/
	.line_box h2{
		padding: 15px 0;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		line-height: 1.4;
	}
	.line_box h2 span{
		display: block;
		padding-left: 1px;
		font-size: 30px;
		font-weight: 500;
		font-family: Arial, Helvetica, "sans-serif";
		letter-spacing: 1px;
	}
	.line_box .btn{
		width: 300px;
		margin: 0 auto;
	}
	.line_box .btn a{
		position: relative;
		display: block;
		width: 100%;
		padding: 15px;
		background-color: #FFF;
		border: 1px solid #00A1E9;
		color: #333;
		font-size: 100%;
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.05em;
		line-height: 1.5;
		transition: all .3s;
	}
	.line_box .btn a:after{
		position: absolute;
		top: 50%;
		right: 10px;
		content: '';
		margin-top: -4px;
		width: 8px;
		height: 8px;
		border-top: 1px solid #00A1E9;
		border-right: 1px solid #00A1E9;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transition: all .3s;
	}
	.line_box .btn a:hover::after {
		right: 5px;
		border-top: 1px solid #FFF;
		border-right: 1px solid #FFF;
	}
	.line_box .btn a:hover{
		background: #00A1E9;
		color: #FFF;
		text-decoration: none;
	}
/*@media only screen and (max-width: 767px) {
	.line_box .btn{
		width: 100%;
		margin-bottom: 20px;
	}
	}*/

	/* ニュースリスト */
	#ul_news_list{
		width: 100%;
		margin-bottom: 20px;
		border-top: 1px solid #DDD;
		*zoom: 1;
	}
	#ul_news_list li{
		clear: both;
		display: table;
		width: 100%;
		border-bottom: 1px solid #DDD;
		font-size: 14px;
	}
	#ul_news_list li .news_meta {
		display: table-cell;
		width: 90px;
		padding: 18px 0;
		text-align: center;
		line-height: 18px;
		vertical-align: middle;
	}
	#ul_news_list li .news_meta span{
		display: block;
		width: 90px;
		margin-top: 5px;
		color: #FFF;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		line-height: 18px;
	}
	#ul_news_list li .ic_topics{ background: #00A1E9;}
	#ul_news_list li .ic_info{ background: #00A896;}

	#ul_news_list li .news_ttl {
		display: table-cell;
		padding: 0 0 0 15px;
		line-height: 20px;
		vertical-align: middle;
	}
	#ul_news_list li a{
		display: block;
		text-decoration: none !important;
	}
	#ul_news_list li a:hover{
		background: #F5F5F5;
	}
	#ul_news_list li a .news_meta{ color: #666;}
	#ul_news_list li a .news_ttl{ color: #0059B2;}

/*@media screen and (max-width:967px){
	#ul_news_list{
		overflow: hidden;
		height: auto;
	}
	}*/

	/* ブログリスト */
	.blog{
		width: 100%;
		margin-bottom: 20px;
		border-top: 1px solid #DDD;
		*zoom: 1;
	}
	.blog li{
		clear: both;
		padding: 5px 0;
		border-bottom: 1px solid #DDD;
		font-size: 14px;
	}
	.blog li a{
		text-decoration: none !important;
	}
	.blog li a:hover{
		text-decoration: underline !important;
	}
/*@media screen and (max-width:967px){
	.blog{
		overflow: hidden;
		height: auto;
	}
}*/