@charset "utf-8";

.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.41%;
	background-image: url("../img/net/main.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* net */
#net{
	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;
}
#net h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 6%;
	background-image: url("../img/net/ttl_net.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#net h4{
	position: relative;
	margin: 8% 0;
	width: 100%;
	height:0;
	padding-top: 14%;
	background-image: url("../img/net/net.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#net .movie{
	position: relative;
	margin: 8% auto;
	width: 100%;
	padding-top: 56.25%;
	background-color: #444444;
}
#net .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* netnav */
#netnav, #netnav_b{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-color: rgba(65,135,199,.5);
}
#netnav_b{
	background-color: #ffffff;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#netnav ul, #netnav_b ul{position: relative;margin: auto;}
#netnav ul li, #netnav_b ul li{position: relative;margin: 4% auto;}
#netnav ul li.sub, #netnav_b ul li.sub{
	width: 80%;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* net */
	#net{padding-top: 0;margin: 0 auto 120px auto;background-image: none;}
	#net .contents-inner{
		margin: 0 auto;
		padding-top: 60px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#net h2{
		margin: 0 0 30px 20px;
		width: 520px;
		padding-top: 33px;
		background-size: contain;
	}
	#net h4{
		margin: 70px 0 70px 40px;
		width: 550px;
		padding-top: 90px;
		background-size: contain;
	}
	#net .movie{
		margin: 0 auto;
		width: 640px;
		padding-top: 360px;
	}

	/* netnav */
	#netnav{padding-top: 50px;}
	#netnav_b{padding: 80px 0 60px 0;}
	#netnav ul, #netnav_b ul{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
	}
	#netnav ul li, #netnav_b ul li{margin: 0 0 50px 0 !important; width: 455px;}
	#netnav ul li.sub, #netnav_b ul li.sub{width: 300px;}

}