?/* @charset "utf-8"; */
/*
 * Style Name   : COMMON CSS
 * Style URI    : common.css
 * Description  : 共通スタイルシート
 */

/* ===================================================================

 * 共通のスタイル指定（全ページ共通モジュール設定）
 
=================================================================== */
			
/* INDEX ---------------------
 *  0. トップページ用 スタイル
 *  1. デフォルト スタイル
 *  2. ヘッダー スタイル
 *  3. レフトメニュースタイル
 *  4. コンテンツ スタイル	
 *  5. フッター スタイル
 *  6. リンク スタイル
 *  7. 見出し スタイル
 *  8. テーブル スタイル
 *  9. リスト スタイル
 * 10. その他 スタイル
 * 11. 事業パンフレットページ スタイル
 * 12. 災害ページ用　スタイル
 */

/*================================================
 *  0.トップページ用 スタイル
 ================================================*/






/*================================================
 * 1. デフォルト スタイル
 ================================================*/
 
/* 基本設定 */

html {
   overflow-y:scroll;
}



img {
   vertical-align:bottom;
}

a:hover img { 
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7; 
}

#container {
   width:1024px;
   margin:0 auto;
   background-color:#FFFFFF;
}

.clear{ clear: both; visibility: hidden; height: 0;}

#pageTop {
   clear:both;
}


#topicPath {
   clear:both;
   display:flex;
   padding-top:10px;   
   padding-left:15px;
   font-size:16px;
}


/*================================================
 * 3. レフトメニュースタイル
 ================================================*/

#contents {
   clear:both;
}


#subLeft2 {
   float:left;
   display:inline;/*←IE6用*/
   width:216px;
   margin-top:20px;
   margin-left:15px;
}

#submenu {
   background: #999999;
   width: 216px;
   text-align : left ;  
   padding:1px;
   border:1px solid #d1d1d1; 
   line-height:120%;
}

#submenu p{
    border-bottom: 1px #AAAAAA solid;
    font-size:14px;
}

.sidemenu_top{
   background: #666666;
   background: -moz-linear-gradient(left, #0363D8, #B0D8FF);
   background: -webkit-gradient(linear, left center, right center, from(#0363D8), to(#B0D8FF)); 
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0363D8',endColorstr='#B0D8FF');

   font-weight:bold;
   font-size: 18px;
   color :#FFFFFF;
   padding: 20px 8px 20px 8px;
   text-shadow: 2px  2px 5px #2383FC,
            -2px  2px 5px #2383FC,
             2px -2px 5px #2383FC,
            -2px -2px 5px #2383FC;
			
}

#submenu p.midashi{
   padding: 4px 8px 4px 8px;
   text-decoration: none;
   color :#333333;
   background: #D3E6F3;   
   font-weight:bold;
   border-bottom:3px solid #0363D8;
   display:block;height:100%;width:92.5%;
}

#submenu a.naibu{
   padding: 12px 8px 12px 23px;
   text-decoration: none;
   color: #000000;
   background: #F1F1F1 url(../common/img/sidemenu1.gif) no-repeat 4px;   
   display:block;height:100%;width:85.5%;
}

#submenu a.gaibu{
   padding: 12px 8px 12px 23px;
   text-decoration: none;
   color :#000000;
   background: #F1F1F1 url(../common/img/sidemenu2.gif) no-repeat 4px;   
   display:block;height:100%;width:85.5%;
}

#submenu a.sub{
   padding: 12px 8px 12px 31px;
   text-decoration: none;
   color :#000000;
   background: #F1F1F1 url(../common/img/sidemenu3.gif) no-repeat 13px;   
   display:block;height:100%;width:81.8%;
}

#submenu a:hover{ 
   background-color: #FFFFFF;
   text-decoration:underline;
   
}

#subLeft2 table .rink {
color :#222222; font-size: smaller;
}

#subLeft2 table .rink1{
   background: url(../common/img/sidemenu1.gif) no-repeat 110px; width: 130px; height: 15px;
}

#subLeft2 table .rink2{
   background: url(../common/img/sidemenu2.gif) no-repeat 110px; width: 90px; height: 15px;
}


/*================================================
 * 4. コンテンツ スタイル
 ================================================*/

