@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, ins, kbd, q, s, samp, small, strike, strong, side, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#333;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#f7f7f7;
-webkit-text-size-adjust: none;
}

a{color:#134b88;text-decoration:none;}
a:hover{color:#2871d7;}
a:active, a:focus{outline:0;}



#wrapper{
margin:0 auto;
padding:20px 1%;
width:98%;
position:relative;
background:#fff;
overflow:hidden;
}

* html #wrapper{background:#fff;}

.inner{
margin:0 auto;
width:100%;
}


h1{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 10px;
}

#header{
overflow:hidden;
padding:5px 0 0;
color:#fff;
background:#134b88;
}

* html #header{height:1%;}


.grid{
float:left;
padding-bottom:10px;
border:1px solid #dbdbdb;
border-radius:5px 5px 0 0;
}

.grid p{
padding:10px 10px 0;
}

.grid ul{margin:5px 10px 3px;}

.grid li{
padding:5px 0 4px;
border-bottom:1px solid #ccc;
}

.grid li:first-child{border-top:0;}
.grid li:last-child{border-bottom:0;}

.gridWrapper img{
max-width:100%;
height:auto;
}

section.content{
margin-bottom:20px;
font-size:14px;
overflow:hidden;
}

* html section.content{height:1%;}

section.content p{margin-bottom:5px;}

#footer .inner{
clear:both;
margin-bottom:20px;
padding:20px 0;
overflow:hidden;
background:#134091;
border-radius:0 0 10px 10px;
}

* html #footer{height:1%;}

#footer a{color:#fff;}

#footer .copyright{
	font-size: small;
	text-align: center;
	color: #FFF;
}


/* PC用 */
@media only screen and (min-width:960px){
	#wrapper,.inner{
	width:940px;
	padding:0;
	}
	
	#wrapper{padding:20px 0;}
	
	#main{
	float:right;
	width:900px;
	padding-right:10px;
	}
	
	#page #side{
	float:left;
	width:235px;
	overflow:hidden;
	}
	
	.grid{width:218px;margin:0 0 0 14px;}
	.col2{width:452px;}
	.col3{width:682px;}
	
	#page #side .grid{
	float:none;
	margin-bottom:30px;
	}
	
}


/* モニター幅960px以下 */
@media only screen and (max-width:960px){
	h1{padding:0 1%;width:98%}
	
	.grid{
	width:45%;
	margin:2px 2% 10px;
	}
	
	section.content{padding:0 10px;}
	
	#side .grid{padding-bottom:20px;}
	#page #side .grid{
	float:none;
	margin:0 auto 20px;
	width:98%;
	}
	
	#footer{padding:0;}
	
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	
	.grid p{text-align:left;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	
	.grid{width:96%;}
}h1 a {
	color: #FFF;
}