@charset "utf-8";

/* mainvisual */
#mainvisual{
	position: relative;
	margin: 0 auto;
	width: 100%;
	font-weight: bold;
}
#mainvisual .title{
	position: relative;
	margin-top: 0;
	text-align: left;
	background-color: rgba(65,135,199,.8);
	padding: 10px;
	color: #ffffff;
}
#mainvisual h2{font-size: .20rem;}
#mainvisual p{font-size: .12rem;}




/* 70年史 */
#seventy{
	position: relative;
	margin: 4% auto;
}
#seventy .contents-inner{
	padding: 1% 0;
}



/* ニュース */
#news{
	position: relative;
	margin: 4% auto;
}
#news .contents-inner{
	padding: 1% 0;
	border-top: solid 1px #4187c7;
	border-bottom: solid 1px #4187c7;
}
#news h2{
	position: relative;
	margin: 4% auto;
	width: 100%;
	height:0;
	padding-top: 18%;
	background-image: url("../img/top/ttl_news.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 50%;
}
#news ul.newsList{
	position: relative;
	margin: 0 auto;
	width: 96%;

}
#news ul.newsList li{border-bottom: solid 1px #d9d9d9; padding: .5em 0; text-align: left;}
#news ul.newsList li:last-child{border-bottom: none;}
#news ul.newsList li span{display: inline-block;}
#news ul.newsList li a{ display: block; text-decoration: none; color: #4187c7;}

.new {
	color: #ff0000;
	font-weight: bold;
}
/* repair */
#repair{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/top/repair_bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #4187c7;
}
#repair h2{
	position: relative;
	margin: 0 auto 5% auto;
	display: block;
	width: 100%;
	height:0;
	padding-top: 7%;
	background-image: url("../img/top/ttl_repair.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#repair h3{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
	height:0;
	padding-top: 24%;
	background-image: url("../img/top/repair01.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#repair a.tel img{
	position: relative;
	margin: 4% 0;
	display: block;
	width: 64%;
}
#repair .repairTxt{
	position: relative;
	margin: 0;
	display: block;
	width: 66%;
	height:0;
	padding-top: 32%;
	background-image: url("../img/top/repair02.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#repair .movie{
	position: relative;
	margin: 8% auto;
	width: 100%;
	padding-top: 56.25%;
	background-color: #444444;
}
#repair .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}



/* net */
#net{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/top/net_bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #ffffff;
}
#net h2{
	position: relative;
	margin: 0 auto 5% auto;
	display: block;
	width: 100%;
	height:0;
	padding-top: 17%;
	background-image: url("../img/top/ttl_net.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#net p.Txt{
	position: relative;
	margin: 12% 0 24% 0;
	color: #2767a7;
	text-align: left;
	font-weight: bold;
	width: 60%;
}
#net .btn{margin: 4% 0 12% 0;}


/* list */
#list{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #ffffff;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#list h2{
	position: relative;
	margin: 0 auto 5% auto;
	display: block;
	width: 100%;
	height:0;
	padding-top: 8%;
	background-image: url("../img/top/ttl_list.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#list p{
	position: relative;
	margin: 10% 0;
	color: #434343;
	text-align: left;
	font-weight: bold;
}
#list .search{
	position: relative;
	margin: 0 auto 5% auto;
	display: block;
	width: 100%;
	height:0;
	padding-top: 22%;
	background-image: url("../img/top/list.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#list .arealist ul{
	position: relative;
	margin: 8% auto;
	border-bottom: solid 1px #4187c7;
}
#list .arealist ul li{
	position: relative;
	border-top: solid 1px #4187c7;
	padding: .5em 0;
}
#list .arealist ul li a{color: #4187c7;}
#list .arealist ul li:hover > a {color: #ff9933 !important;}
#list .arealist ul li a span{font-size: .12rem;}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* 共通 */
	.leftBox, .rightBox{
		position: relative;
		width: 49%;
		display: inline-block;
		vertical-align: middle;
	}
	
	/* mainvisual */
	#mainvisual .title{
		position: absolute;
		bottom: 20px;
		left: 4%;
		margin-top: 0;
	}
	#mainvisual h2{margin-bottom: 10px;}
	
	/* 70年史 */