#main_box {
   width:760px;
   float:right;
   display:inline; /*←IE6用*/
   margin-top:20px;
/*   margin-right:5px;*/
   font-size:110%;
   line-height:140%;
}

/* 画像配置 */
.img_naka {
   margin:10px;
   text-align: center;
}

.img_migi {
   float:right;
   margin-left:20px;
   margin-bottom:10px;
   text-align: center;
   vertical-align: bottom;
}

.img_migi img {
   margin-bottom:5px;
}



/*================================================
 * 7. 見出し スタイル
 ================================================*/

h1 {
	font-size: 24px;
	font-weight: bold;
	line-height: 120%;
	color: #000000;

	height: auto;
	padding: 10px 5px 10px 15px;
	margin-bottom:15px
	
}

h2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 120%;
	color: #000000;
	border-bottom:1px solid #AAA;
	border-left:5px solid #2585FC;
	background-color: #eee;
	background:
	-moz-linear-gradient(top, #F3F3F3,#DDDFD9);
	background:
	-webkit-gradient(linear, left top,left bottom, from(#F3F3F3), to(#DDDFD9));
	height: auto;
	padding: 5px 3px 5px 15px;
	margin-bottom:15px
	
}

h3 {
	font-size: 16px;
	font-weight: bold;
	line-height: 120%;
	color: #000000;
	border-bottom:1px solid #AAA;
	border-left:5px solid #AAA;
	height: auto;
	padding: 5px 3px 5px 15px;
	
}

/*================================================
 * 8. テーブル スタイル
 ================================================*/

table.mado{
    border: 0px ; 
    margin:5px 5px 5px 5px;
	padding:5px;
    border-collapse: collapse;
    border-spacing: 0;
}
.mado caption {
  margin-top: 5px;
  margin-bottom: 5px;
}
.mado TR {
    padding: 5px;
    padding-left: 10px;
    border: 1px solid #777777;
    vertical-align: top ;
}
.mado TD {
    padding: 5px;
    padding-left: 10px;
    border: 1px solid #777777;
}
.mado br {
      margin:7px;
}

/*================================================
 * 9. リスト スタイル
 ================================================*/
/* sitemap.html */
#sitemap #container #main_box .left_bx h2 {
	font-size: 100%;
	font-weight: bold;
	line-height: 120%;
	color: #000000;
	border-bottom:1px solid #AAA;
	border-left:5px solid #2585FC;
	background-color: #eee;
	background:
	-moz-linear-gradient(top, #F3F3F3,#DDDFD9);
	background:
	-webkit-gradient(linear, left top,left bottom, from(#F3F3F3), to(#DDDFD9));
	height: auto;
	padding: 5px 3px 5px 15px;
	margin: 0 10px 15px 0;
}

#sitemap #container #main_box .right_bx h2 {
	font-size: 100%;
	font-weight: bold;
	line-height: 120%;
	color: #000000;
	border-bottom:1px solid #AAA;
	border-left:5px solid #2585FC;
	background-color: #eee;
	background:
	-moz-linear-gradient(top, #F3F3F3,#DDDFD9);
	background:
	-webkit-gradient(linear, left top,left bottom, from(#F3F3F3), to(#DDDFD9));
	height: auto;
	padding: 5px 3px 5px 15px;
	margin: 0 0 15px 10px;
}

#sitemap #container #main_box .lr_bx h2 {
	font-size: 100%;
	font-weight: bold;
	line-height: 120%;
	color: #000000;
	border-bottom:1px solid #AAA;
	border-left:5px solid #2585FC;
	background-color: #eee;
	background:
	-moz-linear-gradient(top, #F3F3F3,#DDDFD9);
	background:
	-webkit-gradient(linear, left top,left bottom, from(#F3F3F3), to(#DDDFD9));
	height: auto;
	padding: 5px 3px 5px 15px;
	margin: 0 10px 15px 0;
}

#sitemap #container #main_box ul.lr_bx {
	width: 760px;
}

#sitemap #container #main_box .left_bx,
#sitemap #container #main_box .right_bx {
	width: 380px;
	float: left;
}

#sitemap #container #main_box .left_bx ul {
	border-right:1px dashed #aaaaaa;
	padding: 0 20px 20px 20px;
	width: 339px;
}

#sitemap #container #main_box .right_bx ul {
	padding: 0 20px 20px 20px;
}

#sitemap #container #main_box .single_bx ul {
	padding: 0 20px 20px 20px;
	width: 720px;
}

#sitemap #container #main_box .left_bx ul li,
#sitemap #container #main_box .right_bx ul li,
#sitemap #container #main_box .lr_bx ul li {
	padding: 6px 8px 6px 23px;	
	background: #fff url(../img/sidemenu1.gif) no-repeat 4px;   
	display:block;
	height:100%;
}

#sitemap #container #main_box .left_bx ul li.no_img,
#sitemap #container #main_box .right_bx ul li.no_img {
	padding: 6px 8px 6px 23px;
	background: none;	
	display:block;
	height:100%;
}

#sitemap #container #main_box .left_bx ul li a,
#sitemap #container #main_box .right_bx ul li a,
#sitemap #container #main_box .lr_bx ul li a {
	text-decoration: none;
	color: #000000;
}

