@charset "UTF-8";

/* =========================================================================
 top.css （トップページ　コンテンツ内要素の設定）

　目　次

　1.スライド、情報を探す
　2.スライド２（４つ横並び）
　3.お知らせ、更新情報、トピックス
　4.くらしの出来事
　5.目的から探す・各課から探す
　6.Facebook
　7.サイド
　8.災害情報RSS
  9.サイドバナー
========================================================================= */

/* -------------------------------------------------------------------------
 1.スライド、情報を探す
------------------------------------------------------------------------- */

/* スライド
---------------------------------------------------------------------- */
#top-slide {
	clear: both;
	float: left;
	width: 709px;
	margin: 20px 0;
	padding: 9px;
	border: 1px solid #CCC;
	border-bottom-color: #AAA;
}
/* new_bxslider */
#top-slide .bx-wrapper {
	position: relative;
}
/* new_bxslider */
#top-slide ul {
	margin: 0;
}
#top-slide li {
	width: 709px;
	padding: 0;
	background: none;
}
#top-slide .bx-prev,
#top-slide .bx-next {
	position: absolute;
	top: 106px;
	left: -29px;
	width: 42px;
	height: 42px;
	background: url(../images/top/slide_btn.png) no-repeat;
	text-indent: -9999px;
	outline: none;
	z-index: 9990;
}
#top-slide .bx-next {
	left: auto;
	right: -34px;
	background-position: -42px 0;
}
#top-slide .bx-prev:hover {
	background-position: 0 -42px;
}
#top-slide .bx-next:hover {
	background-position: -42px -42px;
}

/* 情報を探す
---------------------------------------------------------------------- */
#top-sagasu {
	float: right;
	margin: 20px 0;
	padding: 0 0 10px;
	background: #EFEFEF url(../images/top/sagasu_bg.png) no-repeat left bottom;
}
#top-sagasu h2 {
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
}
#top-sagasu ul {
/*	font-size: 12px;	*/
	margin: 0 0 0 14px;
}
#top-sagasu li {
	margin: 0 0 5px;
	padding: 0;
	background: none;
}

/* -------------------------------------------------------------------------
 2.スライド２（４つ横並び）
------------------------------------------------------------------------- */
#top-slide2 {
	clear: both;
	padding: 27px 38px 10px;
	background: #F5EFDB url(../images/top/slide2_bg.png) no-repeat 0 75px;
	overflow: hidden;
	border-radius: 15px;
}
/* new_bxslider */
#top-slide2 .bx-wrapper {
	position: relative;
}
/* new_bxslider */
#top-slide2 .bx-window {
	width: 906px;
	overflow: hidden;
}
/* new_bxslider */
#top-slide2 .bx-viewport {
	width: 906px !important;
	overflow: hidden !important;
}
/* new_bxslider */
#top-slide2 ul {
	width: 916px;
	margin: 0;
}
#top-slide2 li {
	width: 229px !important;
	float: left;
	margin: 0;
	padding: 0 0 15px;
	background: none;
}
#top-slide2 li img {
	margin: 0 0 10px;
	padding: 1px;
	background: #FFF;
	border: 5px solid #CCC;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#top-slide2 li span {
	display: block;
	margin: 0 15px 0 8px;
}
#top-slide2 li a:link {
	color: #333;
	text-decoration: none;
}
#top-slide2 li a:visited {
	color: #6B6B6B;
	text-decoration: none;
}
#top-slide2 li a:focus,
#top-slide2 li a:hover,
#top-slide2 li a:active {
	color: #000;
	text-decoration: underline;
}
#top-slide2 .bx-prev,
#top-slide2 .bx-next {
	position: absolute;
	top: 48px;
	left: -38px;
	width: 38px;
	height: 54px;
	background: url(../images/top/slide2_btn.png) no-repeat;
	text-indent: -9999px;
	outline: none;
}
#top-slide2 .bx-next {
	left: auto;
