@charset "utf-8";
/*--京maintenance.css--*/
/* ##########PC########## */

/*トップキャッチ画像*/
.top_chatch_box {
		background-position: center center;
		background-image:url(../../shared/support/bg_support.jpg);
		background-repeat: no-repeat;
		position: relative;
		height:330px;
		max-width:1820px;
		margin:0 auto;
}
.top_chatch_box1 {
		max-width:700px;
		font-size: 1.3em;
		line-height: 1.8;
		color: #333;
		margin-left:40%;
		padding-top:50px;
}

.top_chatch_box1 h2 {
		font-size: 1.5em;
		line-height: 2;
}

/*都市ガス・LPガスナビ*/
.gas_maintenance_nav{
	width: 750px;
	margin: 0 auto 5em auto;
}

.gas_maintenance_nav ul{
	display: flex;
	justify-content: space-between;
}

.gas_maintenance_nav ul li{
	width: 350px;
}

.gas_maintenance_nav ul li a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #ccc;
	box-shadow: 0 5px 3px -3px rgb(0 0 0 / 50%);
	color: #00197d;
	position: relative;
	z-index: 1;
	text-shadow: 2px 2px 0 rgb(0 0 0 / 30%);
	transition: .3s all ease;
	background: #ffffff;
	font-size: 1.3em;
	font-weight: bold;
}

.gas_maintenance_nav ul li.active a{
	background: #004284;
	color: #fff;
}

.gas_maintenance_nav ul li a:hover{
	background: #004284;
	color: #fff;
}

/*
.gas_maintenance_nav ul li a:before{
	content: "";
	display: block;
	width: calc(100% - 2px);
	height: 50%;
	position: absolute;
	bottom: 1px;
	left: 1px;
	z-index: -1;
	background: rgba(0,0,0,0.1);
	transition: .3s all ease;
}
*/


/*メンテナンスナビ*/
.nav_detail_box.maintenance{
	margin-bottom:60px;
}

	.nav_detail_box.maintenance > .box_header{
		text-align:center;
		margin-bottom:2em;
	}
	
	.nav_detail_box.maintenance > .box_inner{}
	
		.nav_detail_box.maintenance > .box_inner ul{
			display:flex;
			justify-content:center;
			line-height:1;
		}
		
			.nav_detail_box.maintenance > .box_inner ul li{
				width:173px;
				margin-right:10px;
			}
			
			.nav_detail_box.maintenance > .box_inner ul li:last-child{
				width:216px;
				margin-right:0;
			}

			/*
				.nav_detail_box.maintenance > .box_inner ul li a{
					display:block;
					border:1px solid #ccc;
					padding:15px 0;
					text-decoration:none;
					transition:.3s all ease;
				}
				
					.nav_detail_box.maintenance > .box_inner ul li a span{
						display:block;
						text-align:center;
					}
				
					.nav_detail_box.maintenance > .box_inner ul li a .lbl{
						margin:0.5em 10px 0 10px;
						border-top:1px solid #ccc;
						padding-top:0.7em;
						color:#00197d;
						transition:.3s all ease;
					}
					
				.nav_detail_box.maintenance > .box_inner ul li a:hover{
					border:1px solid #00197d;
				}
				
					.nav_detail_box.maintenance > .box_inner ul li a:hover .lbl{
						border-top:1px solid #00197d;
					}
					*/
				.nav_detail_box.maintenance > .box_inner ul li a{
					display:block;
					color:#222;
					text-decoration:none;
				}

				.nav_detail_box.maintenance > .box_inner ul li a .icon{
					display:flex;
					align-items:center;
					justify-content:center;
					height:140px;
					margin: 0 0 5px 0;
					background:#efefef;
					line-height:1;
					color:#006ef1;
					transition:.3s all ease;
				}

				.nav_detail_box.maintenance > .box_inner ul li a:hover .icon{
					background:#e6f0fc;
				}

				.nav_detail_box.maintenance > .box_inner ul li a .icon img{
					display:inline-block;
					transition:.5s all ease;
				}

				.nav_detail_box.maintenance > .box_inner ul li a:hover .icon img{
					display:inline-block;
					transform:rotateY(360deg);
				}

				.nav_detail_box.maintenance > .box_inner ul li a .lbl{
					display:block;
					text-align:center;
					font-weight:bold;
				}



