/* ==================== common ==================== */
/* <?php header('Content-Type: text/css; charset=utf-8'); ?> */
@charset "UTF-8";

* {
	margin: 0px;
	padding: 0px;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 15px;
}
a {
	text-decoration: none; /* 下線の非表示 */
}
ul,ol {
	list-style: none; /*リストマークの非表示 */
}

/* 要素全体の縦横がwidthと等しく */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,th {
	font-weight: normal;
}

i.fa-file-pdf-o { color: #ff3f94; font-size:18px; }
i.fa-file-word-o { color: #2c589c; font-size:18px; }
i.fa-file-excel-o { color: #206f44; font-size:18px; }
i.fa-file-powerpoint-o { color: #d04525; font-size:18px; }
i.fa-file-o { color: #999999; font-size:18px; }

/* ==================== body ==================== */
body {
	background: #F5F5F5;
}

/* ==================== header ==================== */
#header {
	background-color: #ffffff; 
	/* position: fixed; */
}
#header-inner {
	padding: 0px;
	background-color: #ffffff;
	line-height:75px; /* 縦中央 */
}
#header-inner:after {
	content: "";
	display: block;
	clear: both;
}
/* ---------- h_logo ---------- */
.h_logo {
	float: left; /*  横並び */
	padding: 0px 0px 0px 0px;
	background-color: #eeeeee;
}
.h_logo img	{
	border: none;
	max-width: 300px;
	max-height: 75px;
	
	height: auto;
	vertical-align: bottom;  /* div内画像の下余白対策 */
	vertical-align: middle;
}
/* ---------- h_title ---------- */
.h_title {
	float: left;   /* 横並び */
	padding: 15px 15px 0px 15px;
	background-color: #ffffff;
	line-height:25px;
/*	width: 300px; */
}
.h_title p {
	font-size: 18px;
}
/* ---------- h_link ---------- */
.h_link {
	padding: 25px 0px 0px 0px;
	background: #eeeeee url(h_link.png) right bottom no-repeat;
	background: #eeeeee url(img/h_link.jpg) 0 0 no-repeat; 
	background-size: 100% 100%;
	height: 75px;
	line-height:25px;
	overflow:hidden;
}
.h_link i.fa-facebook-square    { padding: 3px; font-size: 35px; color: #315096; }
.h_link i.fa-twitter-square     { padding: 3px; font-size: 35px; color: #55acee; }
.h_link i.fa-google-plus-square { padding: 3px; font-size: 35px; color: #dd4b39; }


/* ==================== navi ==================== */
#navi {
	background-color: #ffffff; 
	/* position: fixed; */
}
#navi-inner {
	padding: 0px;
	background-color: #ffffff;
	line-height:30px; /* 縦中央 */
}
/* ---------- h_navi ---------- */
.h_navi {
	padding: 0px;
	background-color: #ffffff;

}
.h_navi ul {
}
.h_navi li {
	float: left; /* 横並び */
	width: auto; /* 等幅値? */
	line-height:30px; /* 縦中央 */
}
.h_navi li a {
	display: block;
	padding: 10px;
	font-size: 14px;
	color: #000000;
	background-color: #ffffff;
	border-bottom: solid 2px #ffffff;
}
.h_navi li a i {
	padding: 0px;
	font-size: 0px;
	color: #000000;
}
.h_navi li a:hover {
	background-color: #F5F5F5;
	text-decoration: none;
	border-bottom: solid 2px #000099;
}
.h_navi ul:after {
	content: "";
	display: block;
	clear: both;
}

/* ==================== breadcrumbs ==================== */
#breadcrumbs {
	padding: 10px 0px 0px 20px;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.6);
}
#breadcrumbs ol {
	font-size: 0px; /* li間の隙間の除去 */
}
#breadcrumbs ol li {
	display: inline; /* 横並びメニュー inline-blockは隙間できるのでNG */
	padding: 0px;
	color: #000000;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.0);

}
#breadcrumbs ol li:before {
	content: " > ";
}
#breadcrumbs ol li:first-child:before {
	content:"";
}
#breadcrumbs ol li a {
}
#breadcrumbs ol li a:hover {
}
/* ==================== guide_navi ==================== */
#guide_navi {
	padding: 10px 0px 0px 20px;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.0);
}
#guide_navi ol {
	font-size: 0px; /* li間の隙間の除去 */
}
#guide_navi ol li {
	display: inline; /* 横並びメニュー inline-blockは隙間できるのでNG */
	padding: 5px;
	color: #555555;
	background-color: #eeeeee;
	background-color: rgba(250,250,250,1.0);
	line-height:40px; /* 縦中央 */
}
#guide_navi ol li:before {
	content: "〉";
}
#guide_navi ol li:first-child:before {
	content:"";
}
#guide_navi ol li a {
}
#guide_navi ol li a:hover {
}