#sitemap #container #main_box .left_bx ul li a:hover,
#sitemap #container #main_box .right_bx ul li a:hover,
#sitemap #container #main_box .lr_bx ul li a:hover {
	text-decoration: underline;
	color: #000000;
}

/*================================================
 * 10. その他 スタイル
 ================================================*/
.f_l {
	float:left;
}
.f_r {
	float:right;
}
.ml5 {
	margin-left: 5px;
}
.mb5 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb30 {
	margin-bottom: 30px;
}
.mb_last {
	margin-bottom: 45px;
}
.fwb {
	font-weight: bold;
}
.half {
	width: 370px;
}
.pl10 {
	padding-left: 10px;
}
.pr10 {
	padding-right: 10px;
}
.tac {
	text-align: center;
}
.cb {
	clear: both;
}
.image_cap {
	font-size: small;
}

/* history.html */
#his_box {
	width: 760px;
	height: 1300px;
}
#his_photo {
	width: 150px;
}
#his_t {
	margin-right: 20px;
}

/* future01.html */
#fu_box {
	width: 600px;
	margin: 0 auto;
}
.fu_tx {
	font-size: small;
}

/* office.html */
#office h2 p.rute8 {
	font-size: small;
	font-weight: normal;
	margin: 5px 0 -5px 70px;
}

#office h2 p {
	display: inline;
	float: left;
	margin-right: 7px;
}

#office h2 p img {
	margin-top: 3px;
}

/* jyutai.html */
.note_bs {
	font-weight: bolder;
	font-size: small;
}

/* privacy.html */
.prv_order {
	width: 229px;
	height: 32px;
}

/*road/1gou.8gou.*/
h2 .small{
  font-size:small;
  font-weight:normal;
  margin-left:20px;
 }
 
/* voice.html */
#voice #main_box p {
	margin: 0 auto;
	width: 600px;
	text-align: center;
	margin-bottom: 30px; 
}

#voice #footer {
	margin-top: 0; /* ← main_boxの高さ不足でページトップボタンとフッターが離れるのを回避 */
}

/* clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

img.michi {
    margin-top: 5px;
}

img.michi2 {               /* 道の駅案内で使用 */
    vertical-align: middle;
}

/*================================================
 * 11. 事業パンフレットページ スタイル
 ================================================*/

/* \road\****.html で使用↓↓ */
#p-r1, #p-r8, #p-r161, #p-r307 {
	clear:both;
}

h2.road-pamph{/*見出し*/
	position:relative;/*親*/
}

div.btn-0{/*パンフレットボタンブロック*/
	position:absolute;/*子*/
	top:3px;
	right:10px;
}

a.btn{/*パンフレットリンク*/
	display:inline-block;	/*インラインレベルのブロックコンテナ*/
	position:relative;	/*相対位置への配置*/
	text-decoration:none;	/*テキストに線がなく点滅もない*/
	color:black;	/*文字色*/
	width:120px;	/*幅*/
	margin:3px 3px;
	height:22px;	/*高さ*/
	border-radius:10px;	/*角丸をまとめて指定*/
	line-height:22px;	/*行高さ*/
	text-align:center;	/*テキスト中央（横）*/
	vertical-align:middle;	/*テキスト中央（縦）*/
	overflow:hidden;	/*はみ出た部分を表示しない*/
	font-weight:bold;	/*フォントの太さ*/
	font-family:arial,fantasy;	/*フォントの種類*/
	font-size:12px;
	background-color:#ffffff;/*背景色*/
	border:solid 3px #2585FC;/*線*/
}