/*各メンテナンス詳細共通部*/
.maintenance_detail_box{
	margin-bottom:80px;
}

	.maintenance_detail_box > .box_header{
		margin-bottom:2em;
	}
	
		.maintenance_detail_box > .box_header h4{
			color:#004e93;
			font-weight:bold;
			font-size:1.6em;
			line-height:1;
			background:#edf5fe;
			padding:0.8em 1em;
		}
		
	.maintenance_detail_box > .box_inner{
		padding:0 20px;
	}

		.maintenance_detail_box > .box_inner hr{
			border:none;
			border-top:1px solid #aaa;
			margin:3em auto;
		}
	
/*定期メンテナンス*/
.exp_other_box{
	padding:20px;
	margin-bottom:40px;
}

	.exp_other_box > .box_header{
		margin-bottom:1em;
	}
	
		.exp_other_box > .box_header h5{
			color:#004e93;
			font-size:1.2em;
			font-weight:bold;
			position:relative;
			line-height:1.4;
			padding-left:0.6em;
			border-left:6px solid #004e93;
		}
		
		/*
		.exp_other_box > .box_header h5:before{
			content:"";
			display:block;
			height:100%;
			width:6px;
			position:absolute;
			top:0;
			left:0;
			background:#004e93;
		}
		*/
	
	/*オーバーホール作業*/
	.exp_other_box > .box_inner{
		padding:0 20px;
	}
	
	.exp_other_box > .box_inner .before_after{
		display:flex;
		justify-content:space-between;
		margin:1.5em auto 0 auto;
		width:700px;
	}
	
		.exp_other_box > .box_inner .before_after li{
			width:calc((100% - 50px) / 2);
			margin-right:80px;
		}
		
		.exp_other_box > .box_inner .before_after li:last-child{
			margin-right:0;
		}
		
			.exp_other_box > .box_inner .before_after li dl dt{
				display:flex;
				line-height:1;
				align-items:center;
				margin-bottom:0.5em;
			}
			
			.exp_other_box > .box_inner .before_after li dl dt .lbl{
				margin-right:1em;
				width:5em;
				text-align:center;
				padding:0.4em 0 0.3em 0;
				color:#fff;
			}
			
			.exp_other_box > .box_inner .before_after li.before_overhaul dl dt .lbl{
				background:#c40026;
			}
			
			.exp_other_box > .box_inner .before_after li.after_overhaul dl dt .lbl{
				background:#003d84;
			}
			
			.exp_other_box > .box_inner .before_after li dl dd img{
				max-width:100%;
				height:auto;
			}
			
	/*メンテナンス項目*/
	.exp_other_box.maintenance_items{}
	
	.exp_other_box.maintenance_items > .box_inner{
		display:flex;
		line-height:1.4;
		padding:0 20px;
	}
	
		.exp_other_box.maintenance_items > .box_inner > ul{
			margin-top: 1.5em;
			display: flex;
			justify-content: center;
			line-height: 1;
		}
		
			.exp_other_box.maintenance_items > .box_inner > ul > li{
				width: 400px;
				height: 60px;
				margin-right: 30px;
			}

				.exp_other_box.maintenance_items > .box_inner > ul > li a{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					background: #ccc;
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid #ccc;
					background: #fff;
					box-shadow: 2px 2px 0 0 rgb(0 0 0 / 10%);
					position: relative;
					z-index: 1;
					color: #111;
					text-decoration: none;
				}

				.exp_other_box.maintenance_items > .box_inner > ul > li a:before{
					content: "";
					display: block;
					width: 100%;
					height: 50%;
					background: rgba(237,245,254,1);
					position: absolute;
					z-index: -1;
					bottom: 0;
					left: 0;

				}

					.exp_other_box.maintenance_items > .box_inner > ul > li a .lbl_main{
						display: block;
						padding: 0 0 0 30px;
						position: relative;
						line-height: 1.4em;
						font-weight: bold;
					}

					.exp_other_box.maintenance_items > .box_inner > ul > li a .lbl_main:before{
						font-family: FontAwesome;
						content: "\f1c1";
						color: #c40026;
						font-weight: normal;
						font-size: 1.5em;
						position: absolute;
						top: 8px;
						left: 0;
					}

					.exp_other_box.maintenance_items > .box_inner > ul > li a .lbl_main .lbl_sub{
						font-size: 0.85em;
						padding-top: 0.45em;
					}


			.exp_other_box.maintenance_items > .box_inner > ul > li:hover{
				transform:translate(1px,1px);
				box-shadow:none;
			}

		.exp_other_box.maintenance_items > .box_inner > ul.items1{
			width:40%;
		}
		
		.exp_other_box.maintenance_items > .box_inner > ul.items2{
			width:60%;
		}
		
		.exp_other_box.maintenance_items > .box_inner > ul.items2 ul{
			display:flex;
			flex-wrap:wrap;
		}
		
			.exp_other_box.maintenance_items > .box_inner > ul.items2 ul li{
				width:50%;
			}
			
