@charset "UTF-8";

/* --- 全体の背景・テキスト --- */
body {
margin: 0;
padding: 0;
background-image: url(back01.gif); 
background-color: #ffffff; /* ページの背景色 */
color: #000000; /* 全体の文字色 */
font-size: 90%; /* 全体の文字サイズ */
line-height: 1.5em; 
letter-spacing:0.1em;
}

/* --- 全体のリンクテキスト --- */
a:link { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
a:active { color: #ff0000; }

/* --- フッターのリンクテキスト --- */
a.foot:link { color: #ffffff; text-decoration: none; }
a.foot:visited { color: #ffffff; text-decoration: none; }
a.foot:hover { color: #ffffff; text-decoration: underline; }
a.foot:active { color: #ffffff; text-decoration: underline; }

/* --- 空きの調整 --- */
.pad_l30{
	padding-left:30px;
}
.pad_l40{
	padding-left:40px;
}
.mar_l20{
	margin-left:20px;
}
.mar_r20{
	margin-right:20px;
}
.mar_t20{
	margin-top:20px;
}
.mar_b10{
	margin-bottom:10px;
}


form {margin:0px;}

img {
border: none;
}

/* --- イメージの位置 --- */
img.middle {
vertical-align: middle;
}

/* --- 画像は原寸大で表示 --- */
img{
	width:100% auto;
}
/* --- 画像の位置（隙間対策） --- */
img.middleline{
	vertical-align: middle;
}
img.bottomline{
	vertical-align: bottom;
}

/* --- テーブルセルのサイズ --- */
.w10{
	width:10px;
}
.w50{
	width:50px;
}
.w150{
	width:150px;
}
.w180{
	width:180px;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* --- コンテナ --- */
#container {
width: 96%; /* ページの幅 */
margin: 0 auto; /* センタリング */
background: url(sidebar_180.gif) repeat-y left; /* 左サイドバーの背景画像 */
background-color: #ffffff; /* メインカラムの背景色 */
border-left: 1px #c0c0c0 solid; /* 左枠線 */
border-right: 1px #c0c0c0 solid; /* 右枠線 */
}
#containerInner {
width: 100%;
min-width:845px;
background: url(sidebar_180.gif) repeat-y right; /* 右サイドバーの背景画像 */
}

/* --- ヘッダ --- */
#header {
background-color: #62C3D2; /* ヘッダの背景色 */

}

.searchBtn {
	margin:0px 5px 0px 5px;
	vertical-align:middle;
}


/* --- ナビゲーション --- */
#nav {
float: left;
width: 200px; /* 左サイドバーの幅 */ 
margin-right: -200px; /* 左サイドバーの幅に合わせる（マイナス値） */
}


/* --- ナビゲーション --- */
#right {
float: left;
width: 10px; /* 左サイドバーの幅 */ 
}

ul.top_sub{
margin: 0px;
padding: 0 0 0 15px;
list-style-image: url(images/icon/s_orange3.gif);
text-align:left; 
}


/* --- メインカラム --- */
#content {
float: left;
width: 100%;
margin-right: -170px; /* 右サイドバーの幅に合わせる（マイナス値） */
}
#contentInner {
margin-left: 200px; /* 左サイドバーの幅に合わせる */
margin-right: 170px; /* 右サイドバーの幅に合わせる */
}

/* --- サブナビゲーション --- */
#aside {
float: left;
width: 170px; /* 右サイドバーの幅 */
}
.line_gdot {
border-top:1px solid #68bf8f; 
border-bottom:0px solid #fff; 
border-left:0px solid #fff; 
border-right:0px solid #fff; 
background-color: #fff;
height: 1px;
width: 150px; /* 右サイドバーの幅 */
}

/* --- フッタ --- */
#footer {
clear: both; /* フロートのクリア */
width: 100%;

font-size: 90%; /* 文字サイズ */
line-height: 1.5em; 
color: #FFFFFF;
}

/* --- トップページへ --- */
#top {
text-align: right; /* フロートのクリア */
width: 100%;
background-color: #FFFFFF; /* フッタの背景色 */
}

/* --- テーブル --- */
table.head { 
	table-layout:auto;
	border: 0px #4B3D3C solid; 
	border-collapse: separate;
	padding: 0px 0px;
	vertical-align:top;
	font-size: 14px;
	background-color: #62C3D2;
	color: #000000;
} 

