* { margin: 0; padding: 0; box-sizing: border-box; /*word-break: break-all;*/}
ul,ol {list-style: none;}

table { border-collapse: collapse;}
	
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0;
}

/*-----------------------------------------------------------------
	font
-----------------------------------------------------------------*/

body,
input,
textarea,
select {
  font:18px Helvetica, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic',"メイリオ", Meiryo ,sans-serif;
  -webkit-text-size-adjust: none;
	line-height: 160%; 
}

/*-----------------------------------------------------------------
	link
-----------------------------------------------------------------*/

a {
	 color: #004098;
	 text-decoration: none;
	 outline: none;
}

a:hover,
a:hover img {
	 filter: alpha(opacity=90);
	 opacity:0.9;
}

/*-----------------------------------------------------------------
	共通CSS
-----------------------------------------------------------------*/

html {
	width: 100%;
	min-width: 1280px;
	height: 100%;
	color: #333;
	overflow-y: auto;
}

body {
	width: 100%;
	background: #fff;
	margin:0;
	text-align:center;
}

img {
	border:0;
	max-width: 100%;
}

input, textarea {
	 border: #ccc 1px solid;
	 font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

/* align */
.align_center { text-align: center!important;}
.align_left { text-align: left!important;}
.align_right { text-align: right!important;}

/* float */
.float_l { float: left;}
.float_r { float: right;}

/* vertical-align */
.valgn-t { vertical-align: top!important;}
.valgn-m { vertical-align: middle!important;}
.valgn-b { vertical-align: bottom!important;}

/* font */
.bold {font-weight: bold;}

/* color */
.red { color: #C11920;}
.blue { color: #2D69B3;}
.gray { color: #777;}
.water { color: #038cca;}
.white { color: #fff;}

/* margin */
.mb5 { margin-bottom: 5px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb45 { margin-bottom: 45px;}
.ml15 { margin-left: 15px;}
.mr15 { margin-right: 15px;}
.mt10 { margin-top: 10px;}
.mlmr10 { margin-left: 10px; margin-right: 10px;}

/* txt */
.txt11 { font-size: 61%;}
.txt12 { font-size: 66%;}
.txt13 { font-size: 72%;}
.txt14 { font-size: 77%;}
.txt15 { font-size: 83%;}
.txt16 { font-size: 88%;}
.txt20 { font-size: 111%;}
.txt24 { font-size: 133%;}

/* font */

.fnt-m { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.mfnt { font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}

/*-----------------------------------------------------------------
	全体
-----------------------------------------------------------------*/

#wrap {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

/* 各施設カラー（市民センター） */
.gotenyama-clr { background-color: #54302c;}
.sugawara-clr { background-color: #287c99;}
.kuzuha-clr { background-color: #528431;}
.tsuda-clr { background-color: #ff8415;}

/* 各施設カラー（図書館） */
.gotenyama-lib-clr { background-color: #9E5B53;}
.sugawara-lib-clr { background-color: #339CBF;}
.kuzuha-lib-clr { background-color: #69A83F;}
.tsuda-lib-clr { background-color: #FFAE1F;}

/*-----------------------------------------------------------------
	ヘッダー
-----------------------------------------------------------------*/

#hbg {
	width: 100%;
	height: 182px;
	border-bottom: #287c99 2px solid;
	text-align: center;
	position: relative;
}

#logo {
	height: 70px;
	position: absolute;
	top: 50px;
	left: 5%;
}

#logo img {
	height: 100%;
}

.h-link {
	width: 550px;
	position: absolute;
	top: 22px;
	right: 5%;
}

.h-link li {
	width: 32.7%;
	height: 40px;
	display: inline-block;
	line-height: 0.8em;
	margin: 0 0 6px;
	text-align: left;
	vertical-align: top;
}

.h-link li a {
	width: 100%;
	height: 40px;
	color: #fff;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	font-size: 66%;
	padding: 0 0 0 40px;
}

.icon-study {
	background-image: url(../images/icon_pen.png);
	background-position: 10px center;
	background-repeat: no-repeat;
}
.icon-lib {
	background-image: url(../images/icon_book.png);
	background-position: 10px center;
	background-repeat: no-repeat;
}

.w100 {
	width: 100%!important;
}

#hmenu {
	width: 100%;
	text-align: center;
	border-top: #287c99 2px solid;
	border-bottom: #287c99 2px solid;
	margin: 0 auto;
	letter-spacing: -.4em;
}

#hmenu li {
	border-right: #287c99 1px solid;
	display: inline-block;
	table-layout: fixed;
	text-decoration: none;
	letter-spacing: normal;
}

#hmenu li:first-child {
	border-left: #287c99 1px solid;
}

#hmenu li a {
	display: block;
	text-decoration: none;
	padding: 15px 40px;
}

#hmenu li a:hover {
	background: #f4f4f4;
}

/*-----------------------------------------------------------------
	TOPビジュアル
-----------------------------------------------------------------*/

#main_visual {
	width: 100%;
	height: auto;
	margin: 0 0 60px;
	position: relative;
}

#main_visual > img {
	width: 100%;
}

/*-----------------------------------------------------------------
	中央レイアウト
-----------------------------------------------------------------*/

#main {
	width: 1000px;
	margin: 20px auto 50px;
	overflow: hidden;
}

#main-left {
	width: 72%;
	float: left;
	text-align: left;
}

#main-right {
	width: 25%;
	float: right;
}

/*-----------------------------------------------------------------
	下段メニュー画面
-----------------------------------------------------------------*/

#pagetop {
	 width: 80px;
	 height: 60px;
  background: rgba(146,1,4,0.8);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99920104,EndColorStr=#9920104);
		line-height: 60px;
		position: fixed;
		bottom: 0;
		right: 60px;
		text-align: center;
		z-index: 1000;
}

#pagetop a {
	 width: 80px;
	 height: 80px;
		color: #fff;
		display: block;
		font-size: 30px;
		font-weight: bold;
		text-decoration: none;
	 width: 80px;
	 height: 60px;
}

#footer {
	width: 100%;
  text-align: center;
 	background: #eeeeee;
	font-size: 77%;
	margin: 0;
	position: relative;
	padding: 20px 0 0;
}

