/* ========== css/service.css ========== */
/*----------------------------------------------------------------------------*/
/* 	七福電気ドットコム株式会社サイト  サービス page	 				  CSS    */
/*----------------------------------------------------------------------------*/

/* ■ MainConents #section01  */

	#section01 {
		margin: 20px auto 0 auto;
		width: 100%;
		padding-bottom:20px;
		background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
	}
	#section01 h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#sec01 {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	#section01 #sec01>h2 {
		display:block;
		margin: 20px auto 20px auto;
		width: 100%;
		font-size:17px;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color: #444;
		padding-left:30px;
	}
	#section01 #sec01title01 {
		margin: 0 auto 0 auto;
		width: 90%;
	}
	#sec01 #sec01cont {
		margin: 10px auto 0 5%;
		width: 90%;
		padding-bottom:0px;
		background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
		position: relative;
		border: solid 1px #DDD;
			border-radius:5px;  
			-moz-border-radius:5px;  
			-webkit-border-radius:5px;  
	}
	#sysdev {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}
	#itinfra {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}
	#helpsup {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}
	#kitting {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}
	#syseng {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}

	#sec01 dl,dt,dd {
		display:block;
	}
	.cont01 {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-bottom:20px;
	}
	.cont0101 {
		margin: 20px auto 10px auto;
		width: 100%;
		font-size:12px;
		line-height:18px;
		font-family: "Noto Sans JP";
		font-weight: 400;
		color:#444;
		padding-bottom:10px;
	}
	.cont0101  h2 {
		display:block;
		margin: 0 auto 0 auto;
		width: 100%;
		font-size:15px;
		font-weight:bold;
		color: #519D9E;		/* WA-green */
		padding-top:0px;
		padding-left:0px;
	}
	.cont0101  h3 {
		display:block;
		margin: 10px auto 10px auto;
		width: 100%;
		font-size:13px;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color: #555;
		padding-top:0px;
		padding-left:0px;
	}
	.cont0101 .svimg {
		display:block;
		float:right;
		width:170px;
		padding:0px;
		padding-right:0px;
		padding-left:10px;
		padding-bottom:10px;
		zoom:0.6;
	}
	.cont0101 .svimg img {
		display:block;
		padding:0;
		zoom:0.5;
		border: solid 1px #BDC3C7;		/* Siver */
	}
	.cont01 dl {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	.cont01 dt {
		margin: 0 auto 0 auto;
		font-size:14px;
		font-weight:bold;
		color:#444;
		color: #519D9E;		/* WA-green */
		padding-bottom:10px;
	}
	.cont01 dd {
		margin: 0 auto 0 auto;
		font-size:12px;
		line-height:18px;
		font-weight:normal;
		color:#333;
		padding-bottom:20px;
	}
	.cont01 dd ul {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-bottom:20px;
	}
	.cont01 dd li {
	}
	.cont01 dd ul.li04 li {
		margin: 0 auto 0 auto;
		width:90%;
	}
	.cont01 dd ul.li04 li img {
		display:block;
		margin: 0 auto 20px auto;
		zoom:0.6;
	}
	.cont01 dd ul.li02 li {
		margin: 0 auto 0 auto;
		width:100%;
	}
	.cont01 dd ul.li02 li img {
		display:block;
		margin: 0 auto 30px auto;
		zoom:0.7;
	}
	.cont01 dd  img.svimg02 {
		display:block;
		margin: 0 auto 0 auto;
		zoom:0.42;
	}
	.cont01 .detail-btn {
		display:block;
		margin: 0px auto 10px 17.5%;
		width: 200px;
		height:40px;
	}

	@media only screen and  (max-width: 360px) {

	}

	@media only screen and (min-width:768px) {

		#section01 {
			margin: 20px auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background:linear-gradient(90deg,white 0%,white 10%,#F5F5F5 10%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec01 {
			margin: 0 auto 0 12%;
			width: 80%;
			margin: 0 auto 0 auto;
			width: 100%;
			padding-bottom:50px;
			background-image:
				none,
				none; /* ← 存在しないファイル。宣言を消すと隠れていた背景が出てしまうため none に置換（404回避のみ） */
			background-size:
				:contain,
				:contain;
			background-position:
				center top 4%,
				center bottom 10%;
			background-repeat:
				no-repeat,
				no-repeat;
			position:relative;
		}
		#section01 #sec01>h2 {
			display:block;
			margin: 50px auto 0 auto;
			width: 80%;
			font-size:36px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:3px;
			padding-left:150px;
		}
		#sec01 #sec01cont {
			margin: 50px auto 30px 15%;
			width: 72.5%;
			padding-bottom:0;
			background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過98% */
				border-radius:10px;  
				-moz-border-radius:10px;  
				-webkit-border-radius:10px;  
			position: relative;
		}
		#sysdev {		/* □ 固定ヘッダ アンカー位置差分変更 */
			margin-top:-80px;
			padding-top:80px;
		}
		#itinfra {		/* □ 固定ヘッダ アンカー位置差分変更 */
			margin-top:-80px;
			padding-top:80px;
		}
		#helpsup {		/* □ 固定ヘッダ アンカー位置差分変更 */
			margin-top:-80px;
			padding-top:80px;
		}
		#kitting {		/* □ 固定ヘッダ アンカー位置差分変更 */
			margin-top:-80px;
			padding-top:80px;
		}
		#syseng {		/* □ 固定ヘッダ アンカー位置差分変更 */
			margin-top:-80px;
			padding-top:80px;
		}
		.cont01 {
			margin: 10px auto 0 auto;
			width: 82%;
			padding-bottom:50px;
		}
		.cont0101 {
			margin: 40px auto 0 auto;
			width: 100%;
			font-size:15px;
			line-height:24px;
			font-family: "Noto Sans JP";
			font-weight: 400;
			color:#444;
			padding-bottom:0px;
		}
		.cont0101 h2 {
			display:block;
			margin: 0px auto 0 auto;
			width: 100%;
			font-size:34px;
			text-align:left;
			font-family: "Noto Sans JP";
			font-weight: 700;
			color: #519D9E;		/* WA-green */
			padding-top:0px;
			padding-left:0px;
		}
		.cont0101 h3 {
			display:block;
			margin: 20px auto 20px auto;
			width: 100%;
			font-size:20px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			color: #555;
			padding-top:0px;
			padding-left:0px;
		}
		.cont0101 .svimg {
			float:right;
			width:340px;
			padding:40px;
			padding-top:0px;
			padding-right:0px;
			padding-bottom:20px;
			zoom:1.0;
		}
		.cont0101 .svimg img {
			display:block;
			padding:0;
			zoom:1.0;
		}
		.cont01 dl {
			margin: 20px auto 0 auto;
			width: 94%;
		}
		.cont01 dt {
			margin: 0 auto 0 auto;
			font-size:18px;
			font-family: "Noto Sans JP";
			font-weight: 500;
			color:#444;
			color: #519D9E;		/* WA-green */
			padding-bottom:20px;
		}
		.cont01 dd {
			margin: 0 auto 0 auto;
			font-size:14px;
			line-height:22px;
			font-family: "Noto Sans JP";
			font-weight: 400;
			color:#444;
			padding-bottom:20px;
		}
		.cont01 dd ul {
			margin: 0 auto 0 7.5%;
			width: 90%;
			padding-bottom:30px;
		}
		.cont01 dd li {
			float:left;
		}
		.cont01 dd ul.li04 li {
			margin: 0 auto 0 auto;
			float:left;
			width:25%;
		}
		.cont01 dd ul.li04 img {
			display:block;
			margin: 0 auto 0 auto;
			padding-right:30px;
			width:100%;
			zoom:1.0;
		}
		.cont01 dd ul.li02 li {
			margin: 0 auto 0 -15px;
			float:left;
			width:50%;
		}
		.cont01 dd ul.li02 img {
			display:block;
			margin: 0 auto 0 auto;
			width:80%;
			zoom:1.0;
		}
		.cont01 dd  img.svimg02 {
			display:block;
			margin: 0 auto 0 auto;
			zoom:1.0;
		}
		.cont01 .detail-btn {
			display:block;
			margin: 25px auto 0 35%;
			margin: 10px auto 0 35%;
			width: 230px;
			height:50px;
		}
	}

	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#section01 {
			margin: -50px auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec01 {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-bottom:30px;
			position:relative;
		}
		#section01 #sec01>h2 {
			display:block;
			margin: 30px auto 10px auto;
			width: 100%;
			font-size:22px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:5px;
			color: #519D9E;		/* WA-green */
			padding-left:135px;
		}
		#sec01 #sec01cont {
			margin: 10px auto 20px 2.5%;
			width: 95%;
			padding-bottom:0px;
			box-sizing: border-box;
			display: inline-block;
			position: relative;
		}
		.cont0101 h2 {
			font-size:22px;
		}
		.cont0101 h3 {
			font-size:15px;
		}

	}