@charset "UTF-8";
/* CSS Document */
body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p{
	font-size:12px;
	line-height:125%;
	color:#5a5a5a;
}
p.arrow{
	background:url(../img/icon_arrow.gif) no-repeat 0px 2px;
	margin-left:10px;
	padding-left:10px;
	margin-bottom:20px;
}

.l_box{
	float:left;
}
.r_box{
	float:right;
}
.container{
	width:960px;
	margin: 0 auto;
}

/*---------------------
	header_Settting
-----------------------*/
header{
	z-index:2;
	position:fixed;
	top:0;
	left:0;
	background:#fff;
	width:100%;
	padding-top:20px;
	padding-bottom:5px;
	border-bottom:#1f2c5c solid 1px;
}

header .container{
	position:relative;
}

header a img:hover{
	opacity:0.7;
}

header .logo{
	display:inline-block;
	margin-right:78px;
}

header nav{
	display:inline-block;
}
header ul li{
	display:inline-block;
	border-left:#1f2c5c solid 1px;
	padding:0 20px;
	font-size:0px;
}
header ul li:last-child{
	border-right:#1f2c5c solid 1px;
}

header .mobile_menu{
	position:absolute;
	top:4px;
	right:0;
	display:none;
}

/*-----------------------
	contents_setting
-------------------------*/
#contents{
	padding-top:104px;
}

#contents .topimg{
	margin-bottom:19px;
	border:#1f2c5c solid 1px;
	font-size:0px;
	padding:4px;
}

#contents .main{
	float:left;
	width:715px;
}

#contents aside.side{
	float:right;
}
#contents aside.side a img:hover{
	opacity:0.7;
}

/*-----------------------
	footer_setting
-------------------------*/
footer{
	background:#1f2c5c;
	width:100%;
	padding:7px 0;
}
footer a img:hover{
	opacity:0.7;
}
footer ul{
	display:inline-block;
}
footer ul li{
	display:inline-block;
	border-left:#fff solid 1px;
	font-size:0px;
	padding:0 17px;
}
footer ul li:last-child{
	border-right:#fff solid 1px;
}
footer p.copy{
	display:inline-block;
	float:right;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	margin-top:8px;
	letter-spacing:0.5px;
}


/*-----------------------
	title_setting
-------------------------*/
.ttl1{
	color:#fff;
	font-size:14px;
	letter-spacing:6px;
	background:url(../img/ttl_bg01.gif) no-repeat;
	padding:9px 0 0 10px;
	min-height:30px;
	margin-bottom:15px;
	position:relative;
}
.ttl2{
	border:#5a5a5a solid 1px;
	border-bottom:#1f2c5c solid 2px;
	color:#1f2c5c;
	font-size:16px;
	letter-spacing:6px;
	padding:6px 0 5px 8px;
	margin-bottom:20px;
}
.ttl3{
	background:url(../img/line.gif) repeat-y;
	font-size:18px;
	color:#1f2c5c;
	padding:5px 10px 2px;
	margin-bottom:5px;
}
.ttl4{
	font-size:18px;
	color:#1f2c5c;
	border-bottom:#1f2c5c solid 1px;
	letter-spacing:2px;
	padding-bottom:2px;
	margin-bottom:9px;
}
.ttl5{
	border:#5a5a5a solid 1px;
	border-bottom:#008159 solid 2px;
	color:#008159;
	font-size:16px;
	letter-spacing:6px;
	padding:6px 0 5px 8px;
	margin-bottom:20px;
}
.ttl6{
	border-bottom:#008159 solid 1px;
	position:relative;
	padding-left:22px;
	margin-bottom:3px;
}
.ttl6 img{
	position:absolute;
	left:-9px;
	top:-9px;
}

/*-----------------------
	side_setting
-------------------------*/
aside.side ul li{
	font-size:0px;
	margin-bottom:29px;
}


@media screen and (max-width: 960px){
	.container{
		width:92%;
		margin:0 4%;
		position:relative;
	}
	
	#contents .topimg{
		width:98%;
	}
	#contents .topimg img{
		width:100%;
		height:auto;
	}
	
	#contents .main{
		float:none;
	}
	
	#contents aside.side{
		float:none;
	}
	#contents aside.side ul{
		width:470px;
		margin:0 auto;
	}
	#contents aside.side li{
		float:left;
	}
	#contents aside.side li:nth-child(2n+1){
		margin-right:20px;
	}
}

@media screen and (max-width: 768px){
	#contents .main{
		width:100%;
	}
	
	header ul li {
		padding: 0px 16px;
	}
	
	.ttl1:after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		display:block;
		width:2px;
		height:30px;
		background:url(../img/ttl_bg01_af.gif) no-repeat;
	}
	
	footer ul li {
		padding: 0px 12px;
	}
}

@media screen and (max-width: 677px){
	.phone{
		display:none;
	}
	
	header .logo{
		width:30%;
		margin-right:0;
	}
	header .logo img{
		width:100%;
	}
	header{
		padding-top:7px;
		text-align:center;
	}
	header nav{
		display:block;
		padding-top:10px;
	}
	header nav li,
	header nav li:last-child{
		border:none;
		display:block;
		margin-bottom:5px;
	}
	
	header .mobile_menu{
		display:block;
	}
	
	footer ul{
		display:none;
	}
}

@media screen and (max-width: 414px){
	#contents aside.side{
		margin-bottom:30px;
	}
	#contents aside.side ul{
		width:100%;
	}
	#contents aside.side li{
		float:none;
		margin-bottom:10px;
		text-align:center;
	}
	#contents aside.side li:nth-child(2n+1){
		margin-right:00px;
	}
}