﻿@charset "utf-8";
/*--京index.css--*/
/* ##########PC########## */
.page_body{
	padding-top:3em;
}

.top_chatch_box{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:330px;
	margin-bottom:50px;
	background-image:url(../../shared/support/bg_support.jpg);
	background-repeat:no-repeat;
	background-position:center center;
}

	.top_chatch_box > .box_inner{
		width:980px;
	}

		.top_chatch_box > .box_inner p{
			font-size:1.8em;
			text-align:right;
		}

.top_nav_box{}

	.top_nav_box hr{
		margin:3em 20px;
		border:none;
		border-top:1px dotted #555;
	}
	
	.nav_detail_box{
		display:flex;
		flex-wrap:wrap;
		margin-bottom:50px;
	}
	
		.nav_detail_box > .box_header{
			width:100%;
			margin: 0 0 1em 0;
		}
		
			.nav_detail_box > .box_header h3{
				font-size: 1.4em;
				font-weight: bold;
				color: #004E93;
				position: relative;
				padding-left: 0.8em;
				line-height: 1.4;
				border-left:8px solid #004E93;
			}
			
			/*
			.nav_detail_box > .box_header h3:before{
				content: "";
				display: inline-block;
				height: 1.4em;
				width: 8px;
				background: #004E93;
				position: absolute;
				top: 0;
				left: 0;
			}
			*/
			
		.nav_detail_box > .box1 > .box_inner{
			margin-bottom:1em;
		}
		
			.nav_detail_box > .box1 > .box_inner p{
				line-height:1.8;
			}
			
			.nav_detail_box > .box1 > .box_inner ul{
				margin:0.5em 0;
			}
			
				.nav_detail_box > .box1 > .box_inner ul li{
					box-sizing:border-box;
					padding-left:1.1em;
					position:relative;
					margin-bottom:0.3em;
				}
			
			
				.nav_detail_box .box1 > .box_inner ul li:before{
					font-family: FontAwesome;
					content:"\f10c";
					position:absolute;
					left:0;
					top:0.3em;
					font-size:0.7em;
					color:rgba(0,78,147,0.8);
				}
				
		.nav_detail_box > .box1 > .box_footer{}
		
			.nav_detail_box > .box1 > .box_footer ul{
				width:300px;
			}
			
			.nav_detail_box > .box1 > .box_footer ul li{
				margin-bottom:0.8em;
			}
			
			.nav_detail_box > .box1 > .box_footer ul li:last-child{
				margin-bottom:0;
			}
			
			.nav_detail_box > .box1 > .box_footer ul li a{
				display:block;
				color:#00197d;
				font-weight: bold;
				text-align:center;
				padding:5px 1px 3px 1px;
				text-decoration:none;
				border:1px solid #00197d;
				background: #fff;
				transition:.3s all ease;
			}

			.nav_detail_box > .box1 > .box_footer ul li a:hover{
				border:1px solid #006ef0;
				color:#006ef0;
			}
		
	
	/*アフターフォロー*/
	.nav_detail_box.after_follow{
		justify-content:space-between;
	}
	
		.nav_detail_box.after_follow .box1{
			width:calc(100% - 350px);
		}
		
			.nav_detail_box.after_follow .box1 .box_inner ul{
				display:flex;
				flex-wrap:wrap;
			}
			
			.nav_detail_box.after_follow .box1 .box_inner ul li{
				width:55%;
			}
			
			.nav_detail_box.after_follow .box1 .box_inner ul li:nth-child(even){
				width:45%;
			}
			

		.nav_detail_box.after_follow > .box1 > .box_footer ul{
			width:100%;
		}
		
			.nav_detail_box.after_follow > .box1 > .box_footer ul li{
				margin: 0 5em;
			}
		
		.nav_detail_box.after_follow .box2{
			width:300px;
			padding-left:10px;
		}
		
	/*メンテナンス*/
	.nav_detail_box.maintenance{
		justify-content:space-between;
	}
	
		.nav_detail_box.maintenance .box1{
			width:calc(100% - 640px);
		}
		
		.nav_detail_box.maintenance .box2{
			width:620px;
		}
		
			.nav_detail_box.maintenance .box2 ul{
				display:flex;
				justify-content:center;
			}
			
				.nav_detail_box.maintenance .box2 ul li{
					width:140px;
					margin-right:10px;
				}
				
				.nav_detail_box.maintenance .box2 ul li:last-child{
					margin-right:0;
				}
				
				.nav_detail_box.maintenance .box2 ul li a{
					display:block;
					color:#222;
					text-decoration:none;
				}
				
					.nav_detail_box.maintenance .box2 ul li a .item_icon{
						display:flex;
						align-items:center;
						justify-content:center;
						width:140px;
						height:140px;
						background:#efefef;
						line-height:1;
						color:#006ef1;
						transition:.3s all ease;
					}
					
					.nav_detail_box.maintenance .box2 ul li a:hover .item_icon{
						background:#e6f0fc;
					}
					
						.nav_detail_box.maintenance .box2 ul li a .item_icon img{
							display:inline-block;
							transition:.5s all ease;
						}
						
						.nav_detail_box.maintenance .box2 ul li a:hover .item_icon img{
							display:inline-block;
							transform:rotateY(360deg);
						}
					
					.nav_detail_box.maintenance .box2 ul li a .item_text{
						display:block;
						text-align:center;
						font-weight:bold;
					}

		.nav_detail_box.maintenance .box3{
			width:620px;
		}

			.nav_detail_box.maintenance .box3 ul{
				display:flex;
				justify-content:center;
			}

				.nav_detail_box.maintenance .box3 ul li{
					width:140px;
					margin-right:10px;
				}

				.nav_detail_box.maintenance .box3 ul li:last-child{
					margin-right:0;
				}

					.nav_detail_box.maintenance .box3 ul li a{
						display: block;
						border: 1px solid #ccc;
						padding: 15px 0;
						text-decoration: none;
						transition: .3s all ease;
					}

					.nav_detail_box.maintenance .box3 ul li a:hover{
						border:1px solid #00197d;
					}

					.nav_detail_box.maintenance .box3 ul li a .item_icon{
						display: block;
						text-align: center;
					}

					.nav_detail_box.maintenance .box3 ul li a .item_icon img{
						vertical-align: bottom;
					}

					.nav_detail_box.maintenance .box3 ul li a .item_text{
						display: block;
						text-align: center;
						margin: 0.5em 5px 0 5px;
						border-top: 1px solid #ccc;
						padding-top: 0.7em;
						color: #00197d;
						transition: .3s all ease;
						font-size: 0.9em;
						white-space: nowrap;
					}

					.nav_detail_box.maintenance .box3 ul li a:hover .item_text{
						border-top:1px solid #00197d;
					}



