@charset "utf-8";
/*------------------------------------------------------------------------------
[1] トップページレイアウト
[2] 詳細デザイン
[3] 防災情報エリア（スマホ更新）　CKエディタ入力
------------------------------------------------------------------------------*/
/*******************************************************************************
[1] トップページレイアウト
*******************************************************************************/
/*==============================================================================
		配置
==============================================================================*/
#toppagebody #content3{
	background:#e8f6ff;
	width:100%;
}
#topgnavibg{
	margin-bottom:20px;
}
#topcontent{
	width:950px;
	margin:0px auto;
}
#toppagebody #content3 #sad{
	width:950px;
	margin:0px auto;
}
/*******************************************************************************
[2] 詳細デザイン
*******************************************************************************/
#kinkyuarea{
	margin: 30px auto 10px auto;
	width:950px;
}
#kinkyuarea #kinkyu-tw{
	margin-bottom:0px;
}
/*==============================================================================
	スクロールメニュー（トップページ、汎用トップ）
==============================================================================*/
#pickupbg{
	padding:20px 0px;
	width:100%;
	background:#e8f6ff;
}
#pickup{
	margin:0px auto;
	width:950px;
	text-align:left;
}
.main_view{
	width:950px;
}
/*------------------------------------------------------------------------------
	スクロールメニュー【A】画像のみ
------------------------------------------------------------------------------*/
/*　メイン枠
------------------------------------------------------------------------------*/
#scroll_a.main_view{
	height:282px;
}
#scroll_a .window{
	width:950px;
	height:260px;
}
#scroll_a .main{
	width:950px;
	height:260px;
}
#scroll_a .main p.photoleft{
	width:950px;
	height:260px;
}
/*　詳しく見る
------------------------------------------------------------------------------*/
#scroll_a .more{
	right:8px;
	top:8px;
	bottom:auto;
	font-size:95%;
}
/*　停止・再生ボタン
------------------------------------------------------------------------------*/
#scroll_a p.btn{
	margin:0px;
	padding:0px;
	left:0px;
	top:260px;
	border:1px solid #CCC;
	box-sizing:border-box;
	line-height:1.0;
}
/*　番号ボタン
------------------------------------------------------------------------------*/
#scroll_a .paging{
	width:895px;
	left:55px;
	top:260px;
	background:#FFF;
	border:1px solid #CCC;
	border-left:none;
	box-sizing:border-box;
	line-height:1.0;
}
#scroll_a .paging li{
	margin:0px;
	border-right:1px solid #CCC;
}
/*==============================================================================
	いざというとき・検索
==============================================================================*/
#top{
	width:950px;
	margin:0px auto 20px auto;
}
/*------------------------------------------------------------------------------
	検索
------------------------------------------------------------------------------*/
#topsitesearch{
	margin-bottom:20px;
	min-height: 75px;
	background:#FFF;
	border-bottom:1px solid #CCC;
}
#topsitesearch h2{
	padding:18px 5px 18px 5px;
	color:#FFFFFF;
	background:#012166 url(images/top/topsiteserch_bg.png) no-repeat left top;
	width:200px;
	font-size:90%;
	text-align:center;
	line-height:1.2;
	box-sizing:border-box;
	float:left;
}
#topsitesearch h2 span.tssearch{
	font-size:180%;
	display:block;
}
#topsitesearch form{
	margin:18px 8px 18px 18px;
	display:inline-block;
}
#topsitesearch input{
	vertical-align:middle;
}
#topsitesearch #key{
	padding: 4px 8px 5px 8px!important;
	width:540px;
    display: inline-block;
	font-size:130%;
	border-color:#CCC!important;
}
#topsitesearch input#sitebtn{
    margin: 0px;
}
#topsitesearch img{
	vertical-align:middle;
}
#topsitesearch p.howto{
	margin-left:0px;
	display:inline-block;
	*display: inline;  
    *zoom: 1;  
	vertical-align:middle;
}
/*------------------------------------------------------------------------------
	いざというときに
------------------------------------------------------------------------------*/
#emergency{
	min-height: 75px;
	background:#FFF url(images/top/emergencybg_bg.png) repeat-y left top;
	border-bottom:1px solid #CCC;
}
#emergency h2{
	padding:18px 5px 18px 5px;
	color:#FFFFFF;
	background:#A01313 url(images/top/emergency_bg.png) no-repeat left top;
	width:200px;
	font-size:90%;
	text-align:center;
	line-height:1.2;
	box-sizing:border-box;
	float:left;
}
#emergency h2 span.emer{
	font-size:180%;
	display:block;
}
#emergency ul{
	list-style-type:none;
	box-sizing: border-box;
	float:left;
	width: 750px;
	min-height: 75px;
	background: #FFF;
}
#emergency ul li{
	display:inline-block;
	border-right:1px dotted #A01313;
	box-sizing: border-box;
	font-size:120%;
	min-height: 75px;
}
#emergency ul li a{
	padding:20px 35px;
	display:block;
	color:#A01313;
}
#emergency ul li.imglink{
	background:none;
	border:none;
	display:block;
	margin:5px;
}
#emergency ul li.imglink a{
	padding:5px;
}
/*==============================================================================
		サイドにラインのある見出し／ついて／取り組み／リンク／
==============================================================================*/
h2.headtitle{
	margin:0px auto 10px auto;
	width:370px;
	display: -webkit-flex;/*Safari*/
	display: -webkit-box;/*Android*/
	display: flex;   
	-webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
 	font-size:140%;
 	text-align: center; /* for no-flexbox browsers */
}
h2.headtitle:before,
h2.headtitle:after{
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}
h2.headtitle:before {
    margin-right: 0.5em;
}
h2.headtitle:after {
    margin-left: 0.5em;
}
/* IE10以下 */
h2.headtitle{
	display:block\9;
}
/*==============================================================================
		お役立ちリンク
==============================================================================*/
#lifeinfo{
	margin-bottom:30px;
}
#lifeinfo ul{
	margin-bottom: 30px;
	float: left;
	list-style-type:none;
}
#lifeinfo ul li{
	float: left;
	box-sizing: border-box;
	border-top:1px solid #CCC;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