/*	right: -28px;*/
	right: -38px;	/* new_bxslider */

	background-position: -38px 0;
}
#top-slide2 .bx-prev:hover {
	background-position: 0 -54px;
}
#top-slide2 .bx-next:hover {
	background-position: -38px -54px;
}

/* -------------------------------------------------------------------------
 3.お知らせ、更新情報、トピックス
------------------------------------------------------------------------- */
.top-tabarea {
	clear: both;
	margin: 0 0 20px;
}
.top-tabarea h2 {
	margin: 0;
	text-align: center;
}
ul.top-tabarea-tab {
	width: 486px;
/*	font-size: 12px;	*/
	margin: 0;
	overflow: hidden;
}
ul.top-tabarea-tab li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	background: #FFF;
}
ul.top-tabarea-tab li.active {
	background: transparent;
}
ul.top-tabarea-tab li.active a {
	cursor: default;
}
ul.top-tabarea-tab li.active a img {
	visibility: hidden;
}
ul#top-tabarea1-tab {
	background: url(../images/top/tabarea1-tab_bg2.png) no-repeat;
}
#top-tabarea1-body {
	border: 1px solid #CCC;
	border-top: none;
	border-bottom-color: #AAA;
	border-radius: 0 0 6px 6px;
}
.top-tabarea1-content {
	clear: both;
}
.top-tabarea1-content dl {
	margin: 0 15px 5px;
	padding: 5px 0 0;
	line-height: 1.3;
	overflow: hidden;
}
.top-tabarea1-content dt {
	clear: both;
	float: left;
	padding: 14px 0 9px 5px;
}
.top-tabarea1-content dt img {
	float: left;
	margin: 0 5px 0 0;
}
.top-tabarea1-content dt span {
	width: 5em;
	float: left;
	margin: 0 15px 0 0;
	text-align: right;
}
.top-tabarea1-content dd {
	margin: 0 0 -1px;
	padding: 14px 0 15px 5px;
	border-bottom: 1px dotted #999;
}
.top-tabarea1-content dd img {
	margin: 0 0 0 6px;
	vertical-align: middle;
}
#top-topics dt {
	width: 5em;
	margin: 0 15px 0 0;
	padding: 14px 0 9px;
	text-align: right;
}
/* add */
#top-koushin dt {
	width: 5em;
	margin: 0 15px 0 0;
	padding: 14px 0 9px;
	text-align: right;
}
/* add*/
p.top-tabarea-list {
	margin: 0;
	text-align: center;
}
p.top-tabarea-list a {
	display: block;
	padding: 8px 2px;
	background: #F7F7F7;
	background: -moz-linear-gradient(top, #F7F7F7, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#EEE));
	border-top: 2px solid #F79929;
	border-radius: 0 0 6px 6px;
}
p.top-tabarea-list a:link {
	color: #333;
	text-decoration: none;
}
p.top-tabarea-list a:visited {
	color: #6B6B6B;
	text-decoration: none;
}
p.top-tabarea-list a:focus,
p.top-tabarea-list a:hover,
p.top-tabarea-list a:active {
	color: #000;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 4.くらしの出来事
------------------------------------------------------------------------- */
#top-kurashi {
	clear: both;
	margin: 0 0 20px;
}
#top-kurashi h2 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
#top-kurashi ul {
	margin: 0;
	padding: 10px 0 5px 15px;
	background: #F9F9F9;
	border: 1px solid #CCC;
	border-top: none;
	overflow: hidden;
	border-radius: 0 0 10px 10px;
}
#top-kurashi ul li {
	float: left;
	padding: 0 10px 10px 0;
	background: none;
}