/*バージョンアップ*/
.catalog_ver_box{
	display:flex;
	justify-content:center;
	margin:2em 0 3em 0;
}

	.catalog_ver_box dl{
		width:400px;
		box-sizing:border-box;
		border:1px solid #ccc;
		padding:15px;
	}
	
	.catalog_ver_box dl:first-child{
		margin-right:40px;
	}
	
		.catalog_ver_box dl dt{
			background:#ccc;
			text-align:center;
			background:#edf5fe;
			font-weight:bold;
			color:#333;
			margin-bottom:0.5em;
		}
		
		.catalog_ver_box dl dd ul{
			padding:0 1em;
			line-height:1.6;
		}
		
			.catalog_ver_box dl dd ul li{
				position:relative;
				padding-left:0.8em;
				margin-bottom:0.5em;
			}
			
			.catalog_ver_box dl dd ul li:last-child{
				margin-bottom:0;
			}
			
			.catalog_ver_box dl dd ul li:before{
				font-family: FontAwesome;
				content:"\f0da";
				position:absolute;
				left:0;
				top:0;
				color:#008740;
			}
			
			.catalog_ver_box dl dd ul li a{
				color:#004E93;
			}
			
	.fig_versionup{
		width: 630px;
		margin: 40px auto;
		border: 1px solid #ccc;
		padding: 15px;
		box-sizing: border-box;
	}
	
		.fig_versionup .slide_title{
			font-weight: bold;
			color: #004E93;
			font-size: 1.1em;
		}
		
	