#lifeinfo ul li:first-child,
#lifeinfo ul li:nth-child(9),
#lifeinfo ul li:nth-child(17){
	border-left:1px solid #CCC;
}
#lifeinfo ul li:nth-child(n+9) {
	border-top:none;
}
/*==============================================================================
		トピックス
==============================================================================*/
#topics{
	margin-bottom:30px;
	width:550px;
	float:left;
	zoom:1;
}
#topics ul#tab{
	list-style-type:none;
	zoom:1;
}
#topics ul#tab li{
	margin:0px 3px 0px 0px;
	width:180px;
	float:left;
}
#topics ul#tab li:last-child{
	margin-right: 0px;
	width:184px;
}
#topics ul#tab li a{
	padding:8px 5px 4px 5px;
	display:block;
	box-sizing: border-box;
	color:#333;
	font-size:130%;
	font-weight:bold;
	background:#FFF;
	text-align:center;
	border:2px solid #FFF;
	border-bottom:none;
	text-decoration:none;
}
#topics ul#tab li a:hover{
	background:#CEE9FB url(images/top/bg_check.gif) repeat left top;
}
#topics ul#tab li.ui-tabs-active a{
	background:#CEE9FB url(images/top/bg_check.gif) repeat left top;
}
#tmenu{
	margin:-2px 0px 0px 0px;
	padding:5px;
	background:#CEE9FB url(images/top/bg_check.gif) repeat left top;
	border:2px solid #FFF;
}
#tmenu ul{
	padding:15px 5px 1px 10px;
	width:534px;
	background:#FFFFFF;
	box-sizing:border-box;
	list-style-type:none;
}
#tmenu ul li{
	margin:0px 0px 12px 0px;
	padding:0px 0px 0px 18px;
	font-size:110%;
	background:url(images/top/mark_topics.png) no-repeat left 6px;
}
#tmenu ul li span.date{
	width:80px;
	float:left;
	color:#666666;
}
#tmenu ul li span.newsli{
	width:410px;
	float:left;
}
#topics ul.topicsdetail {
    margin: 0px 0px 0px 0px;
    padding:0px 18px 10px 0px;
	clear: both;
    text-align: right;
}
#topics ul.topicsdetail li {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 22px;
    display: inline;
    clear: none;
    background: url(images/top/news.png) no-repeat left center;
    border: none;
}
#topics ul.topicsdetail li.rss {
	padding: 0px 0px 0px 18px;
    background: url(images/top/rss.png) no-repeat left center;
}
/*==============================================================================
		つくば市について
==============================================================================*/
#aboutcity{
	margin-bottom:30px;
	width:370px;
	float:right;
}
#aboutcity h2.headtitle{
	width:370px;
}
#aboutcity ul{
	margin-bottom:5px;
	list-style-type:none;
}
#aboutcity ul li{
	margin-right:5px;
	margin-bottom:10px;
	display:inline-block;
}
#aboutcity ul li:nth-child(2n){
	margin-right:0px;
}
/*------------------------------------------------------------------------------
	人口・世帯
------------------------------------------------------------------------------*/
.population{
	padding:10px;
	box-sizing:border-box;
	background:#FFF;
	border-bottom:1px solid #CCC;
}
.population h3{
	margin-bottom:8px;
}
.population h3 span.current{
	margin-left:15px;
	font-weight:normal;
	font-size:90%;
}
.population dl{
	margin-bottom:8px;
	clear:both;
}
.population dl dt{
	margin-right:8px;
	margin-bottom:3px;
	padding:8px 5px;
	float:left;
	clear:left;
	width:60px;
	color:#FFF;
	background:#666;
}
.population dl dd{
	margin-bottom:3px;
	float:left;
	font-size:90%;
}
.population dl dd:last-child{
	margin-right:0px;
}
.population dd span.count{
	margin-right:2px;
	font-weight:normal;
	font-size:160%;
}
.population p{
	width:50%;
	float:right;
	border:1px solid #CCC;
}
.population p a{
	padding:2px 5px 1px 25px;
	display:block;
	color:#333;
	background: url(images/top/mark_aboutcity.png) no-repeat left 8px center;
	text-decoration:none;
}
/*==============================================================================
		つくば市の取り組み
==============================================================================*/
#tscroll{
    margin: 0px auto 30px auto;
    width: 950px;
    position: relative;
    z-index:0;
    clear:both;
	box-sizing: border-box;
}
#topicsroll {
    list-style: none;
    cursor: pointer;
    display: block;
}
#topicsmenu {
	margin:0px auto;
    padding: 0px 25px 0px 25px;
    position: relative;
    text-align:left;
}
#topicsmenu ul {
    margin: 0px auto;
    list-style: none;
}
#topicsmenu ul li:first-child{
	margin-left:20px;
}
#topicsmenu ul li {
    margin-right: 20px;
    width: 200px;
    float: left;
    _display: inline;
	box-sizing:border-box;
}
#topicsmenu ul li img{
	border:1px solid #CCC;
}
#topicsmenu img.external{
    margin-bottom:8px;
	border:none;
}
/*------------------------------------------------------------------------------
	コントロールボタン
------------------------------------------------------------------------------*/
#topicsroll li img {
    vertical-align: bottom;
}
#topicsroll li#forward {
	position: absolute;
    top: 80px;
    left: 0px;
    z-index: 999;
}
#topicsroll li#back {
	position: absolute;
    top: 80px;
    right: 0px;
    z-index: 999;
}
#tscroll .tmenubtn{
	position:absolute;
	bottom:-25px;
	left:0px;
}
#tscroll .tmenubtn p{
	line-height: 0;
	border:1px solid #CCC;
}
#tscroll .tmenubtn button{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	appearance: none;
	line-height: 1.0;
}
/*==============================================================================
		リンク
==============================================================================*/
#link{
	padding-top:30px;
	margin-bottom:30px;
}
#link ul{
    list-style: none;
}
#link ul li{
	margin-right:3px;
	margin-left:5px;
	margin-bottom:10px;
	display:inline-block;
	box-sizing:border-box;
}
#link ul li:nth-child(6n){
	margin-right:0px;
}
/*==============================================================================
		バナー広告
==============================================================================*/
#toppagebody #sad{
	margin-bottom:30px;
	text-align:center;
	width:950px;
	clear:both;
	border:none;
	background-color:transparent;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