/* -------------------------------------------------------------------------
 5.目的から探す・各課から探す
------------------------------------------------------------------------- */
ul#top-tabarea2-tab {
	background: url(../images/top/tabarea2-tab_bg.png) no-repeat;
}
#top-tabarea2-body {
	border: 1px solid #CCC;
	border-top: none;
	overflow: hidden;
	border-radius: 0 0 6px 6px;
}
.top-tabarea2-content {
	clear: both;
}
#top-mokuteki table,
#top-kakuka table {
	width: 444px;
	margin: 15px;
}
#top-mokuteki th,
#top-kakuka th {
	padding-right: 15px;
	padding-left: 15px;
	border-bottom: 2px solid #7FC8D7;
	white-space: nowrap;
}
#top-mokuteki tr:last-child th,
#top-kakuka tr:last-child th {
	border-bottom: 1px solid #CCC;
}
#top-mokuteki td,
#top-kakuka td {
	color: #AAA;
	padding-left: 15px;
	border-bottom: 2px solid #7FC8D7;
	line-height: 1.7;
}
#top-mokuteki tr:last-child td,
#top-kakuka tr:last-child td {
	border-bottom: 1px solid #CCC;
}

/* -------------------------------------------------------------------------
 6.Facebook
------------------------------------------------------------------------- */
ul#top-tabarea3-tab {
	background: url(../images/top/tabarea3-tab_bg.png) no-repeat;
}
#top-tabarea3-body {
	padding: 15px 0 15px 15px;
	background: #FFF;
	border: 1px solid #CCC;
	border-top: none;
	border-radius: 0 0 6px 6px;
}
.top-tabarea3-content {
	clear: both;
	height: 300px;	/* Facebookコードのdata-heightと同じ値 */
}

/*ソーシャルボタン*/
#socialbtn {
	clear: both;
	margin: 0;
	padding: 10px 12px 7px 0;
	overflow: hidden;
}
#socialbtn-inner {
	float: right;
	margin: 0;
	padding: 0;
}
#wcv_sys_edit_pageeditarea #socialbtn {
	width: 210px;
}
#likebtnarea,
#tweetbtnarea,
#sharebtnarea {
	float: left;
	margin: 0;
	padding: 0 0 0 10px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 7.サイド
------------------------------------------------------------------------- */
.side-group {
	margin: 0 0 20px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.side-group h2 {
	margin: 0 0 10px;
	padding: 0;
	background: none;
	border: none;
}
.side-group p {
	margin: 0 10px 10px;
	line-height: 1.2;
}
.side-group ul {
	line-height: 1.2;
}
.side-group li a:link,
ul#side-listnavi li a:link,
p#side-event-link a:link {
	color: #333;
	text-decoration: none;
}
.side-group li a:visited,
ul#side-listnavi li a:visited,
p#side-event-link a:visited {
	color: #757575;
	text-decoration: none;
}
.side-group li a:focus,
.side-group li a:hover,
.side-group li a:active,
ul#side-listnavi li a:focus,
ul#side-listnavi li a:hover,
ul#side-listnavi li a:active,
p#side-event-link a:focus,
p#side-event-link a:hover,
p#side-event-link a:active {
	color: #E00000;
	text-decoration: underline;
}

/* ようこそ！砂川市へ
 * ---------------------------------------------------------------------- */
#side-youkoso {
	background: #EBFBE5;
	border: 2px solid #AFD774;
}
#side-youkoso ul {
	margin: 0 0 12px 5px;
	overflow: hidden;
}
#side-youkoso li {
	float: left;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
#side-youkoso li a {
	width: 90px;
	padding: 7px 0 7px 15px;
	background: url(../images/top/side-group_li_bg.png) no-repeat 4px 7px;
	display: block;
}
#side-youkoso p.side-group-link a {
	display: block;
	padding: 7px 15px;
	background: #FFF;
	border: 2px solid #80C767;
	border-radius: 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#side-youkoso p.side-group-link {
	margin: 0 20px 15px;
	text-align: center;
}

