@charset "UTF-8";
/*------------------------------------------------------------
	リセット
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; background: transparent; border: 0; outline: 0; font-size: 1em; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }
object,embed { display: block; border: none; }

/*------------------------------------------------------------
	クリアフィクス
------------------------------------------------------------*/
.clearfix:before,
.clearfix:after,
#container:before,
#container:after,
#header:before,
#header:after,
#contents:before,
#contents:after,
#footer:before,
#footer:after {
	display: table;
	line-height: 0;
	content: "";
}

.clearfix:after,
#container:after,
#header:after,
#contents:after,
#footer:after {
	clear: both;
}

.clear {
	clear:both;
}
/*------------------------------------------------------------
	リンク
------------------------------------------------------------*/
a {
	text-decoration: none;
	font-size:100%;
	color: #0071BC;
}
a:hover {
	text-decoration: underline;
	color: #0071BC;
}
a img {
	border-style: none;
}



/*------------------------------------------------------------
	フォント
------------------------------------------------------------*/
body { -webkit-text-size-adjust: 100%; } /*スマホ表示時の文字サイズ拡大を防ぐ*/

body, table, input, textarea, select, option {
	font-family: " Lucida Grande ", " Lucida Sans Unicode ", Helvetica,"Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size: 0.9em;
} 
h1 {
	font-size: 310%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 125%;
}

small {
	font-size: 80%;
}

hr {
	clear: both;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	background-color:#FFFFFF;
}
#container {
}
.wrap {
	width:960px;
	margin:0 auto;
}
#header {
	margin:0;
	background-color: #227cbf;
	padding: 20px 0;
	position: relative;
}
#header .wrap {
	width: 96%;
}

#header h1#h-logo {
	width:212px;
	height:42px;
	float: left;
}

#footer {
	background-color:#1a2332;
	padding:20px;
}
#footer .f-nav {
	text-align:center;
	margin:0 0 20px 0;
}
#footer .f-nav ul {
	margin-bottom: 5px;
}
#footer .f-nav ul li {
	display:inline;
	text-align:center;
	color:#999999;
	font-size:0.8em;
}
#footer .f-nav ul li.separator:after {
	content: '｜';
}

#footer .f-nav ul li a {
	color:#999999;
}
#footer .f-nav ul li a:hover {
	color:#ffffff;
}
#footer .copyright {
	font-size:0.8em;
	text-align:center;
	color: #666666;
}


/*------------------------------------------------------------
	コラム用スタイル
------------------------------------------------------------*/
.base {
	margin: 30px 0;
}
#fan_contents {}
#fan_contents h2 {
	margin: 10px 0px 20px;padding: 20px;background-color: #0084C9;border-radius: 15px;color:#fff; line-height:1.4;
}
#fan_contents h3 {
	background: url(img/kumo_1.png) no-repeat scroll 0 0 transparent;padding: 5px 0px 10px 60px;font-size: 130%;margin: 0 0 10px;
}

.column_section {
	overflow: hidden;margin: 0 20px 30px;
}

.column_section p {
	font-size:100%;
	line-height:1.8;
}

.column_foot {
	overflow:hidden;margin: 20px 0 50px;padding: 15px;background: #0084C9;border-radius: 5px;color:#fff;
}


.column_nav {
	margin:10px 0 20px 0;
}
.column_nav .prev {
	display:block;
	width:39%;
	float:left;
}
.column_nav .top {
	display:block;
	width:20%;
	float:left;
	text-align:center;
}
.column_nav .next {
	display:block;
	width:39%;
	float:right;
	text-align:right;
}
.column_nav a {
	color:#0084C9;
}


/*------------------------------------------------------------
	responsive
------------------------------------------------------------*/

@media (max-width: 959px) {
	.wrap {
		width:94%;
		margin:0 3%;
	}
	
}

@media screen and (max-width: 480px) {
	h2 {
		font-size: 140%;
	}

	h3 {
		font-size: 120%;
	}
	.column_section,
	.column_foot p  {
		font-size:90%;
	}
	.column_section {
		margin: 0 10px 30px;
	}

	.column_foot {
		margin: 20px 0 50px;padding: 15px;
	}
	
}