table.mobile { 
border: 1px #DAD6D1 solid; 
width: 150px; 
padding: 0px; 
background: #E8F6F8; 
line-height: 1.5em; 
letter-spacing:0.15em;
font-size: 80%;
}




td.kumo { 
background: url(images/background/kumo.gif) ;
width: 100%;
}

td.head { 
background: url(images/background/head.gif) ;
}

td.icons { 
width: 50px;
text-align: left;
}

td.iconsg { 
width: 20px;
text-align: left;
}

td.ten { 
background: url(images/background/ten.gif) ;
}



td.kensaku { 
background-image: url(images/background/head_back.gif); 
height: 28px; 
background-repeat: no-repeat; 
background-position: right; 
white-space: nowrap; 
}

td.pcatch { 
background-color: #B8E1CA; 
background-position: left; 
line-height: 1.5em; 
letter-spacing:0.15em;
font-size: 80%;
padding: 3px; 
}



td.pback { 
background-color: #68BF8F; 
background-position: left; 
text-align: center; 
line-height: 1.5em; 
letter-spacing:0.15em;
font-size: 80%;
padding: 3px; 
}

td.white { 
background-color: #FFFFFF; /* 背景色 */ 
}

td.white2 { 
line-height: 2.0em; 
}

td.footer { 
background-color: #837666; /* フッタの背景色 */
}

td.top { 
text-align: right; 
}


td.population { 
background-color: #FFF0CC; /* 背景色 */ 
line-height: 2.0em; 
letter-spacing:0.15em;
text-align: left; 
font-size: 90%;
}


/* --- ボックス --- */
div.blue { 
width: 100%; 
height: 5px; 
background-color: #E0F3F6; 
} 

div.white { 
width: 100%; 
height: 12px; 
background-color: #FFFFFF; 
} 

div.left { 
width: 180px; 
margin: 0px 5px;  
background-color: #FFFFFF; 
} 

div.right { 
width: 150px; 
margin: 0px 5px;  
background-color: #FFFFFF; 
} 

div.kinkyu { 
width: 98%; 
height: 29px;
margin: 0px 0px;  
background-image: url(images/background/red_g.gif); 
} 

div.news { 
width: 98%; 
height: 29px;
margin: 0px 0px;  
background-image: url(images/background/orange_g.gif); 
} 

div.up { 
width: 98%; 
height: 27px;
margin: 0px 0px;  
background-image: url(images/background/navy_g.gif); 
} 

div.riyou { 
width: 98%; 
height: 27px;
margin: 0px 0px;  
background-image: url(images/background/navy_g2.gif); 
} 

div.line { 
border-top: 1px solid #999999;
width: 98%;
padding-bottom:12px; 
}

div.line_orange { 
border-top: 3px solid #FFD148;
width: 98%;
padding-bottom:1px; 
}

div.today { 
padding: 7px 4px 2px 4px;
width: 98%;
color: #534C90;
font-size: 120%;
font-weight: bold;
}

/*-- トップ左サイド設定 --*/
.w180 br{
                                line-height:0.2;
}
.w150 img{
                                padding:0;
                                margin:0 0 1px 0;
                                vertical-align:top;
}

/*-- トップメインバナーエリア --*/
.main-banner-area{
                                width:98%;
                                /*height:100px;*/
                                height:auto;
                                display:flex;
                                margin:1rem 0;
                                border-top:2px #69bb38 solid;
                                border-bottom:2px #69bb38 solid;
                                border-right:2px #69bb38 solid;
                                box-sizing: border-box;
}
.main-banner-area .col2,
.main-banner-area .col3,
.main-banner-area .col4{
                                /*height:100px;*/
                                height:auto;
                                text-align:center;
                                border-left:1px #69bb38 solid;
}
.main-banner-area .col2:first-child,
.main-banner-area .col3:first-child,
.main-banner-area .col4:first-child{
                                /*height:100px;*/
                                height:auto;
                                text-align:center;
                                border-left:2px #69bb38 solid;
}
.main-banner-area .col2{
                                width:calc(100%/2);
}
.main-banner-area .col3{
                                width:calc(100%/3);
}
.main-banner-area .col3{
                                width:calc(100%/4);
}
.main-banner-area .col2 a,
.main-banner-area .col3 a,
.main-banner-area .col4 a{
                                width:100%;
                                display:block;
}
.main-banner-area .col4 img{
                                vertical-align: middle;
                                width:100%!important;
}