/* WEB市長室
---------------------------------------------------------------------- */
#side-shichou {
	border: 3px solid #ADD9E3;
}
#side-shichou h2 {
	margin: 0 0 15px;
}
p#side-shichou-photo {
	float: right;
	margin: 0 10px 15px 0;
}
p#side-shichou-photo-bnr img {
	box-shadow: 0px 0px 1px 0 #CCC;
	margin-bottom: 15px;
}
#side-shichou ul {
	width: 128px;
	float: left;
	margin: 12px 0 5px 15px;
}
#side-shichou h3 {
	margin: 0 10px 10px;
	padding: 6px 3px;
	background: #C5E4EB;
	border: none;
	text-align: center;
}
p#side-shichou-hizuke {
	font-size: 90%;
	margin: 0 10px 3px 18px;
	line-height: 1.1;
}
#side-shichou h4 {
	font-size: 120%;
	margin: 0 10px 12px 18px;
	padding: 0;
	border: none;
}
p#side-shichou-img {
	margin: 0 0 8px;
	text-align: center;
}
p#side-shichou-img img {
	height: auto;
	width: 187px;
}
p#side-shichou-honbun {
/*
	margin: 0 15px 16px 20px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
*/
	margin: 0 15px 16px 20px;
	line-height: 1.4;
	overflow: hidden;
	height: 5.6em;
	position: relative;
}
p#side-shichou-honbun:before,
p#side-shichou-honbun:after {
	background: #FFF;
	position: absolute;
}
p#side-shichou-honbun:before {
	content: "...";
	top: 4.15em;
	right: 1px;
	padding-left: 5px;
}
p#side-shichou-honbun:after {
	content: "";
	height: 100%;
	width: 100%;
}

#side-shichou .side-list {
	text-align: center;
}
#side-shichou .side-list a {
	display: block;
	padding: 8px 2px;
	background: #F7F7F7;
	background: -moz-linear-gradient(top, #F7F7F7, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#EEE));
	border: 1px solid #CCC;
	border-radius: 6px;
}


/* すながわTopics
---------------------------------------------------------------------- */
#side-topics {
	border: none;
}
#side-topics h2 {
	margin: 0;
}
#side-topics #side-topics-content {
	border: 1px solid #CCC;
	border-width: 0 1px;
	padding: 10px 0 0 0;
}
#side-topics #side-topics-content #side-topics-img  {
	text-align: center;
	margin: 0 0 10px;
}
#side-topics #side-topics-content #side-topics-img a img {
	width: 180px;
	height: auto;
	border: 5px solid #FFF;
	box-shadow: 0px 0px 3px 1px #BBB;
}
#side-topics #side-topics-content #side-topics-hizuke {
	border: none;
	margin: 0 20px;
	padding: 0;
}
#side-topics #side-topics-content h3 {
/*	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/
	background: transparent;
	border: medium none;
	font-size: 140%;
	margin-bottom: 10px;
	margin-top: 0;
	padding: 0;
}
#side-topics #side-topics-content #side-topics-honbun {
	margin: 0 13px;
	padding: 0 0 10px;
}
#side-topics .side-list {
	margin: 0;
	text-align: center;
}
#side-topics .side-list a {
	display: block;
	padding: 8px 2px;
	background: #F7F7F7;
	background: -moz-linear-gradient(top, #F7F7F7, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#EEE));
/*	border-top: 2px solid #71ACF6;*/
	border-style: solid;
	border-width: 3px 1px 1px 1px;
	border-color: #71ACF6 #CCC #CCC #CCC;
	border-radius: 0 0 6px 6px;
	
}

/* リストナビ
---------------------------------------------------------------------- */
ul#side-listnavi {
	margin: 0 0 20px;
	background: url(../images/top/side-listnavi_bg.gif) repeat-y;
	border: 1px solid #CCC;
	border-bottom: none;
	line-height: 1.2;
	overflow: hidden;
}
ul#side-listnavi li {
	float:left;
	padding: 0;
	background: none;
}
ul#side-listnavi li a {
	width: 188px;
	display: block;
	padding: 12px 5px 12px 28px;
	background: url(../images/top/side-listnavi_li_bg.gif) no-repeat 0 14px;
	border-bottom: 1px solid #CCC;
}