/* ==================== contents ==================== */
#contents {
	padding: 0px;
	background-color: #F5F5F5;
	background: url("../img/sonpo_bk26497875.png");

}
#contents-inner {
	padding: 0px;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.0);
}
#contents:after {
	content: "";
	display: block;
	clear: both;
}
/* ==================== main ==================== */
#main {
	padding: 10px;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.4);
}
.main_box {
	padding: 0px 0px 10px 0px;
}
/* ==================== side ==================== */
#side {
	padding: 10px;
	background-color: #F5F5F5;
	background-color: rgba(255,255,255,0.4);
}
.side_box {
	padding: 0px 0px 10px 0px;
}

/* ---------- s_navi ---------- */
.s_navi {
	padding: 5px;
	background-color: #ffffff;
	border: solid 1px #dddddd;
	border-top: solid 2px #aaaaaa; /* 20151002 add */
}
.s_navi h1 {
	padding: 10px;
	font-weight: normal;
	background-color: #ffffff;
}
.s_navi h1 i {
	padding: 10px;
	color: #999999;
}
.s_navi ul {
	font-size: 0px;
}
.s_navi li {
/*	float: left;  横並び */
	width: auto; /* 等幅値? */
	line-height: none; /* 縦中央 */
}
.s_navi li a {
	display: block;
	padding: 10px;
	color: #000000;
	background-color: #ffffff;
	border-top: solid 1px #dddddd;
}
.s_navi li a i {
	padding: 10px ;
	color: #999999;
}
.s_navi li a:hover {
	background-color: #eeeeee;
	text-decoration: none;
}
.s_navi ul:after {
	content: "";
	display: block;
	clear: both;
}

/* ---------- blog_list ---------- */
.blog_list {
	padding: 5px;
	background-color: #ffffff;
	border: solid 1px #dddddd;
	border-top: solid 2px #aaaaaa;
	overflow:visible;
}
.blog_list h1 {
	padding: 10px;
	font-size: 16px;
	font-weight: normal;
	color: #000000; 
	background-color: #ffffff;
	border-bottom: solid 1px #dddddd;
}
.blog_list h1 i {
	padding: 10px;
	font-size: 16px;
	color: #555555;
}
.blog_list ul {
}
.blog_list li {
	background-color: #ffffff; /* [li a]から移動  */
	border-bottom: dotted 1px #dddddd; /* [li a]から移動 */
	
	float: left;
	width: 100%; /* 2列の場合、50%*/
	height: auto;
	}
}
.blog_list li a {
	display: block;
	padding: 10px;
	font-size: 13px;
	color: #000000;
	background-color: #ffffff;
}
	.blog_list li a img {
		float: left;
		padding: 5px;
		/*width:100px; height:60px;*/
		width:90px; height:60px;
	}
	.blog_list li a span.cat {
		padding: 5px 0px 2px 0px;
		font-size: 12px;
		color: #555555;
	}
	.blog_list li a span.title {
		font-size: 13px;
		color: #000000;
	}
	.blog_list li a span.article {
		font-size: 13px;
		color: #555555;
	}
	