.goto_sps_safety{
	text-align: center;
	margin-bottom:50px;
	line-height:1;
}

	.goto_sps_safety a{
		display: inline-block;
		border: 1px solid #8e8e8e;
		padding: 18px 30px;
		transition: .3s all ease;
	}
	
	.goto_sps_safety a:hover{
		border:1px solid #00197d;
	}

.nav_other_btns{}

	.nav_other_btns ul{
		display:flex;
		justify-content:space-between;
		width: 100%;
		height: 170px;
		background: #EBEBEB;
		margin: 0 auto 50px auto;
		box-sizing: border-box;
		padding: 50px 40px 0 40px;
	}
	
		.nav_other_btns ul li a{
			display:inline-block;
			position:relative;
		}
		
			.nav_other_btns ul li a img[src$="_off.png"]{
				position:relative;
				top:0;
				left:0;
				z-index:2;
				transition:.3s all ease;
			}
			
			.nav_other_btns ul li a img[src$="_on.png"]{
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				opacity:0;
				transition:.3s all ease;
			}
			
			.nav_other_btns ul li a:hover img[src$="_off.png"]{
				opacity:0;
			}
			
			.nav_other_btns ul li a:hover img[src$="_on.png"]{
				opacity:1;
			}
		
	
.goto_user_login{
	text-align:center;
}

	.goto_user_login p{
		font-size:1.05em;
		margin-bottom:2em;
	}

	.goto_user_login a{
		display:inline-flex;
		justify-content:center;
		align-items:center;
		width:260px;
		height:70px;
		border:1px solid #005096;
		color:#005096;
		font-size:1.2em;
		text-decoration:none;
		box-sizing:border-box;
		transition:.3s all ease;
	}
	
		.goto_user_login a:hover{
			background:#e6f0fc;
		}