/* 事業パンフレットページ */

div.r-pamph { /*パンフレット 号線単位*/
	/*border:1px solid red;*/
	width:700px;
	margin-left:20px;
	height:auto;
	overflow:hidden;
}

div.r-pamph2 {/*パンフレット 2段組*/
	margin-top:5px;
	margin-bottom:5px;
	width:100%;
	height:auto;
	overflow:hidden;
}

div.pamphlet {/*パンフレット 単体*/
	width:50%;
	height:auto;
	overflow:hidden;
	float:left;
}

img.pamph-img {/*パンフレット イメージ*/
	border:solid 1px;
	float:left;
}

div.pamph-com {/*パンフレット コメント*/
	/*border:1px solid green;*/
	float:left;
	margin-left:2%;
	margin-top:20px;
	width:60%;
	height:100px;
}

p.pamph-title {/*パンフレット タイトル*/
	font-size:18px;
	font-weight: bold;
}

p.pamph-com2 {/*パンフレット リンク*/
	margin-top:5px;
	margin-left:10px;
	font-size:16px;
	line-height:28px;
}

p.pamph-com2 a {
	text-decoration:none;
}
/* ↑↑事業パンフレット↑↑ */

/* ↑↑\road\****.html↑↑ */

/*================================================
 * 12. 災害ページ用 スタイル
 ================================================*/
/*切替え見出し*/
#saigai {
	width:1024px;/*幅*/
	height:auto;/*高さ*/
	overflow:hidden;
}

#saigai p.s-mode{
	display:inline-block; /*インラインレベルのブロックコンテナ*/
	width:99.3%;/*幅*/
	height:50px;
	line-height:50px; /*行高さ*/
	font-size:35px; /*フォントサイズ*/
	color:#ff0000;/*フォント色*/
	background-color:#ffffff;/*背景色*/
	border:solid 3px red; /*線*/
	border-radius:15px;/*丸角*/
	text-align:center;	/*テキスト中央（横）*/
	vertical-align:middle;	/*テキスト中央（縦）*/
	font-weight: bold;
	margin-bottom:5px;
	font-family:sans-serif ;
}

#saigai p.s-info{
	display:inline-block; /*インラインレベルのブロックコンテナ*/
	width:99.3%;/*幅*/
	height:50px;
	line-height:50px; /*行高さ*/
	font-size:35px; /*フォントサイズ*/
	color:#ffffff;/*フォント色*/
	background-color:#ff0000;/*背景色*/
	border:solid 3px #ff0000; /*線*/
	border-radius:10px; /*丸角*/
	text-align:center; /*テキスト中央（横）*/
	vertical-align:middle; /*テキスト中央（縦）*/
	font-family:sans-serif ;
}

/*ライブカメラ用*/
#livecamera_a {
	width: 407px;
	height: 539px;
	float: left;
	position: relative;
	display: block;
	font-family:"Hiragino Maru Gothic Pro","Hiragino Kaku Gothic Pro","HGMaruGothicMPRO""ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","ヒラギノ角ゴ Pro W3","HG丸ｺﾞｼｯｸM-PRO",;

}

#livecamera_a div.live-cam {
	width:100%;/*幅*/
	height:auto;/*高さ*/
	margin-bottom:10px;
}

#livecamera_a div.live-c {
	width:96%;/*幅*/
	height:auto;/*高さ*/
	margin-top:0;
	margin-left:3%;
	margin-bottom:5px;
}

#livecamera_a div.live-title{
	width:100%;/*幅*/
	height:25px;/*高さ*/
	margin-bottom:10px;
}