#seventy{
	margin: 30px auto;
	padding: 30px 0;
}

#seventy .seventymovie {
	margin: auto 1%;
	float: left;
}
	
	
	/* ニュース */
	#news{
		margin: 30px auto;
		padding: 30px 0;
	}
	#news h2{
		margin: 0 40px 0 20px;
		width: 140px;
		padding-top: 72px;
		display: inline-block;
		vertical-align: middle;
	}
	#news ul.newsList{
		position: relative;
		margin: 0 auto;
		width: 740px;
		display: inline-block;
		vertical-align: middle;

	}
	#news ul.newsList li{border-bottom: solid 1px #d9d9d9; padding: .5em 0; text-align: left;}
	#news ul.newsList li:last-child{border-bottom: none;}
	#news ul.newsList li span{display: inline-block; padding-right: 20px;}
	#news ul.newsList li a{ display: inline-block; text-decoration: none; color: #4187c7;}


	/* repair */
	#repair{padding-top: 0; background-image: none;}
	#repair .contents-inner{
		padding-top: 30px;
		background-image: url("../img/top/repair_bg.jpg");
		background-size: 508px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#repair h2{
		margin: 0 0 20px 20px;
		width: 212px;
		padding-top: 34px;
	}
	#repair h3{
		margin: 0 0 10px 20px;
		width: 293px;
		padding-top: 120px;
	}
	#repair p.tel img{
		margin: 0 0 10px 20px;
		display: block;
		width: 300px;
	}
	#repair .repairTxt{
		margin: 0 0 10px 20px;
		width: 300px;
		padding-top: 96px;
	}
	#repair .movie{
		margin: 0 0 0 40px;
		width: 400px;
		padding-top: 256px;
		/*padding-top: 256px;*/
	}
	#repair .movietest{
		margin: 0 0 0 40px;
		width: 400px;
		padding-top: 5px;
	}


	/* net */
	#net{padding-top: 0;background-image: none;}
	#net .contents-inner{
		padding-top: 30px;
		background-image: url("../img/top/net_bg.jpg");
		background-size: 508px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#net h2{
		margin: 0 0 20px 20px;
		width: 249px;
		padding-top: 87px;
	}
	#net p.Txt{margin: 60px 0 170px 20px;font-size: .18rem; line-height: 2.111em;}
	#net .btn{margin: 0 0 40px 60px;}
	#net .movie{
		margin: 0 0 0 40px;
		width: 456px;
		padding-top: 50px;
	}
	#net .rightBox img{
		margin: 0 0 0 40px;
		width: 456px;
	}

	/* list */
	#list{
		padding-top: 0;
		background-image: none;
		box-shadow: none;
	}
	#list .shadow{
		position: relative;
		margin: 0 auto;
		height: 10px;
		box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
		z-index: 10;
	}
	#list .contents-inner{
		margin: -10px auto 0 auto;
		padding-top: 30px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#list h2{
		margin: 70px 0 40px 20px;
		width: 340px;
		padding-top: 40px;
	}
	#list p{margin: 0 0 0 30px; line-height: 1.750em; font-size: .16rem;}
	#list .search{
		margin: 20px 0 0 70px;
		width: 218px;
		padding-top: 90px;
	}
	#list .map{
		position: relative;
		margin: 0 0 150px 50px;
		display: inline-block;
		width: 610px;
	}
	
	#list .arealist{
		position: relative;
		margin: 0 0 0 50px;
		display: inline-block;
		width: 240px;
	}
	#list .arealist ul{margin: 0 auto;}
	#list .arealist ul li{
		background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(255,153,51,1) 50%) !important;
		background-position: 0 0;
		background-size: 200% auto;
		transition: all 0.16s ease-out;
		display: block;
	}
	#list .arealist ul li:hover{
		cursor: pointer;
		background-position: -100% 0;
		opacity: 1;
	}
	#list .arealist ul li:hover >a{color: #ffffff !important; opacity: 1;}

}