@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------
* ▼レイアウト（モバイルファースト）
------------------------------------------------------------------------------------------------------------------------------- */
body {
	font-family: 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: #000000;
	-webkit-text-size-adjust: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
img{
	width: 100%;
	-webkit-backface-visibility: hidden;
}
a{
	color: #000000;
}

/* view-sp / view-pc */
.view-sp{
	display: block;
}
.view-pc{
	display: none;
}
@media all and (min-width: 768px) {
	.view-sp{
		display: none;
	}
	.view-pc{
		display: block;
	}
}


/* container
===================================================================== */
#container{
	z-index: 1000;
	padding: 9px 17px 17px 17px;
	background: #FFF;
	overflow: hidden;
}
@media all and (min-width: 768px) {
	#container{
		padding: 20px 40px 40px;
		min-width: 1140px;	
	}
}


/* l-header 
===================================================================== */
#l-header{
	position: relative;
	width: 100%;
	height: 46px;
	z-index: 5001;
}
#l-header .h_logo{
	position: absolute;
	top: 3px;
	left: 50%;
	margin-left: -78px;
	width: 156px;
}
@media all and (min-width: 768px) {
	#l-header{
		height: 80px;
	}
	#l-header .h_logo{
		position: absolute;
		top: 3px;
		left: 0;
		margin-left: 0;
	}
	#l-header .h_logo img{
		width: 244px;
	}
}


/* l-menu
===================================================================== */
.btn_menu{
	position: fixed;
	z-index: 6000;
	width: 38px;
	top: 9px;
	right: 17px;
	cursor: pointer;
}
#l-menu{
	position: fixed;
	z-index: 6001;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	overflow: auto;
	background-color: rgba(1,64,153,0.95);
}
#l-menu .btn_menu_close{
	width: 38px;
	box-sizing: content-box;
	margin: 9px 17px 0 auto;
	cursor: pointer;
}
#l-menu > ul{
	padding: 20px 35px;
}
#l-menu > ul > li{
	border-bottom: 1px solid #6a8fc2;	
}
#l-menu > ul > li:first-child{
	border-top: 1px solid #6a8fc2;
}
#l-menu > ul > li a{
	display: block;
	padding: 20px 0 20px 40px;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
}
#l-menu > ul > li ul li a{
	padding: 0 0 20px 40px;
	font-size: 12px;
}

@media all and (min-width: 768px) {
	.btn_menu{
		width: 60px;
		top: 20px;
		right: 40px;
	}
	#l-menu{
		width: 500px;
	}
	#l-menu .btn_menu_close{
		width: 60px;
		margin: 20px 40px 0 auto;
	}
	#l-menu > ul{
		padding: 50px 100px;
	}
	#l-menu > ul > li a{
		padding: 25px 0 25px 80px;
		font-size: 20px;
	}
	#l-menu > ul > li ul{
		padding: 0 0 10px;
	}
	#l-menu > ul > li ul li a{
		padding: 0 0 20px 80px;
		font-size: 15px;
	}
}


/* l-contents
===================================================================== */
#l-contents-inner{
	padding: 30px 0 0;
	font-size: 14px;
	line-height: 1.65;
}
@media all and (min-width: 768px) {
	#l-contents-inner{
		padding: 100px 0 0;
		width: 980px;
		margin: 0 auto;
		font-size: 16px;
	}
}


/* l-footer
===================================================================== */
#l-footer{
	position: relative;
	border-top: 1px solid #000;
	margin-top: 50px;
}
#l-footer .pagetop{
	position: absolute;
	width: 40px;
	right: 0;
	top: 0;
	margin-top: -40px;
}
#l-footer .f_nav{
	width: 286px;
	margin: 25px auto 0;
	text-align: center;
	font-size: 0;
}
#l-footer .f_nav li{
	display: inline-block;
	margin: 5px 0;
	padding: 0 17px;
	font-size: 11px;
	line-height: 1.2;
	border-left: 1px solid #000;
}
#l-footer .f_nav li:nth-child(1),
#l-footer .f_nav li:nth-child(4),
#l-footer .f_nav li:nth-child(7){
	border-left: none;
}
#l-footer .f_nav li a{
	text-decoration: none;
}
#l-footer .f_nav li a:hover{
	opacity: 0.6;
}
#l-footer .f_logo{
	width: 160px;
	margin: 20px auto 15px;
}
#l-footer .f_logo a {
	display: block;
}
#l-footer .copyright{
	text-align: center;
	font-size: 10px;
	font-family: Helvetica, Arial;
}
@media all and (min-width: 768px) {
	#l-footer{
		margin-top: 90px;
		padding-top: 30px;
	}
	#l-footer .pagetop{
		position: absolute;
		width: 70px;
		right: 0;
		top: 0;
		margin-top: 20px;
	}
	#l-footer .f_nav{
		width: 100%;
		margin: 20px 0;
	}
	#l-footer .f_nav li{
		padding: 0 25px;
		font-size: 14px;
	}
	#l-footer .f_nav li:nth-child(4),
	#l-footer .f_nav li:nth-child(7){
		border-left: 1px solid #000;
	}
	#l-footer .f_logo{
		width: 244px;
		margin: 30px auto 20px;
	}
	#l-footer .copyright{
		font-size: 12px;
		letter-spacing: 0.1em;
	}
}