#livecamera_a p.live-t{
	display:inline-block; /*インラインレベルのブロックコンテナ*/
	width:100%;
	line-height:25px; /*行高さ*/
	color:white;
	font-size:15px; /*フォントサイズ*/
	text-align:center; /*テキスト中央（横）*/
	vertical-align:middle; /*テキスト中央（縦）*/
	font-weight: bold;
	margin-top:0;
}

#livecamera_a a.botan{
	display:inline-block; /*インラインレベルのブロックコンテナ*/
	width:31%;
	text-decoration:none;/*テキストに線がなく点滅もない*/
	line-height:30px; /*行高さ*/
	font-size:13px; /*フォントサイズ*/
	font-weight:bold;
	text-align:center; /*テキスト中央（横）*/
	vertical-align:middle; /*テキスト中央（縦）*/
	background-color:white;/*背景色*/
	border-radius:10px;
}

#livecamera_a a.l-ku{
	color:#ff00ff;/*フォント色*/
	border:solid 2px #ff00ff; /*線*/
}

#livecamera_a a.l-ku:hover{
	color:#ff91ff;/*フォント色*/
	border:solid 2px #ff91ff; /*線*/
}


#livecamera_a a.l-hi{
	color:#ff8c00;/*フォント色*/
	border:solid 2px #ff8c00; /*線*/
}

#livecamera_a a.l-hi:hover{
	color:#ffb96b;/*フォント色*/
	border:solid 2px #ffb96b; /*線*/
}

#livecamera_a a.l-hi21{
	color:#008000;
	border:solid 2px #008000
}

#livecamera_a a.l-hi21:hover{
 	color:#727f72;
	border:solid 2px #727f72;
}

#livecamera_a a.l-ka{
	color:#0000cd;/*フォント色*/
	border:solid 2px #0000cd; /*線*/
}

#livecamera_a a.l-ka:hover{
	color:#7676cc;/*フォント色*/
	border:solid 2px #7676cc; /*線*/
}

/*フッタ・バナー用*/


a.b-twi{ /*twitter*/
	color:#ffffff;
	background-color:#1da1f2;
	border:solid 2px #1da1f2;
	font-size:18px;
	font-weight:bold;
}

a.b-twi:hover{
	background-color:#94ceef;
}

a.b-botan{
	color:#000000;
	background-color:#ffffff;
	border:solid 2px #ff3300;
	font-size:14px;
}

a.b-botan1{
	color:#000000;
	background-color:#ffffff;
	border:solid 2px #000080;
	font-size:14px;
}

a.b-botan2{
	width:94%;
	color:#000000;
	background-color:#ffffff;
	border:solid 2px #000080;
	font-size:14px;
}

a.b-botan:hover,a.b-botan1:hover,a.b-botan2:hover{
	background-color:#f0f8ff;
}

a.b-b-line{ /*1行*/
	line-height:45px;
	height:45px;
	padding-top:0;
}


/*メニュー用ボタン*/
#menu_index a.m-botan{
	display:inline-block;
	position:relative;/*相対位置への配置*/
	background:#2383FC;
	text-decoration:none;
	color:#ffffff;/*文字色*/
	font-weight:bold;/*フォントの太さ*/
	font-family:"Hiragino Maru Gothic Pro","Hiragino Kaku Gothic Pro","HGMaruGothicMPRO""ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","ヒラギノ角ゴ Pro W3","HG丸ｺﾞｼｯｸM-PRO",;
	text-align:center;
	vertical-align:middle;
	width:162px;
	height:40px;
	line-height:43px;
	font-size:18px;
	font-family:"Hiragino Maru Gothic Pro","Hiragino Kaku Gothic Pro","HGMaruGothicMPRO""ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","ヒラギノ角ゴ Pro W3","HG丸ｺﾞｼｯｸM-PRO",;
	overflow:hidden;/*はみ出た部分を表示しない*/
	border-radius:10px;/*角丸をまとめて指定*/
	border-right:solid 3px #185caf;
	border-bottom:solid 3px #185caf;
	box-shadow:2px 2px 3px rgba(255,255,255,0.8) inset;/*ボックスに影を付ける*/
	margin-left:5px;

}

#menu_index a.m-botan:hover{
	background:#84b9f9;
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/


@media screen and (max-width:520px) {


#main_box {
    width: 100%;

 }
#subLeft2,
#submenu {
    width: 100%;
}







}