.blog_list li a:hover {
	background-color: #eeeeee;
	text-decoration: underline;
}
.blog_list li a:after {
	content: "";
	display: block;
	clear: both;
}
.blog_list ul:after {
	content: "";
	display: block;
	clear: both;
}
.blog_list li time {
	padding: 10px;
	font-size: 13px;
	color: #555555;
}
.blog_list li time i {
	padding: 1px;
	font-size: 15px;
	color: #555555;
}

/* ---------- news_list ---------- */
.news_list {
	padding: 5px;
	background-color: #ffffff;
	border: solid 1px #dddddd;
	border-top: solid 2px #aaaaaa;
}
.news_list h1 {
	padding: 10px;
	font-size: 16px;
	font-weight: normal;
	color: #000000; 
	background-color: #ffffff;
	border-bottom: solid 1px #dddddd;
}
.news_list h1 i {
	padding: 10px;
	font-size: 16px;
	color: #555555;
}
.news_list ul {
}
.news_list li {
	background-color: #ffffff; /* [li a]から移動  */
	border-bottom: dotted 1px #dddddd; /* [li a]から移動 */
		padding: 10px;
}
.news_list li a {
	float: left
/*	display: block; */
	padding: 10px;
	font-size: 15px;
	color: #000000;
	background-color: #ffffff;
}

	.news_list li time {
		font-size: 15px;
		color: #555555;
	}
	.news_list li span.cat {
		font-size: 15px;
		color: #555555;
	}
	.news_list li span.title {
		font-size: 15px;
		color: #000000;
	}
	.news_list li span.article {
		font-size: 15px;
		color: #555555;
	}


.news_list li a:hover {
	background-color: #eeeeee;
	text-decoration: underline;
}
.news_list li a:after {
	content: "";
	display: block;
	clear: both;
}
.news_list ul:after {
	content: "";
	display: block;
	clear: both;
}

/* ---------- contact ---------- */
.contact {
	padding: 5px;
	background-color: #ffffff;
	border: solid 1px #dddddd;
	border-top: solid 2px #aaaaaa;
	overflow:visible;
}
.contact h1 {
	padding: 10px;
	font-size: 16px;
	font-weight: normal;
	color: #000000; 
	background-color: #ffffff;
	border-bottom: solid 1px #dddddd;
}
.contact h1 i {
	padding: 10px;
	font-size: 16px;
	color: #555555;
}
.contact img {
	padding: 5px;
}
.contact i {
	padding: 5px;
	font-size: 25px;
	color:#555555;
}
.contact p {
	padding: 5px;
}
/* ==================== footer ==================== */
#footer	{
	background-color: #cccccc;
}
#footer-inner {
	padding: 0px;
	background-color: #cccccc;
}
#footer-inner:after {
	content: "";
	display: block;
	clear: both;
}