.copy-link,
.copy-link a {
	width: 300px;
	color: #fff;
	position: absolute;
	left: 15%;
}

.flink {
	position: absolute;
	right: 15%;
}

.copy {
	width: 80%;
	color: #333;
	margin: 30px auto 0;
	padding: 15px 0 5px;
}

/*-----------------------------------------------------------------
	TOP
-----------------------------------------------------------------*/

#top-menu {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	bottom: -60px;
	z-index: 100;
}

#top-menu li {
	display: inline-block;
	vertical-align: top;
}

#top-menu li:nth-of-type(even) {
	margin: 30px 20px 0;
}

#top-menu li:nth-of-type(3) {
	margin: 60px 0 0;
}

.h2-news {
	background: url(../images/icon_news.png) no-repeat left;
	border-bottom: #000 1px solid;
	font-size: 133%;
	font-weight: normal;
	margin: 0 0 10px;
	padding: 50px 0 10px 90px;
	text-align: left;
}
.top-news-dl {
	margin: 0 0 40px;
}

.top-news-dl dt {
	width: 28%;
	clear: left;
	float: left;
	padding: 5px;
	text-align: left;
}

.top-news-dl dt span {
	width: 80px;
	color: #fff;
	display: inline-block;
	font-size: 77%;
	line-height: 1em;
	margin: 0 15px 0 0;
	padding: 3px 5px;
	text-align: center;
}

.cat01 { background: #3bb222;}
.cat02 { background: #ff8308;}
.cat03 { background: #862FB8;}

.top-news-dl dd {
	border-bottom: #999999 1px dashed;
	padding: 5px 5px 5px 30%;
	text-align: left;
}

.tel-box {
	color: #fff;
	padding: 8px;
}

.tel-box table td {
	text-align: right;
	padding: 10px 20px;
}

.tel-box table td:nth-of-type(3) {
	font-size: 66%;
	text-align: left;
}

.tel-box table td:nth-of-type(3) p {
	background: url(../images/icon_tel.png) no-repeat;
	font-size: 300%;
	padding: 5px 0 5px 38px;
}

.right-menu li {
	border: #cccccc 1px solid;
	border-left: #287c99 5px solid;
	font-size: 88%;
	margin: 0 0 10px;
	text-align: left;
}

.right-menu li a {
	width: 250px;
	height: 76px;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 0 0 0 60px;
}

.icon-menu01 { background: #fff url(../images/icon_menu01.png) no-repeat 10px center;}
.icon-menu02 { background: #fff url(../images/icon_menu02.png) no-repeat 10px center;}
.icon-menu03 { background: #fff url(../images/icon_menu03.png) no-repeat 10px center;}
.icon-menu04 { background: #fff url(../images/icon_menu04.png) no-repeat 10px center;}
.icon-menu05 { background: #fff url(../images/icon_menu05.png) no-repeat 10px center;}
.icon-menu06 { background: #fff url(../images/icon_menu06.png) no-repeat 10px center;}
.icon-menu07 { background: #fff url(../images/icon_menu07.png) no-repeat 10px center;}