#toppagebody #sad h2{
	margin:8px 0px 8px 85px;
	padding:0px;
	font-size:100%;
	font-weight:normal;
	border:none;
	background:transparent;
	float:left;
	text-align:left;
}
#toppagebody #sad p{
	margin:8px 0px 8px 5px;
	float:left;
}
#toppagebody #sad ul{
	margin:3px 60px 5px 60px;
	list-style-type:none;
	text-align:center;
	clear:both;
}
#toppagebody * html #sad{
	padding-bottom:10px;
}
#toppagebody #sad ul li{
	margin:0px 2px 2px 2px;
	float:none;
}
/*------------------------------------------------------------------------------
		緊急情報
------------------------------------------------------------------------------*/
.kinkyu{
	margin:0px 0px 30px 0px;
	padding:0px 0px 6px 0px;
	border:1px solid #A01313;
	background:#FFFFFF;
}
.kinkyu h2{
	margin:1px 1px 10px 1px;
	padding:8px 10px 8px 10px;
	font-size:110%;
	color:#FFFFFF;
	background:#A01313;
}
.kinkyu h3{
	margin:0px 12px 10px 12px;
	padding:8px 5px 4px 5px;
	border-left:6px solid #A01313;
	border-bottom:1px solid #CCCCCC;
	font-size:100%;
}
.kinkyu p{
	padding:0px 15px 5px 15px;
}
.kinkyu ul{
	padding:0px 15px 5px 15px;
	list-style-type:none;
}
.kinkyu ul li{
	margin-bottom:3px;
	padding-left:15px;
	background:url(images/top/mark_kinkyu.png) no-repeat left 6px;
}
/*------------------------------------------------------------------------------
		防災情報エリア（スマホ緊急情報）
------------------------------------------------------------------------------*/
.smpkinkyu{
	margin:0px 0px 30px 0px;
	padding:0px 0px 6px 0px;
	border:1px solid #A01313;
	background:#FFFFFF;
}
.smpkinkyu h2{
	margin:1px 1px 10px 1px;
	padding:8px 10px 8px 10px;
	font-size:110%;
	color:#FFFFFF;
	background:#A01313;
}
.smpkinkyu h3{
	margin:0px 12px 10px 12px;
	padding:5px 5px 5px 5px;
	border-left:6px solid #A01313;
	border-bottom:1px solid #CCCCCC;
	font-size:100%;
}
.smpkinkyu p.textright{
	padding:0px 15px 5px 15px;
}
.smpkinkyu ul.objectlink{
	margin:0px 0px 10px 0px;
	padding:0px 15px 5px 15px;
	list-style:none;
	line-height:1.8;
}
.smpkinkyu ul.objectlink li{
	margin-bottom:3px;
	padding-left:15px;
	background:url(images/top/mark_kinkyu.png) no-repeat left 4px;
}
/*------------------------------------------------------------------------------
		重要なお知らせ
------------------------------------------------------------------------------*/
.important{
	margin:0px 0px 30px 0px;
	padding:0px 0px 6px 0px;
	border:1px solid #CCCCCC;
	background:#FFFFFF;
}
.important h2{
	margin:1px 1px 10px 1px;
	padding:8px 10px 8px 10px;
	font-size:110%;
	background:#002e45;
	color:#FFFFFF;
}
.important h3{
	margin:0px 12px 10px 12px;
	padding:8px 5px 4px 5px;
	border-left:6px solid #002e45;
	border-bottom:1px solid #CCCCCC;
	font-size:100%;
}
.important p{
	padding:0px 15px 5px 15px;
}
.important ul{
	padding:0px 15px 5px 15px;
	list-style-type:none;
}
.important ul li{
	margin-bottom:3px;
	padding-left:15px;
	background:url(images/top/mark_important.png) no-repeat left 6px;
}
/*******************************************************************************
[3] 防災情報エリア（スマホ更新）　CKエディタ入力
*******************************************************************************/
/*		CKエディタ入力
------------------------------------------------------------------------------*/
.smpkinkyu h4{
	margin:0px 12px 10px 12px;
	padding:2px 5px 2px 5px;
	border-left:4px solid #A01313;
	font-size:100%;
}
.smpkinkyu h5,.smpkinkyu h6{
	margin:0px 15px 3px 15px;
	padding:0px 0px 0px 0px;
	font-size:100%;
}
.smpkinkyu p{
	padding:0px 15px 10px 15px;
}
/*		リスト
------------------------------------------------------------------------------*/
.smpkinkyu ol{
	margin:0px 15px 10px 40px;
}
.smpkinkyu ul{
	margin:0px 15px 10px 35px;
}
.smpkinkyu ol li,.smpkinkyu ul li{
	margin-bottom:3px;
	line-height:1.5;
}
/*		テーブル
------------------------------------------------------------------------------*/
.smpkinkyu table{
	margin:10px 10px 20px 15px;
	padding:0px;
	max-width:95%;
	clear:both;
	border-collapse:collapse;
	border:1px solid #CCC;
	empty-cells:show;
}
.smpkinkyu th,.smpkinkyu td{
	padding:3px 6px 3px 6px;
	font-size:95%;
	border:1px solid #CCC;
	text-align:left;
	vertical-align:top;
}
.smpkinkyu th{
	background:#EEE;
}
.smpkinkyu table caption{
	padding:0px 0px 3px 3px;
	text-align:left;
	font-weight:bold;
}
.smpkinkyu table td.verticaltop,.smpkinkyu table th.verticaltop{
	vertical-align:top;
}
.smpkinkyu table td.verticalmiddle,.smpkinkyu table th.verticalmiddle{
	vertical-align:middle;
}
.smpkinkyu table td.verticalbottom,.smpkinkyu table th.verticalbottom{
	vertical-align:bottom;
}
.smpkinkyu table td.verticalbaseline,.smpkinkyu table th.verticalbaseline{
	vertical-align:baseline;
}
.smpkinkyu table td.cell,.smpkinkyu table th.cell{
	white-space:nowrap;
}
.smpkinkyu table td.cellleft,.smpkinkyu table th.cellleftt{
	text-align:left;
	white-space:nowrap;
}
.smpkinkyu table td.cellright,.smpkinkyu table th.cellright{
	text-align:right;
	white-space:nowrap;
}
.smpkinkyu table td.cellcenter,.smpkinkyu table th.cellcenter{
	text-align:center;
	white-space:nowrap;
}
.smpkinkyu p table{
	margin-left:0px;
}
.smpkinkyu td p,.smpkinkyu th p{
	margin:0px;
	padding:0px;
}
.smpkinkyu table ul{
	margin:0px 15px 0px 20px;
}
.smpkinkyu table ol{
	margin-top:0px 15px 0px 25px;
}
.smpkinkyu table ul li,.smpkinkyu table ol li{
	margin-bottom:0px;
}