@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------
	Common
------------------------------------------------------------*/
/*  Layout */
.wrapper {
	width: 1000px;
	margin: 0 auto;
}

/*  Header */
#header {
	border-bottom: 1px solid #cccccc;
	height: 80px;
}

#header .wrapper.copy {
	background: url(/hojin-web/resona/image/header_copy.gif) no-repeat right 5px;
	background-size: 399px auto;
	height: 100%;
}

#header #header_logo {
	padding: 20px 0 15px;
	float: left;
	width: 100%;
	margin-left: 25px;
}

#header #header_logo img {
	width: 252px;
	height: auto;
}

#header #header_logo img:nth-child(n+2) {
	margin-left: 10px;
}

/* ---------------------------------------------------------
	下層ページ　Common
------------------------------------------------------------*/	
#cont {
	width: calc(1000px - 20px);
	margin: 0 auto;
	padding: 25px 10px 40px;
}

#cont .columnInner {
	width: 690px;
	margin: 0 auto;
}

#cont .columnInner .textBlock01 {
	width: 580px;
	margin: 0 auto;
}

#cont .p_ttl {
	font-size: 24px;
	color: #009d4e;
	padding: 5px 13px 5px 28px;
	margin-bottom: 20px;
	position: relative;
	border: 1px solid #009d4e;
	border-radius: 5px;
}

#cont .p_ttl span {
	border-left: 4px solid #009d4e; 
	color: #009d4e;
	padding-left: 15px;
	text-indent: 15px;
	margin-left: -15px;
}

.mainNarrow .column1 .col {
    width: 690px;
	margin: 20px auto 50px;
}

/*  Footer */
#footer {
    border-top: 1px solid #cccccc;
}

#footer #footer_btm {
	padding: 25px 0;
	text-align: center;
}

#footer #footer_btm ul li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
}

#footer #footer_btm ul li img {
	height: 18px;
	width: auto;
}

#footer #footer_btm ul li:first-child img {
	height: 33px;
	width: auto;
}

#footer #footer_btm ul li:last-child {
	margin-right: 0;
}

#footer #footer_btm .copy_right {
	color: #999999;
	font-size: 10px;
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	/*  Layout */
	.wrapper {
		width: 100%;
		box-sizing: border-box;
	}

	#cont {
			width: 100%;
			box-sizing: border-box;
	}	

}

@media screen and (max-width: 767px) {
	img {
		max-width: 100%;
	}

	/*  Layout */
	.wrapper {
		width: 100%;
		margin: 0 auto;
	}
	
	#header {
    border-bottom: 1px solid #cccccc;
    height: 67px;
	}
	
	#header .wrapper.copy {
	background: url(/hojin-web/resona/image/header_copy.gif) no-repeat right 5px;
		background-size: 50% auto;
	}
	
	#header #header_logo {
		padding: 25px 0 15px;
		float: left;
		width: 100%;
		margin-left: 10px;
		box-sizing: border-box;
	}

	#header #header_logo img {
		width: 150px;
		height: auto;
	}

	/*  Footer */
	#footer {
		width: 100%;
	}	
	
	#footer #footer_btm {
			padding: 4vw 0;
	}	

	#footer #footer_btm ul li {
			margin-right: 3.0vw;
		vertical-align: middle;
	}	

	#footer #footer_btm ul li a img {
		vertical-align: middle;
	}

	#footer #footer_btm ul li img {
		height:3.5vw;
		width: auto;
	}

	#footer #footer_btm ul li:first-child img {
		height: 6vw;
		width: auto;
	}

	#cont .p_ttl {
		margin-bottom: 20px;
		background-color: rgba(255,255,255,0.01);
	}
	
	/* ---------------------------------------------------------
		下層ページ　Common
	------------------------------------------------------------*/	
	#cont {
		width: 100%;
		margin: 0 auto;
		padding: 4vw 3vw 5vw;
		box-sizing: border-box;
	}

	#cont .columnInner {
		width: 100%;
	}

	#cont .columnInner .textBlock01 {
		width: 100%;
	}

	#cont .p_ttl {
		font-size: 16px;
		line-height: 1.4;
		color: #009d4e;
		padding: 5px 13px 5px 28px;
	}

	#cont .p_ttl span {
		text-indent: 15px;
		margin-left: -15px;
		}

	.mainNarrow .column1 .col {
			width: 100%;
		margin: 0 auto 5.5vw;
		box-sizing: border-box;
	}
	
}