@charset "UTF-8";
/*=======================================================

石巻元気復興センター　WEBsite用CSS

2016Nov26sat HTML5対応及びスマホ対応に伴い、Renewal

=======================================================
※コーディングルール※
　変形・移動などはそれぞれのコンテンツに直接行い、別classでは指定しない。
　（後々の修正時に探す手間を省くため）

　単位は「em」か「%」
=======================================================*/
/*++++++++++++++++++++++
基本設定
++++++++++++++++++++++*/
html {
	margin:0;
	padding:0;
}
/*ディスプレイ左右の余白対策*/
* {
	margin:0;
	padding:0;
}
body {
	font-size:13pt;
	line-height:1.2em;
	font-family:'メイリオ',Meiryo,'ＭＳ ゴシック';
	color:#333333;
	width:100%;/* for IE */
	margin:0 auto;/* top right bottom left*/
	line-height:1.5;
	background:url("http://www.ishinomakinet.com/genki/css/img/002-006.gif") repeat #bccfee;
}

/*++++++++++++++++++++++
Text設定
++++++++++++++++++++++*/

/*文字色*/
.red { color:#ff0000; }


/*++++++++++++++++++++++
Image設定
++++++++++++++++++++++*/

/*imgにhoverすると透ける*/
img { border-style:none; }
a:hover img {
	-moz-opacity:0.5;
	opacity:0.5;
	filter:alpha(opacity=50);
}

/*clearfixとセットで使う*/
.f_l {
	float:left;
	margin-right:1em;
}
.f_r {
	float:right;
	margin-left:1em;
}
/*//clearfixとセットで使う*/

.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
}
.clearfix {
	zoom: 1;
}

/*++++++++++++++++++++++
他全体に対しての設定
++++++++++++++++++++++*/
/*borderの太さやpaddingの大きさをwidthに含める*/
* { box-sizing: border-box;
		-moz-box-sizing: border-box; }

/*IE7で文字拡大した時にレイアウト崩れが起きないおまじない*/
*{ letter-spacing: 0; }

/*listは、基本マーカーなし*/
ul li { list-style:none; }
/*++++++++++++++++++++++
コンテンツの枠
++++++++++++++++++++++*/
#wrap {
	position:relative;
	width:56.471em;/*960px*/
	max-height: 100%;
	margin:0 auto;
	padding:0 0 0 0;
	box-sizing:border-box;
}

/*業務以降の案内---------------------------------------*/
.migration {
	position:relative;
	width:100%;
	min-height:1300px;
	height:auto;
	margin:0;
	padding:0;
	background:#fff;
}
	.migration h1 {
		width:100%;
		margin:0;
		padding:0.5em 0;
		text-align:center;
		font-size:120%;
	}
	.migration img {
		display:block;
		width:100%;
		margin:0 auto;
	}
	.m-txt {
		width:90%;
		margin:0 auto 1em auto;
		padding-bottom:2em;
		text-align:justify;
		text-justify:inter-character;
		background:#fff;
	}
		.r-box {
			width:35%;
			margin:0 0 0 65%;
		}
/*-------------------------------------//業務以降の案内*/
	/*.container {
		position:relative;
		z-index:10;
		height:100%;
		margin-top:-1em;
		padding-top:1em;
		background:#fff;
		padding-bottom: 32768px;
		margin-bottom: -32768px;

	}*/
/*++++++++++++++++++++++
コンテンツ
++++++++++++++++++++++*/
	header {
		width:100%;
		margin:0;
		padding:0;
		background:#fff;
	}
		header span {
			width:100%;
			margin:0;
			padding:0;
			font-size:10pt;
		}
		header img {
			width:100%;
			height:auto;
		}