/*--トップメインナビ--*/
#mainnavi table {
	margin:10px 0px 0px 0px;	
	border-collapse: collapse;
	border-spacing: 0;
	background-color:#FFFFFF;
	width : -webkit-calc(100% - 15px) ;
	width : calc(100% - 15px) ;
}
#mainnavi th {
	margin:0px;	
	padding:0px;
	width:50px;
	vertical-align:top;
}
/*分類でさがすメニュー*/
#mainnavi td.kmenu_t {
	padding-top: 8px;
	border-top: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
#mainnavi td.kmenu_tl {
	padding-top: 8px;
	border-top: 1px #69bb38 solid;
	border-left: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
#mainnavi td.kmenu_tr {
	padding-top: 8px;
	border-top: 1px #69bb38 solid;
	border-right: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
#mainnavi td.kmenu_b {
	padding-top: 3px;
	padding-bottom: 4px;
	border-bottom: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
#mainnavi td.kmenu_bl {
	padding-top: 3px;
	padding-bottom: 4px;
	border-bottom: 1px #69bb38 solid;
	border-left: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
#mainnavi td.kmenu_br {
	padding-top: 3px;
	padding-bottom: 4px;
	border-bottom: 1px #69bb38 solid;
	border-right: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	text-align:center;
	background:#b6df9d;
}
/*新分類でさがすメニュー*/
#mainnavi td.kmenu {
                                border-left: 1px #c1bab2 solid;
	text-align:center;
	vertical-align:top;
	text-align:center;
	background:#e7fae2;
}
#mainnavi td.kmenu .wrapper-bunrui{
                                width:100%;
                                display: grid;
                                grid-template-columns: repeat(4, 1fr);
                                grid-template-rows: 84px 84px;
                                /*border:1px #c1bab2 solid;*/
}
#mainnavi td.kmenu .wrapper-bunrui .b-item{
                                padding-top: 11px;
                                background:#fefefe url(images/background/bg_topbunrui.png) repeat-x;
                                border-right:1px #c1bab2 solid;
                                border-top:1px #c1bab2 solid;
}
#mainnavi td.kmenu .wrapper-bunrui .b-item-net{
                                grid-row: 1 / 3;
                                grid-column: 4 / 5;
                                padding-top: 51px;
                                border-right:1px #c1bab2 solid;
                                border-top:1px #c1bab2 solid;
}
/*ライフイベントメニュー*/
#mainnavi td.lifestage_tl {
	padding:0;
	border-top: 1px #69bb38 solid;
	border-left: 1px #69bb38 solid;
	border-bottom: 1px #d1e0de solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_tr {
	padding:0;
	border-top: 1px #69bb38 solid;
	border-left: 1px #69bb38 solid;
	border-right: 1px #69bb38 solid;
	border-bottom: 1px #d1e0de solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_l {
	padding:0;
	border-left: 1px #69bb38 solid;
	border-bottom: 1px #d1e0de solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_r {
	padding:0;
	border-left: 1px #69bb38 solid;
	border-right: 1px #69bb38 solid;
	border-bottom: 1px #d1e0de solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_l {
	padding:0;
	border-left: 1px #69bb38 solid;
	border-bottom: 1px #d1e0de solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_br {
	padding:0;
	border-left: 1px #69bb38 solid;
	border-right: 1px #69bb38 solid;
	border-bottom: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.lifestage_bl {
	padding:0;
	border-left: 1px #69bb38 solid;
	border-bottom: 1px #69bb38 solid;
	text-align:left;
	vertical-align:top;
	background: url(images/background/bg_lifestage.gif) repeat-x top;
	text-align:center;
}
#mainnavi td.kmenu_mono {
	padding: 10px;
	border: 1px #69bb38 solid;
	text-align:center;
	background:#c3f4b5;
}

.top-newslist td,.top-uplist td{
                                padding:0.3rem 0;
                                border-bottom:1px dotted #aaa;                               
}


div.now { 
text-align: right;
background:url(images/background/now.gif) no-repeat;
font-size:13px;
height: 33px;
}

div.access { 
text-align: left;
font-size:13px; 
}


/*--メニュー--*/
div#menu {
	width:185px;
	font-size:13px;
	font-family: "ＭＳ Ｐゴシック", "Arial",Osaka,"ＭＳ ゴシック","Osaka",sans-serif;
	letter-spacing:.1em;
}