/* ##########SP########## */
@media screen and (max-width:479px) {
	.page_body{
		width:100%;
		margin:0;
		font-size:1em;
		line-height:1.6;
		padding:3vw 0 0 0;
	}
	
	.top_chatch_box{
		justify-content:flex-end;
		height:40vw;
		margin-bottom:6vw;
		background-position:left center;
		background-size:auto 40vw;
	}
	
		.top_chatch_box > .box_inner{
			width:60%;
		}
	
			.top_chatch_box > .box_inner p{
				font-size:4vw;
				padding-right:3vw;
				line-height:1.4;
				text-shadow:1px 1px 1px rgba(255,255,255,1),-1px -1px 1px rgba(255,255,255,1);
			}
	
	.top_nav_box{
		padding:0 3vw;
	}
	
		.nav_detail_box{
			display:block;
			margin-bottom:5vw;
		}
		
			.nav_detail_box > .box1 > .box_header h3{
				font-size: 4.4vw;
			}
				
				.nav_detail_box > .box1 > .box_header h3:before{
					width: 1.5vw;
				}
				
				.nav_detail_box > .box1 > .box_inner{
					padding:0 3vw;
				}
				
			
				.nav_detail_box > .box1 > .box_inner p{
					line-height:1.6;
				}
				
			.nav_detail_box > .box1 > .box_footer{
				margin-bottom:1.5em;
			}
				
			.nav_detail_box > .box1 > .box_footer ul{
				width:85%;
				margin:0 auto;
			}
			
		
		/*アフターフォロー*/
		.nav_detail_box.after_follow .box1{
			width:100%;
			margin-bottom:1em;
		}
		
			.nav_detail_box.after_follow .box1 .box_inner ul{
				display:block;
			}
			
			.nav_detail_box.after_follow .box1 .box_inner ul li{
				width:100%;
			}
			
			.nav_detail_box.after_follow .box1 .box_inner ul li:nth-child(even){
				width:100%;
			}
			
			.nav_detail_box.after_follow > .box1 > .box_footer ul li{
				margin: 0 1em;
			}
		
		.nav_detail_box.after_follow .box2{
			width:60%;
			margin:0 auto 1em auto;
			padding:0;
		}
		
			.nav_detail_box.after_follow .box2 img{
				max-width:100%;
				height:auto;
			}
			
		/*メンテナンス*/
			.nav_detail_box.maintenance .box1{
				width:100%;
				margin-bottom:1em;
			}
			
			.nav_detail_box.maintenance .box2{
				width:100%;
			}
			
				.nav_detail_box.maintenance .box2 ul{
					justify-content:space-between;
				}
				
					.nav_detail_box.maintenance .box2 ul li{
						width:calc((100% - 6vw) / 4);
						margin-right:0;
					}
					
						.nav_detail_box.maintenance .box2 ul li a .item_icon{
							width:100%;
							height:calc(88vw / 4);
							margin-bottom:0.4em;
						}
						
						.nav_detail_box.maintenance .box2 ul li a .item_text{
							font-size:0.9em;
						}

	.nav_detail_box.maintenance .box3{
		width:100%;
	}

		.nav_detail_box.maintenance .box3 ul{
			justify-content:space-between;
		}

			.nav_detail_box.maintenance .box3 ul li{
				width:calc((100% - 6vw) / 4);
				margin-right:0;
			}

				.nav_detail_box.maintenance .box3 ul li a .item_icon{
					width:100%;
					height:calc(88vw / 4);
					margin-bottom:0.4em;
				}

				.nav_detail_box.maintenance .box3 ul li a .item_text{
					font-size:0.9em;
				}

	.goto_sps_safety{
		margin-bottom:3em;
		padding:0 5vw;
	}
	
		.goto_sps_safety a{
			display:block;
			padding: 0.8em 0;
			line-height: 1.4;
			font-size: 3.8vw;
			color: #222;
			text-decoration: none;
		}
		
			.goto_sps_safety a img{
				display:none;
			}
			
			.goto_sps_safety a .sp .emp {
				color: #B42121;
			}
		
		.goto_sps_safety a:hover{
			border:1px solid #00197d;
		}
						
						
	.nav_other_btns{}
	
		.nav_other_btns ul{
			justify-content:flex-start;
			flex-wrap:wrap;
			height: auto;
			margin: 0 0 6vw 0;
			padding: 4vw 4vw 1vw 4vw;
		}
		
			.nav_other_btns ul li{
				width: calc((100% - 3vw) / 2);
				margin-right: 3vw;
				margin-bottom: 3vw;
			}
			
			.nav_other_btns ul li:nth-child(even){
				margin-right: 0;
			}
			
				.nav_other_btns ul li a img{
					max-width:100%;
					height:auto;
				}
		
	.goto_user_login{
		padding:0 3vw;
	}
	
		.goto_user_login p{
			text-align:left;
			margin-bottom:1em;
		}
	
		.goto_user_login a{
			width:70%;
			height:18vw;
		}

}

/* ##########印刷用########## */
@media print{

}