/*++++++++++++++++++++++
ナビゲーション
//上段下段共通
++++++++++++++++++++++*/
	header nav {
		width:100%;
		margin:-0.7em 0 0 0;
		padding:0.5em;
		box-sizing:border-box;

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+50,0099ff+100 */
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 50%, rgba(0,153,255,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(0,153,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(0,153,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0099ff',GradientType=0 ); /* IE6-9 */
	}
	header nav ul {
		height: 4em;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
		header nav ul li {
			width: 14.28%;
			height: 4em;
			margin: 0;
			padding: 0;
			text-align:center;
			line-height: 4em;
		}
		header nav ul li:nth-child(4) {
			padding: 0.5em 0 0 0;
			line-height: 1.5em;
		}
			header nav ul li a {
				display: block;
				height: 4em;
			}
			header nav ul li a {
				display: block;
				height: 3em;
			}
/*hoverエフェクト-------------------------------------------------------*/
			header nav ul li a,
			header nav ul li a:link,
			header nav ul li:nth-child(5) a,
			header nav ul li:nth-child(5) a:visited,
			header nav ul li:nth-child(5) a:active  { 
				color:#0066ff;
				text-decoration:none;
				padding:0;
			}
			header nav ul li a:hover {
				color:#fff;
				background:rgba(0,102,255,0.6);/*#0066ff;*/
				margin:0;
				padding:0;
				font-weight:bold;
			}
				header nav ul li:nth-child(5) a:hover {
					padding:0;
				}

	/*石巻復興商品*/

				header nav ul li:nth-child(2) a,
				header nav ul li:nth-child(2) a:visited,
				header nav ul li:nth-child(2) a:active {
					font-weight:bold;
					color:#ff0000;
				}
				header nav ul li:nth-child(2) a:hover {
					background:rgba(255,0,0,0.6);
					font-weight:bold;
					color:#fff;
				}


		footer nav.bottom-nav  ul li a {
			font-size:85%;
			margin:0;
			padding:1em;
			line-height:1.5;
			height:3em;
			text-align:center;
		}
			footer nav.bottom-nav  ul li a,
			footer nav.bottom-nav  ul li a:link,
			footer nav.bottom-nav  ul li a:visited,
			footer nav.bottom-nav  ul li a:active  { 
				color:#0066ff;
				text-decoration:none;
			}
			footer nav.bottom-nav  ul li a:hover {
				color:#0066ff;
				text-decoration:underline;
			}
/*++++++++++++++++++++++
indexコンテンツ
++++++++++++++++++++++*/
.top-contents-area {
	margin:0 1em;
}
	.top-contents-area img.main-img {
		width:100%;
		height:auto;
	}
	.story {
		margin-bottom:1em;
	}
		.story img {
			float:right;
		}
		.story:after {
			content: "";
			clear: both;
			display: block;
		}

	.activity-purpose {
		padding-top:1em;
		padding-bottom:1em;
		margin-bottom:1em;
		border-top:2pt solid #0000cc;
		border-bottom:2pt solid #0000cc;
	}
		.activity-purpose:after {
			content: "";
			clear: both;
			display: block;
		}
		.activity-purpose h1 {
			width:4.706em;/*80px;*/
			height:4.706em;/*80px;*/
			line-height:3em;
			text-align:center;
			padding:1em;
			margin:0 1em;
			color:#ffdd00;
			font-weight:bold;
			background:#0000cc;
			border-radius:50%;
			float:left;
		}
	.activities {
		margin-bottom:1em;
		padding-bottom:1em;
		border-bottom:2pt solid #0000cc;
	}
		.activities:after {
			content: "";
			clear: both;
			display: block;
		}
		.activities h1 {
			width:4.706em;/*80px;*/
			height:4.706em;/*80px;*/
			line-height:1em;
			text-align:center;
			padding:1.5em 1em 1em 1em;
			margin:0 1em;
			color:#ffdd00;
			font-weight:bold;
			background:#0000cc;
			border-radius:50%;
			float:left;
		}

/*++++++++++++++++++++++
BannerArea
++++++++++++++++++++++*/
.index-banner-area {
	margin:0 1em 1em 1em;
}
	.index-banner-area  img {
		width:100%;
		height:auto;
	}
.banner-area {
	margin:1em;
}
/*++++++++++++++++++++++
index　AddressArea
++++++++++++++++++++++*/
.address-area {
	margin:0 1em 1em 1em;
	padding-top:1em;
	text-align:center;
}
	.address-area  img {
		width:100%;
		height:auto;
	}

/*++++++++++++++++++++++
footer
++++++++++++++++++++++*/
footer {
	position:relative;
	z-index:20;
	width:100%;
	min-height:8em;
	bottom:0;
	left:0;
	background: #fff;
}
	footer nav.bottom-nav {
		width:100%;
		height: 3em;
		margin:0 0 0 0;
		padding: 1em 0;
		background:#fff;
		box-sizing: border-box;
	}
		footer nav.bottom-nav ul {
			height: 3em;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		footer nav.bottom-nav ul li {
			min-width: 14.28%;
			height: 3em;
			margin: 0;
			padding: 0 0.5em;
			text-align:center;
			line-height: 3em;
			border-right:1pt solid #ccc;
		}
		footer nav.bottom-nav ul li:nth-child(4) {
			height: 3em;
			line-height: 1.5em;
		}
	footer #copy {
		position: absolute;
		bottom: 0;
		right: 0;
		width:100%;
		height:2.5em;
		line-height:2.5em;
		text-align:center;
		background:#0099ff;
		color:#fff;
	}

/*++++++++++++++++++++++
report
++++++++++++++++++++++*/
.track_record-area {
	margin:1em;

}
	 .track_record-frame {
		width:100%;
		color:#000000;
		background:url(http://www.ishinomakinet.com/genki/css/img/report_back.jpg) repeat #f3eec5;/* クリーム色 */
		border:2pt solid #330000;
	}
		.track_record-frame h1 {
			width:85%;
			height:3em;
			padding:1em 1.5em 0.5em 1.5em;
			margin:0 auto 1em auto;
			text-align:center;
			font-weight:bold;
			line-height:1.2;
			border-bottom:2pt solid #330000;
		}
		.track_record-frame table {
			width:95%;
			height:100%;
			height:auto !important;
			margin:0 auto;
			border-collapse: collapse;
		}
			.track_record-frame table th {
				font-size:16px;
				padding:10px 5px;
				text-align:left;
			}
			.track_record-frame table td {
				padding:5px 0px;
				vertical-align:top;
				text-align:left;
			}
			.track_record-frame table td.year {
				width:13%;
				padding:5px;
				text-align:right;
			}
			.track_record-frame table td.month {
				width:7.5%;
				padding:5px;
				text-align:right;
			}

		.track_record-frame table table tr th {
			width:18%;
			font-weight:normal;
			vertical-align:top;
		}

		.record_img_box table {
			width:100%;
			color:#000000;
			background:url(http://www.ishinomakinet.com/genki/css/img/report_back.jpg) repeat #f3eec5;/* クリーム色 */
			border:2pt solid #330000;
			margin:0 auto;
		}
		.record_img_box table tr td {
			text-align:center;
			padding:1em;
		}
			.record_img_box table tr td img {
				margin:1em auto 0 auto;
			}
			span.thanks {
				display:block;
				width:100%;
				height:1.5em;
				line-height:1.5;
				padding:0.5em;
				margin:0 auto;
				background:#330000;
				color:#fff;
				text-align:center;
			}
.footer-banner-area {
	width:100%;
	height:100px;
}
	.footer-banner-area img {
		width:365px;
		height:100%;
	}
	.footer-banner-area img:first-child {
		margin-left:0.5em;
	}
/*++++++++++++++++++++++
intro
++++++++++++++++++++++*/
.intro-header-area {
	text-align:center;
	margin:0 auto;
}
		.intro-header-area  h1 {
			color:#0000cc;
			font-size:250%;
			font-weight:bold;
			text-shadow: #0099ff 2px 2px 0px, #0099ff -2px 2px 0px,
			             #0099ff 2px -2px 0px, #0099ff -2px -2px 0px;
		}
.intro-contents-area {
	margin:1em;
}
	.intro-contents-area h1.watashitachi {
		width:100%;
		height:2em;
		padding:0.5em;
		margin-bottom:1em;
		text-align:center;
		background:#0000cc;
		color:#ffdd00;
		font-weight:bold;
		line-height:1em;
		border-radius:1em 1em;
	}

/*++++++++++++++++++++++
company
++++++++++++++++++++++*/
.company h1,
.supporting-member h1 {
	width:80%;
	font-size:150%;
	margin:1em auto;
	padding:0.5em 0;
	border-top:3pt double #0099ff;
	border-bottom:3pt double #0099ff;
	text-align:center;
}
.company,
.supporting-member {
	margin-bottom:1em;
}
	.company table,
	.supporting-member table {
		width:95%;
		margin:0 auto;
		padding:0;
		border:1pt solid #666666;
		border-collapse: collapse;
		color:#003366;
	}
		.company table tr th,
		.supporting-member table tr th {
			padding:0.3em;
			background-color:#99ccff;
			border:1pt solid #666666;
		}
		.company table tr td,
		.supporting-member table tr td {
			padding:0.3em;
			border:1pt solid #666666;
		}

/*++++++++++++++++++++++
link
++++++++++++++++++++++*/
.link-area {
	margin:1em;
}
	.link-area h1 {
		width:80%;
		font-size:150%;
		margin:1em auto;
		padding:0.5em 0;
		border-top:3pt double #0099ff;
		border-bottom:3pt double #0099ff;
		text-align:center;
	}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PC向けサイトデザイン

960px以上のディスプレイサイズはレイアウトがPC用に変更される
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width: 960px) {
	.wrap {
		height:100%;
	}
		.wrap:after {
			content: "";
			clear: both;
			display: block;
		}
	.container {
		width:100%;
		max-height: 100%;
		overflow: hidden;
		background:#fff;
	}
	.category-navigation-area {
		width:22%;
		height:100%;
		float:left;
		background:#0099ff;
	}
		.category-navigation-frame {
			width:100%;
			min-height:1300px;
			margin:0 auto;
			padding:0 0 5em 0;
		}
		.category-navigation-frame img {
			margin:0 auto;
		}
		ul.cat-nav {
			width:100%;
			margin:0;
			padding:0;
		}
			ul.cat-nav li {
				width:100%;
				height:2em;
				color:#fff;
			}
			.category-navigation-frame h1 {
				width:100%;
				margin:0.5em auto;
				padding:0.5em;
				color:#fff;
				font-size:95%;
				text-align:center;
				background:#f7931e;
				border-radius:1.5em;
			}
				.topic_box ul li.date {
					width:28%;
					float:left;
				}
				.topic_box ul li.entry {
					width:72%;
					text-align:left;
					float:left;
				}

}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
タブレット向けサイトデザイン

768px以下のディスプレイサイズに適用
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 768px) {
	#wrap {
		position:relative;
		width:100%;
		margin:0 auto;
		padding:0 0 5em 0;
		background:#0099ff;/*sidebarの背景色をcontentsの高さにするため*/
		overflow: hidden;
		box-sizing:border-box;
	}
		.r-box {
			width:100%;
			text-align:center;
			margin:0;
		}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
スマホ向けサイトデザイン

480px以下のディスプレイサイズに適用
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 480px) {
		.r-box {
			width:100%;
			text-align:center;
			margin:0;
		}

}