/*メンテナンス申込へのリンク*/
.contact_box2 {
	width:800px;
	padding: 20px 30px;
	margin:0 auto 2em;
	background: #ececec;
	box-sizing:border-box;
}

	.contact_box2 > .box_header{
		line-height:1.8;
		margin-bottom:1em;
	}

	.contact_box2 > .box_inner{
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	
		.contact_box2 > .box_inner dl{
			display:flex;
			font-size:1.1em;
		}
		
			.contact_box2 > .box_inner dl dt{
				margin-right:1em;
			}
			
				.contact_box2 > .box_inner dl dt:before{
					font-family: FontAwesome;
					content:"\f0da";
					color:#004E93;
					margin-right:0.5em;
				}
			
			.contact_box2 > .box_inner dl dd{
				
			}
			
		.contact_box2 > .box_inner .contact_dl_sheet{}
		
			.contact_box2 > .box_inner .contact_dl_sheet a{
				color: #fff;
				font-size: 1.15em;
				text-decoration: none;
				display: inline-block;
				padding: 0.5em 2em;
				background:#004E93;
				transition:.3s all ease;
			}
			
			.contact_box2 > .box_inner .contact_dl_sheet a:hover{
				opacity:0.8;
			}



/* ##########SP########## */
@media screen and (max-width:479px) {

    .gas_maintenance_nav{
        width: auto;
        padding: 0 2vw;
        margin: 0 auto 3em auto;
    }

    .gas_maintenance_nav ul li{
        width: calc((100% - 3vw) / 2);
    }


	/*メンテナンスナビ*/
	.nav_detail_box.maintenance{
		margin-bottom:6vw;
	}
	
		.nav_detail_box.maintenance > .box_header{
			text-align:left;
			margin-bottom:1em;
			padding:0 2vw;
		}
		
			.nav_detail_box.maintenance > .box_inner ul{
				flex-wrap:wrap;
				padding:0 3vw;
			}
			
				.nav_detail_box.maintenance > .box_inner ul li{
					width:calc((100% - 3vw) / 2);
					margin-right:3vw;
					margin-bottom:3vw;
				}
				
				.nav_detail_box.maintenance > .box_inner ul li:nth-child(even){
                    width: calc((100% - 3vw) / 2);
					margin-right:0;
				}
				
					.nav_detail_box.maintenance > .box_inner ul li a{
						padding:2vw 0 0 0;
					}
					
						.nav_detail_box.maintenance > .box_inner ul li a .icon{}
					
						.nav_detail_box.maintenance > .box_inner ul li a .lbl{
							margin:0.5em 2vw 0 2vw;
							padding-top:0;
							line-height:1.2;
							height:12vw;
							display:flex;
							justify-content:center;
							align-items:center;
						}
						
					.nav_detail_box.maintenance > .box_inner ul li a:hover{
						border:1px solid #00197d;
					}
					
						.nav_detail_box.maintenance > .box_inner ul li a:hover .lbl{
							border-top:1px solid #00197d;
						}
	
	/*各メンテナンス詳細共通部*/
	.maintenance_detail_box{
		margin-bottom:6vw;
	}
	
		.maintenance_detail_box > .box_header{
			margin-bottom:1em;
		}
		
			.maintenance_detail_box > .box_header h4{
				font-size:4.4vw;
				padding:0.8em 1em;
			}
			
		.maintenance_detail_box > .box_inner{
			padding:0 2vw;
		}
		
			.maintenance_detail_box > .box_inner hr{
				margin:2em auto;
			}
		
	/*定期メンテナンス*/
	.exp_other_box{
		padding:0;
		margin-bottom:5vw;
	}
	
		.exp_other_box > .box_header{
			margin-bottom:0.5em;
		}
	
		.exp_other_box > .box_header h5{
			font-size:1.1em;
		}
		
			.exp_other_box > .box_header h5:before{
				width:1.5vw;
			}
		
		.exp_other_box > .box_inner{
			padding:0 3vw;
		}
		
		/*オーバーホール作業*/
		.exp_other_box > .box_inner .before_after{
			display:block;
			padding:0 2vw;
			margin-top:1em;
			width:100%;
			box-sizing:border-box;
		}
		
			.exp_other_box > .box_inner .before_after li{
				margin-right:0;
				width:100%;
			}
		
			.exp_other_box > .box_inner .before_after li.before_overhaul{
				margin-bottom:1.5em;
			}
			
				.exp_other_box > .box_inner .before_after li dl dt{
					margin-bottom:0.5em;
				}
				
				.exp_other_box > .box_inner .before_after li dl dt .lbl{
					margin-right:0.5em;
					padding:0.4em 0 0.2em 0;
				}
				
		/*メンテナンス項目*/
		.exp_other_box.maintenance_items > .box_inner{
			display:block;
			line-height:1.4;
			padding:0 2vw;
		}

            .exp_other_box.maintenance_items > .box_inner > ul{
                display: block;
            }

            .exp_other_box.maintenance_items > .box_inner > ul > li{
                width: auto;
                height: 60px;
                margin-right: 0;
                margin-bottom: 15px;
            }


			.exp_other_box.maintenance_items > .box_inner > ul > li ul{
				margin:0.3em 0;
			}
					
			.exp_other_box.maintenance_items > .box_inner > ul.items1,
			.exp_other_box.maintenance_items > .box_inner > ul.items2{
				width:100%;
			}
			
	/*バージョンアップ*/
	.fig_versionup{
		display: block;
		width: 100%;
		margin: 4vw auto 6vw auto;
		padding: 3vw;
	}
	
		.fig_versionup img{
			max-width:100%;
			height:auto;
		}
	
	.catalog_ver_box{
		display:block;
		margin:2em 0;
	}
	
		.catalog_ver_box dl{
			width:100%;
			padding:2vw;
		}
		
		.catalog_ver_box dl:first-child{
			margin-right:0;
			margin-bottom:1em;
		}
		
			.catalog_ver_box dl dt{
				margin-bottom:0.8em;
				padding:0.2em 0;
			}
			
	
	/*メンテナンス申込へのリンク*/
	.contact_box2 {
		width:100%;
		padding: 3vw;
		margin:0 auto 3em;
		background: #EBEBEB;
		box-sizing:border-box;
	}
	
		.contact_box2 > .box_header{
			line-height:1.6;
		}
	
		.contact_box2 > .box_inner{
			display:block;
		}
		
			.contact_box2 > .box_inner dl{
				justify-content:center;
				margin-bottom:1em;
			}
			
			.contact_box2 > .box_inner .contact_dl_sheet{
				text-align:center;
			}

}

/* ##########印刷用########## */
@media print{

}