/* バナーエリア
---------------------------------------------------------------------- */
.side-banner {
	padding: 0 0 12px;
}
.side-banner p {
	margin: 0 0 8px;
}

/* 人口と世帯
---------------------------------------------------------------------- */
#side-jinkou {
	border: 2px solid #C8C8C8;
	border-radius: 10px;
}
#side-jinkou h2 {
	margin: 0 0 5px;
}
#side-jinkou table {
	width: 199px;
	margin: 0 10px 10px;
	border: none;
}
#side-jinkou th {
	padding: 6px 0 6px 10px;
	background: #FFF;
	border: none;
	border-bottom: 2px dotted #CCC;
}
#side-jinkou td {
	padding: 6px 0;
	border: none;
	border-bottom: 2px dotted #CCC;
	text-align: center;
}
tr#side-jinkou-otoko {
	color: #06C;
}
tr#side-jinkou-onna {
	color: #C00;
}
#side-jinkou p {
	margin: 0 0 15px;
	text-align: center;
}

/* 防災・緊急情報
---------------------------------------------------------------------- */
#side-bousai {
	background: #FEFAFA;
}
#side-bousai h2{
	margin: 0 0 7px;
	border-bottom: 4px solid #C00;
}
#side-bousai ul {
	margin: 0 10px 7px;
	overflow: hidden;
}
#side-bousai li {
	margin: -1px 0 0;
	padding: 0;
	background: none;
	border-top: 1px dotted #999;
}
#side-bousai li a {
	width: 181px;
	display: block;
	padding: 9px 0 9px 20px;
	background: url(../images/top/side-bousai_li_bg.gif) no-repeat 6px 12px;
}
#side-bousai li a:link {
	color: #333;
}
#side-bousai li a:visited {
	color: #707070;
}
#side-bousai li a:focus,
#side-bousai li a:hover,
#side-bousai li a:active {
	color: #E00000;
}

/* 広報すながわ
---------------------------------------------------------------------- */
#side-kouhou {
	background: url(../images/top/side-kouhou_bg.png) no-repeat 1px top;

	border-width: 0;
}
#side-kouhou h2 {
/*	margin: 20px 0 15px 20px;*/

	margin: 0;
	padding: 20px 0 15px 20px;
	border: 1px solid #CCC;
	border-width: 1px 1px 0;
}
p#side-kouhou-img {
/*	margin: 0 0 18px;*/
	margin: 0;
	padding: 10px 0 18px;
	text-align: center;

	border: 1px solid #CCC;
	border-width: 0 1px;
}
p#side-kouhou-img img {
	border: 1px solid #444;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
	width: 140px;
	height: auto;
}
p#side-kouhou-text {
/*	margin: 0 11px 18px;*/
	margin: 0;
	padding: 0 11px 18px;
	text-align: center;
	line-height: 1.4;

	border: 1px solid #CCC;
	border-width: 0 1px;
}
#side-kouhou .side-list {
	margin: 0;
	text-align: center;
}
#side-kouhou .side-list a {
	display: block;
	padding: 8px 2px;
	background: #F7F7F7;
	background: -moz-linear-gradient(top, #F7F7F7, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#EEE));
/*	border-top: 2px solid #71ACF6;*/
	border-style: solid;
	border-width: 3px 1px 1px 1px;
	border-color: #2F825C #CCC #CCC #CCC;
/*	border-radius: 0 0 6px 6px;*/
}

/* イベントカレンダー
---------------------------------------------------------------------- */
#side-event {
	background: #FEF1ED;
}
#side-event h2 {
	margin: 0 0 10px;
	border-bottom: 5px solid #EC3C00;
}
#side-event-body {
	padding: 0;
	text-align: center;
}
p#side-event-link {
	margin: -5px 20px 15px;
	text-align: center;
}
p#side-event-link a {
	display: block;
	padding: 7px 15px;
	background: #FFF;
	border: 2px solid #EC3C00;
	border-radius: 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 注目のキーワード
