@charset "utf-8";

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

/* 共通 */
#network h4, #system h4, #restore h4, #else h4{
	position: relative;
	margin: 8% auto;
	padding-bottom: 6%;
	color: #4187c7;
	font-size: .18rem;
	line-height: 1.8em;
	font-weight: bold;
	border-bottom: solid 2px #4187c7;
}
#network h4{color:#ffffff !important; border-bottom: solid 2px #ffffff !important;}

ul.act{ counter-reset: number 0;}
ul.act li{
	position: relative;
	margin-bottom: 4%;
	padding: 2% 2% 2% 2em;
	text-indent: -2em;
}
ul.act li:before{
	position: relative;
	counter-increment: number 1;
	content: '(' counter(number) ') ';
}

/* network */
#network{
	position: relative;
	margin: 0 auto;
	padding: 8% 0 0 0;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#network h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 6%;
	background-image: url("../img/net/network/ttl_network.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#network .contents{
	position: relative;
	margin: 8% auto 0 auto;
	padding-bottom: 2%;
	background-color: #4187c7;
	color: #ffffff;
	text-align: left;
}
#network h3{
	position: relative;
	margin: 0 auto;
	padding: 6% 0;
	width: 90%;
	font-size: .20rem;
	font-weight: bold;
}
#network .Box{
	position: relative;
	margin: 4% auto 12% auto;
	width: 90%;
}
#network .caution{
	position: relative;
	margin: 4% auto 12% auto;
	padding: 5%;
	width: 80%;
	border: solid 4px #ffff33;
}
#network .caution h5{
	position: relative;
	margin: 0 auto 8% auto;
	text-align: center;
	font-size: .18rem;	
	font-weight: bold;
}

/* system */
#system{
	position: relative;
	margin: 0 auto;
	padding: 0 0 8% 0;
	background-color: #ccdff0;
	color: #414142;
}
#system .bg{
	position: absolute;
	top:-400px;
	left: 0;
	width: 100%;
	padding-top: 120%;
	background-color: #ccdff0;
	z-index: -1
}
#system .contents-inner{
	margin: 0 auto;
	padding: 8% 5%;
	width: 80%;
	background-color: #ffffff;
}
#system ul{
	position: relative;
	margin: 0 auto;
	width: 90%;
	text-align: left;
}
#system p{
	position: relative;
	margin: 0 auto 12% auto;
	width: 90%;
	text-align: left;
}
#system p.attention{margin: 12% auto 0 auto;}
#system img{width: 90%;}

/* restore */
#restore{
	position: relative;
	margin: 0 auto;
	padding: 8% 0;
	background-color: rgba(65,135,199,.03);
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
	color: #414142;
}
#restore .contents-inner{width: 80%;}
#restore ul{
	position: relative;
	margin: 0 auto;
	width: 90%;
	text-align: left;
}
#restore p.attention{
	position: relative;
	margin: 12% auto;
	width: 90%;
	text-align: left;
}
#restore ul.team{
	position: relative;
	margin: 0 auto;
	width: 90%;
}
#restore ul.team li{
	position: relative;
	text-align: center;
	padding: 3% 0;
	background-color: #82b0da;
	color: #ffffff;
	font-weight: bold;
	font-size: .18rem;
}
#restore ul.team li:nth-child(odd){background-color: #4187c7;}
#restore ul.team li p span{
	position: relative;
	display: inline-block;
	width: 30%;
	text-align: center;
	font-weight: normal;
	font-size: .14rem;
	white-space: nowrap;
}

/* else */
#else{
	position: relative;
	margin: 0 auto 8% auto;
	padding: 8% 0;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
	color: #414142;
}
#else .contents-inner{width: 80%;}
#else .contents-inner p{
	position: relative;
	margin: auto;
	width: 90%;
	text-align: left;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* 共通 */
	#network h4, #system h4, #restore h4, #else h4{
		margin: 35px auto;
		padding-bottom: 50px;
	}
	ul.act{width: 630px !important;}
	ul.act li{margin-bottom: 10px !important;padding: 0 0 0 2em;}

	/* network */
	#network{padding: 0;margin: 0 auto;background-image: none;}
	#network .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;
	}
	#network h2{
		margin: 0 0 30px 20px;
		width: 592px;
		padding-top: 35px;
		background-size: contain;
	}
	#network .contents{
		margin: 70px auto 0 auto;
		padding-bottom: 60px;
		width: 940px;
	}
	#network h3{
		padding: 50px 0;
		width: 800px;
		font-size: .24rem;
	}
	#network .Box{
		margin: 35px auto 95px auto;
		width: 800px;
	}
	#network .Box p{width: 375px;}
	#network .BoxImg{
		position: absolute;
		top:280px;
		right: -20px;
		width: 470px;
		height: 402px;
		z-index: 1;
	}
	#network .caution{
		margin: 50px auto;
		padding: 50px;
		width: 650px;
	}
	#network .caution h5{
		margin: 0 auto 40px auto;
		font-size: .16rem;	
	}
	#network .caution p{width: 100% !important;}

	/* system */
	#system{padding: 0 0 70px 0;}
	#system .bg{
		top:-520px;
		padding-top: 800px;
	}
	#system .contents-inner{
		padding: 60px 70px;
		width: 800px !important;
	}
	#system ul{width: 800px;}
	#system p{
		margin: 0 auto 90px auto;
		width: 630px;
	}
	#system p.attention{margin: 40px auto 0 auto;}
	#system img{width: 740px;}

	/* restore */
	#restore{padding: 60px 0;}
	#restore .contents-inner{width: 800px !important;}
	#restore p.attention{
		margin: 50px auto;
		width: 630px;
	}
	#restore ul.team{margin: 60px auto 0 auto !important; width: 800px;}
	#restore ul.team li{padding: .6em 0;}
	#restore ul.team li p span{width: 200px;}

	/* else */
	#else{
		margin: 0 auto 100px auto;
		padding: 80px 0;
	}
	#else .contents-inner{width: 800px !important;}
	#else .contents-inner p{width: 630px; margin: auto;}
	
}