#menu ul {
	line-height:125%;
	margin:0;
	padding:0;
}
#menu ul li {
	list-style-type:none;
	background:#FFFFFF;
}
#menu ul li a {
	display:block;
	width:155px;
	padding:6px 0 5px 25px;
	background:url(images/background/list.gif) no-repeat;
	text-decoration:none;
}
#menu ul li a:hover {
	background:url(images/background/list.gif) no-repeat right top;
}

#menu ul li.col2 {
	list-style-type:none;
	background:#FFFFFF;
}
#menu ul li.col2 a {
	display:block;
	width:155px;
	padding:5px 0 6px 25px;
	background:url(images/background/list3.gif) no-repeat;
	text-decoration:none;
}
#menu ul li.col2 a:hover {
	background:url(images/background/list3.gif) no-repeat right top;
}

/*--町の人口--*/
div#population {
	width:150px;
	font-size:12px;
	font-family: "ＭＳ Ｐゴシック", "Arial",Osaka,"ＭＳ ゴシック","Osaka",sans-serif;
	letter-spacing:.1em;
}

#population ul {
	line-height:125%;
	margin:0;
	padding:0;
}
#population ul li {
	list-style-type:none;
	display:block;
	width:140px;
	padding:6px 5px 5px 5px;
	background:url(images/background/list_p.gif) no-repeat;
	text-decoration:none;
}
/*--防災無線情報--*/
#bousai {
	margin:5px 0px 15px 0px;
	width: 98%;
	border-top:#8f8410 solid 1px;
	border-bottom:#8f8410 solid 1px;
	background: url("images/background/bg_bousai.gif") repeat-x top;
}

#bousai ul {
	margin-top:10px;
	padding:0px 3px ;
	list-style:none;
}
#bousai li{
	margin-bottom:7px;
	list-style:none;
	padding-left:13px;
	background-image: url(images/icon/sankaku_orange.gif);
	background-repeat: no-repeat;
	background-position:0 5px;
}
/*--桂川町役場のご案内--*/
#yakuba {
	width:180px;
	margin-bottom:15px;
	font-size:13px;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", serif;
	background:url(images/background/list4.gif) repeat-y;
	border-bottom:#849fc0 1px solid;
	text-align:center;	
}
#yakuba #yakuba_tel {
	width:165px;
	margin:0 auto;
	padding:0px 0px 6px 11px;
	font-size:15px;
	font-weight:bold;
	color:#051e46;
	background:url(images/icon/telephone.gif) no-repeat 8px 2px;
}
#yakuba #yakuba_time {
	width:160px;
	margin:0 auto;	
	text-align:left;
}
.yakuba_yakan {
	width:140px;
	margin:0 auto;
	padding:6px 0 7px 0;
	text-align:center;
	background:url(images/icon/sankaku_orange2.gif) no-repeat 2px 12px;
}
.yakuba_inn {
	width:180px;
	margin:0 auto;
	padding-bottom:10px;
	text-align:center;	
}
/*--広報けいせん--*/
#kouhou_top {
	width:148px;
	padding:8px 0px 15px 0px;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
	font-size:90%;
	text-align:center;
	line-height:1.0;
}

/* --- 2020.3.9追加 重要なお知らせ --- */

.important{
	width: 95%; 
	border:2px solid #fb2d33;
	margin:10px 0px 15px 0px;
	padding:15px 10px 5px 10px;
}

.important .title{
	border-bottom:1px solid #fb2d33;
	color:#fb2d33;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.font-b{
	font-size:120%;
	font-weight:bold;
}
.list-disc{
	list-style-type: disc
}

.list-disc li{
	margin-bottom:5px;
}
.pdf-s li{
	margin: 20px 20px 20px 28px;
	padding: 0;
	list-style-image: url(images/icon/pdf_s.gif); 
}


/*-- トップページ緊急情報 --*/
.list-img{
	list-style: none;
	display:flex;
	justify-content: flex-start;
	margin-left:-15px;
}

.list-img li{
	margin-right:8px;
}
.list-img li img{
	margin-bottom:0px;
}
.top_kinkyupic{
	padding-top:7px;
}
.top_kinkyutxt{
	padding-top:1px;
	font-size:85%;
}
.nodisc{
	list-style: none;
	margin-left:-15px;
}