/* ---------- f_title ---------- */
.f_title {
/*	float: left;    横並び */
	padding: 10px;
	background-color: #cccccc;
	line-height:20px;
}
.f_title i.fa-facebook-square    { padding: 3px; font-size: 35px; color: #315096; }
.f_title i.fa-twitter-square     { padding: 3px; font-size: 35px; color: #55acee; }
.f_title i.fa-google-plus-square { padding: 3px; font-size: 35px; color: #dd4b39; }

.f_title p {
	font-size: 18px;
	color: #666666;
}

/* ---------- f_navi ---------- */
.f_navi {
	padding: 5px;
	background-color: #cccccc;
}
.f_navi ul {
}
.f_navi li {
	float: left; /* 横並び */
	width: auto; /* 等幅値? */
	line-height:15px; /* 縦中央 */
}
.f_navi li a {
	display: block;
	padding: 5px ;
	font-size: 14px;
	color: #666666;
	background-color: none; 
}
.f_navi li a i {
	padding: 5px ;
	font-size: 16px;
	color: #666666;
}
.f_navi li a:hover {
	background-color: #dddddd;
	text-decoration: underline;
}
.f_navi ul:after {
	content: "";
	display: block;
	clear: both;
}

/* ---------- copyright ---------- */
.copyright {
	padding: 5px;
	background-color: #cccccc;
}
.copyright p {
	color: #666666;
	font-size: 14px;
}

/* ==================== pagetop ==================== */
.fa-arrow-circle-up {color:#000000; font-size:60px;}
#pagetop {
	opacity:0.5;
	position: fixed;
  	right: 20px;
  	bottom: 20px;
}


/* ++++++++++ panel_list ++++++++++ */
.panel_list {
	font-size: 0px; /* li間の空白除去 */
	padding:10px;
	background-color: #dddddd;
	background-color: #fafafa;
}
.panel_list li {
	float: left;
	padding: 5px;
	
	background-color: #eeeeee;
	background-color: #ffffff;
	/*width: 33%;*/
	max-width:200px;
	text-align: center;
}
.panel_list:after {
	content: "";
	display: block;
	clear: both;
}
.panel_list i {
	padding: 5px;
	font-size:20px;
	color:#555555;
}
.panel_list i.fa-pencil-square-o { color: #0000ff; }
.panel_list i.fa-calendar { color: #00ff00; }
.panel_list i.fa-calculator { color: #ff0000; }

.panel_list p.title {
	font-size:15px;
	color:#000000;
}
.panel_list p.description {
	font-size:13px;
	color:#000000;
}
.panel_list table th {
	color: #ffffff;
	background: #ff9900;
	text-align: center;
}
.panel_list table td {
	color:#555555;
	background:#ffffff;
	text-align: center;
}

/* #################### 599px以下 #################### */
/* @media (max-width: 599px) { */
@media (max-width: 767px) {



	/* -----トグルボタン ----- */
	#menubtn {
		float: right; /* 横並び */
		padding: 10px;
		background-color: #ffffff;
		border: solid 1px #888888;
		border-radius: 5px;
		text-align: center;
	}
	#menubtn:hover { background-color: #dddddd; }
	#menubtn:focus { outline: none; }
	#menubtn i { color: #999999; font-size: 20px; }

	/* ----- ヘッダー（縦並び）----- */
	.h_logo {
		clear: both;
	}
	.h_link {
		clear: both;
	}
	/* ----- ナビゲーションメニュー（縦並び）----- */
	.h_navi { display: none; }
	.h_navi li {
		clear: both; /* 横並び */
		width: 100%;
	}
	.h_navi li a {
		font-size: 12px;
	}

	/* ----- mainとsideを横に並べる設定 ----- */
	#main {
		clear: both;
	}
	#side {
		clear: both;
	}

	.panel_list li {
		width: 50%;
	}

}
/* #################### 768px以上 #################### */
@media (min-width: 768px) {

	/* -----トグルボタン ----- */
	#menubtn { display: none; }

	/* ----- ナビゲーション ----- */
	.h_navi {
		display: block !important;
	}


	/* ----- headerの設定 ----- */
	.h_logo {
		float: left; /* 横並び */
		width: auto;
	}
	.h_navi {
		width: auto;
	}
	.h_link {
		width: auto;
	}

	/* ----- mainとsideを横に並べる設定 ----- */
	#main {
		float: left;
		width: 70%;
		//width: 100%;
	}
	#side {
		float: left;
		width: 30%;
		//width: 0%;
	}

}
/* #################### 1190px以上 #################### */
@media (min-width: 1190px) {

	/* 全体の横幅を固定 */
	#header-inner, #navi-inner, .top_image, #contents-inner, #footer-inner {
		width: 1140px;
		width: 960px;
		
		margin-left: auto;
		margin-right: auto;
	}

}