---------------------------------------------------------------------- */
#side-keyword h2 {
	margin: 0 0 10px;
	padding: 10px 0 0;
	border: none;
}
#side-keyword ul {
	margin: 0 10px 10px;
	overflow: hidden;
}
#side-keyword li {
	margin: -1px 0 0;
	padding: 0;
	background: none;
	border-top: 1px dotted #999;
}
#side-keyword li a {
	width: 169px;
	display: block;
	padding: 11px 0 10px 32px;
	background-repeat: no-repeat;
	background-position: 3px 9px;
}
#side-keyword li a#side-keyword-1 {
	background-image: url(../images/top/side-keyword-1_bg.png);
}
#side-keyword li a#side-keyword-2 {
	background-image: url(../images/top/side-keyword-2_bg.png);
}
#side-keyword li a#side-keyword-3 {
	background-image: url(../images/top/side-keyword-3_bg.png);
}
#side-keyword li a#side-keyword-4 {
	background-image: url(../images/top/side-keyword-4_bg.png);
}
#side-keyword li a#side-keyword-5 {
	background-image: url(../images/top/side-keyword-5_bg.png);
}

/* -------------------------------------------------------------------------
 8.災害情報RSS
------------------------------------------------------------------------- */
/*
.top-saigai {
	background: #fdf5f5 none repeat scroll 0 0;
	border: 2px solid #d63333;
	margin: 0 0 20px;
	clear: both;
}
.top-saigai h2 {
	background: #d63333 none repeat scroll 0 0;
	border-top: medium none;
	border-bottom: 1px solid #bbb;
	color: #fff;
	text-align: center;
	margin: 0 0 15px;
	padding: 10px 5px;
}
.top-saigai h2 img {
	margin: 0 10px 0 0;
}
.top-saigai p {
	font-size: 120%;
	font-weight: bold;
	line-height: 1.3;
	margin: 0 20px 20px;
}
*/

.top-saigai {
	background: #fbf1ed none repeat scroll 0 0;
	border: 3px solid #e58080;
	clear: both;
	margin: 20px 0 0;
	padding: 0 15px 9px;
}
.top-saigai a:link {
	color: #333;
}
.top-saigai a:visited {
	color: #7d7d7d;
}
.top-saigai a:hover, .top-saigai a:active, .top-saigai a:focus {
	color: #c30;
}
.top-saigai h2 {
	border: medium none;
	color: #c00;
	nt-size: 130%;
	line-height: 1.2;
	margin: 15px 0 7px;
	padding: 0;
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.top-saigai h2 img {
	margin: 0 6px 0 0;
}
.top-saigai p {
	color: #c00;
	font-size: 110%;
	font-weight: bold;
	line-height: 1.3;
	margin: 0 4px 7px;
}
.top-saigai p img {
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: middle;
}
.top-saigai ul {
	font-size: 110%;
	line-height: 1.2;
	margin: 0;
}
.top-saigai li {
	background: rgba(0, 0, 0, 0) url("../images/base/saigai_li_bg.gif") no-repeat scroll 2px 3px;
	border-bottom: 1px dotted #777;
	margin: 0 4px 7px;
	padding: 0 0 7px 19px;
}
.top-saigai li img {
	margin-left: 5px;
	vertical-align: middle;
}




#information:after {
	content: "";
	display: block;
	clear: both;
}
#information #left {
	float: left;
	width: 476px;
	margin-right: 30px;
}
#information #center {
	float: left;
	width: 223px;
}
#information #right {
	float: right;
	width: 223px;
}


/* -------------------------------------------------------------------------
 9.サイドバナー
------------------------------------------------------------------------- */

#random-banner{
	margin-bottom: 20px;
}