@charset "euc-jp";
/*=========================================================================================================

File Name:	r-common.css
Style Info:	デバイス別 共通スタイル

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


/* -----Javascript Disabled-------------------- */
div.jvd div#navigation{ display:block; }
div.jvd p#mobile-navi{ display:none;}
div.jvd div#tools{ display:none;}
div.jvd ul.accordion ul{ display:block; }
div.jvd div#photogallery{ width:100%;}
div.jvd div.navigation{ width:100%;}
div.jvd div#navigationInner{ display:block;}
div.jvd ul#list-safe, div.jvd ul#list-hayabiki, div.jvd ul#list-lifeguide{ display:block;}
div.jvd h2#title-news, div.jvd h2#title-oshirase, div.jvd h2#title-event{ position:static;}
div.jvd div#content-news, div.jvd div#content-oshirase, div.jvd div#content-event{ display:block;}


@media screen and (min-width: 576px) and (max-width: 767px){
  div.jvd div#side-separate div#side-separateInner{ margin-left:0px;}
}
@media screen and (min-width: 960px){
  div.jvd div#headerInner{ width:960px; margin:0 auto; height:116px; background:#FFFFFF url(../images/bg_header.gif) no-repeat bottom center;}
  div.jvd div#navigationInner{ width:960px; margin:0 auto;}
  div.jvd div#life-navigationInner{ width:960px; margin:0 auto;}
  div.jvd div#topcontentInner{ width:960px; margin:0 auto; background:#F5EFE4;}
  div.jvd div#contentInner{ width:960px; margin:0 auto;}
  div.jvd #footerInner{ width:960px; margin:0 auto;}
}

/*==================================================================================================================================================
@group body,共通パーツ,各レイアウトボックス
==================================================================================================================================================*/

body{ padding:0; }

div#header{ background:#FFF; width:150px; float:left;}
div#content{ width:100%;}
  div#main-column{ margin:0;}
  div#side-column{ margin:0;}

    
.backBtn{ display:none;}
.title-common{ background:url(../images/bg_title_common.gif) repeat-x bottom left; padding:8px 5px 4px;}
.title-common img{ max-width:100%;}



@media screen and (min-width: 768px){
.backBtn{ display:block;}
  div#header{ width:100%; float:none;}
  div#content{ width:100%;}
  /*--トップページ--*/
    div.top div#side-column{ width:288px; float:left; clear:none; margin-right:-288px; position:relative; z-index:99999;}
    div.top div#main-column{ width:100%; float:right;}
      div.top div#main-columnInner{ margin-left:288px;}
        div.top div#content-main-column{ padding:20px 0 20px 20px;}
  div#headerInner{ width:100%;}
  div#navigationInner{ width:100%; margin:0 auto;}
  div#life-navigationInner{ width:100%; margin:0 auto;}
  div#topcontentInner{ width:100%; margin:0 auto; background:#F5EFE4;}
  div#contentInner{ width:100%; margin:0 auto;}
  div#footerInner{ width:100%; margin:0 auto;}
  /*--第二階層--*/
    div.second div#main{ position:relative;}
    div.second div#side-column{ width:220px; float:left; clear:none; margin-top:130px; margin-right:-220px; position:relative; z-index:99999;}
    div.second div#main-column{ width:100%; float:right;}
      div.second div#main-columnInner{ margin-left:220px;}
        div.second div#content-main-column{ padding:5px 0 20px 20px;}
}
@media screen and (min-width: 960px){
  div#header{ width:100%;}
  div#navigation{ width:100%; background:#FFDE79;}
  div#life-navigation{ width:100%; background:#FFFFFF;}
  div#search-topWrap{ width:960px; margin:0 auto;}
  div#topcontent{ width:100%; background:#EFE6D5;}
  
  
  div#headerInner{ width:960px; margin:0 auto; height:116px; background:#FFFFFF url(../images/bg_header.gif) no-repeat bottom center;}
  div#navigationInner{ width:960px; margin:0 auto;}
  div#life-navigationInner{ width:960px; margin:0 auto;}
  div#topcontentInner{ width:960px; margin:0 auto; background:#F5EFE4;}
  div#contentInner{ width:960px; margin:0 auto;}
  div#footerInner{ width:960px; margin:0 auto;}
}

/*==================================================================================================================================================
@group ヘッダー
==================================================================================================================================================*/

/* -----サイトロゴ-------------------- */
h1#siteID{ width:150px;}
h1#siteID a{ display:block; width:150px; height:51px;}
h1#siteID img{ max-width:100%;}
@media screen and (min-width: 768px){
  h1#siteID{ width:205px; padding:10px; margin-right:-225px; float:left; position:relative; z-index:99999;}
  h1#siteID a{ display:block; width:205px; height:70px;}
}

/* -----文字サイズ変更・翻訳ツール-------------------- */
div#tools{ display:none;}
div#tools img{ max-width:100%;}

@media screen and (min-width: 768px){
  div#header-content{ width:100%; float:right;}
  div#header-contentInner{
    display:block;
    margin-right:10px;
    margin-left:245px;
    height:90px;
    background-image:url(../images/bg_header.gif);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom right;
  }
  div#tools{
    display:block;
    float:right;
    width:100%;
    max-width:401px;
    padding:5px 0;
    background:#F5EFE4;
    border-radius:5px;
    margin-top:20px;
  }
  /* -----文字サイズ-------------------- */
  div#fontctl{ width:41%; float:left; max-width:168px;}
  div#fontctl p{ width:50%; float:left; max-width:85px;}
  div#fontctl li{ width:14%; float:left; max-width:23px;}
  div#fontctl li a{ display:block; margin-left:2px;}
  
  /* -----翻訳-------------------- */
  div#langctl{ width:59%; float:left; max-width:237px;}
  div#langctl ul{ border-right:1px solid #FFF; border-left:1px solid #FFF;}
  div#langctl ul:after{ content:""; clear:both; display:block;}
  div#langctl li{ float:left;}
  li.lang01{ width:25%; max-width:60px;}
  li.lang02{ width:30%; max-width:68px;}
  li.lang03{ width:20%; max-width:47px;}
  li.lang04{ width:25%; max-width:60px;}
  div#langctl li a{ display:block;}
  
  /* -----コントラスト-------------------- */
  div#contrast{ width:29%; float:left; max-width:168px;}
  div#contrast p{ width:50%; float:left; max-width:85px;}
  div#contrast li{ width:14%; float:left; max-width:23px;}
  div#contrast li a{ display:block; margin-left:2px;}
}
@media screen and (min-width: 960px){
  div#header-contentInner{ background:none;}
}

/* -----スマートフォン用コンテンツナビ-------------------- */
p#mobile-navi{ color:#000; height:40px; width:40px; float:right; padding:6px;}
a#mobile-btn{ display:block;}

div.top a#mobile-btn{ display:none;}

/* -----グローバルナビゲーション-------------------- */
div#navigationInner{ display:none; background:#FFDE79; padding-bottom:5px; clear:both;}
div.top div#navigationInner{ display:block;}
ul#gmenulist li{ text-align:center;  float:left;}
ul#gmenulist li a{ display:block; text-align:center;}
ul#gmenulist li span{ display:block; padding:0px 4px;}
ul#gmenulist li img{ max-width: 100%;}

@media screen and (max-width: 767px){
  div#navigationInner{ padding:5px 0 0;}
  ul#gmenulist li a{
    border-bottom:1px solid #FFB359;
    padding:3px 0;
  }
  ul#gmenulist li#gnavi05{ clear:both;}
  ul#gmenulist li#gnavi01,
  ul#gmenulist li#gnavi02,
  ul#gmenulist li#gnavi03,
  ul#gmenulist li#gnavi04{ width:25%;}
  ul#gmenulist li#gnavi05,
  ul#gmenulist li#gnavi07{ width:33%;}
  ul#gmenulist li#gnavi06{ width:34%;}
  ul#gmenulist li#gnavi01 a,
  ul#gmenulist li#gnavi02 a,
  ul#gmenulist li#gnavi03 a{ border-right:1px solid #FFB359; border-top:1px solid #FFB359; padding:5px 0;}
  ul#gmenulist li#gnavi04 a{ border-top:1px solid #FFB359; padding:5px 0;}
  ul#gmenulist li#gnavi05 a,
  ul#gmenulist li#gnavi06 a{ border-right:1px solid #FFB359;}
}
@media screen and (min-width: 768px){
  div#navigation{clear:both;}
  p#mobile-navi{ display:none;}
  div#navigationInner{ display:block; padding:10px 0 10px;}
  ul#gmenulist li{ width:14%; border-right:1px solid #FFB359;}
  ul#gmenulist li#gnavi06{ width:14%;}
  ul#gmenulist li#gnavi07{ width:15%; border-right:none;}
  ul#gmenulist li a{ margin:0;}
}

/*==================================================================================================================================================
@group 簡単検索ボックス：安心・安全、早引きインデックス、市民生活ガイド
==================================================================================================================================================*/

div#life-navigation img{ max-width:100%;}
h2.title-life-navigation{ text-align:center; padding:10px 0 5px;}
ul#list-safe,
ul#list-hayabiki,
ul#list-lifeguide{ display:none;}
ul.list-life-navigation li{
  width:33%;
  float:left;
  text-align:center;
  background:url(../images/border_dotted_lifenavi.gif) no-repeat right center;
}
ul.list-life-navigation a{
  display:block;
  margin:1px;
  padding:3px;
  background:url(../images/border_x_dotted_lifenavi.gif) no-repeat top center;
}
ul.list-life-navigation li img{ max-width:100%;}

@media screen and (max-width: 767px){
  div#safe{ clear:both;}
  div#hayabiki{ clear:both;}
  div#lifeguide{ clear:both;}
  h2.title-life-navigation{ padding:0;}
  h2#title-hayabiki,
  h2#title-lifeguide{ border-top:1px solid #C5B6A5;}
  h2.title-life-navigation{ position:relative; padding:5px 0;}
  h2.title-life-navigation a.btn-life-navi{ display:block; width:100%; top:0; right:0; bottom:0; left:0; position:absolute; z-index:99999; text-align:right; padding-top:15px;}
  ul.list-life-navigation li.lnavi03,
  ul.list-life-navigation li.lnavi06{ background:none;}
  ul.list-life-navigation li.lnavi01 a,
  ul.list-life-navigation li.lnavi02 a,
  ul.list-life-navigation li.lnavi03 a{ background:none;}
}
@media screen and (min-width: 768px){
  div#life-navigation{ display:block; padding:0 0 10px;}
  div#life-navigationInner{ display:block;}
  div#safe{ width: 30%; float:left;}
  div#hayabiki{ width: 40%; float:left; background:url(../images/dot_y_2px.gif) repeat-y left top;}
  div#lifeguide{ width: 30%; float:right; background:url(../images/dot_y_2px.gif) repeat-y left top;}
  div#lifeguideInner{ margin-left:1px;}
  ul#list-safe,
  ul#list-hayabiki,
  ul#list-lifeguide{ display:block;}
  ul.list-life-navigation li{ width:33%;}
  div#hayabiki ul.list-life-navigation li{ width:25%;}
  ul.list-life-navigation a{ padding:1px;}
  ul.list-life-navigation li img{ width:90px;}
  
  h2.title-life-navigation a.btn-life-navi{ display:none;}
  
  div#safe ul.list-life-navigation li.lnavi03,
  div#safe ul.list-life-navigation li.lnavi06,
  div#hayabiki ul.list-life-navigation li.lnavi04,
  div#hayabiki ul.list-life-navigation li.lnavi08,
  div#lifeguide ul.list-life-navigation li.lnavi03,
  div#lifeguide ul.list-life-navigation li.lnavi06{ background:none;}
  
  div#safe ul.list-life-navigation li.lnavi01 a,
  div#safe ul.list-life-navigation li.lnavi02 a,
  div#safe ul.list-life-navigation li.lnavi03 a,
  div#hayabiki ul.list-life-navigation li.lnavi01 a,
  div#hayabiki ul.list-life-navigation li.lnavi02 a,
  div#hayabiki ul.list-life-navigation li.lnavi03 a,
  div#hayabiki ul.list-life-navigation li.lnavi04 a,
  div#lifeguide ul.list-life-navigation li.lnavi01 a,
  div#lifeguide ul.list-life-navigation li.lnavi02 a,
  div#lifeguide ul.list-life-navigation li.lnavi03 a{ background:none;}
}
@media screen and (min-width: 960px){
  div#life-navigationInner{ background:url(../images/dot_y_2px.gif) repeat-y right top;}
  div#safe{ width: 288px; background:url(../images/dot_y_2px.gif) repeat-y left top;}
  div#hayabiki{ width: 384px;}
  div#lifeguide{ width: 288px;}
  div#lifeguideInner{ margin-left:0;}
  ul.list-life-navigation li{ width:96px;}
  ul.list-life-navigation a{ padding:1px;}
  ul.list-life-navigation li img{ width:90px;}
}


/*==================================================================================================================================================
@group キーワード検索ボックス
==================================================================================================================================================*/

/* -----検索ボックス：トップページ用-------------------- */
div#search-top{ clear:both; padding:10px; background:#FFDE79;}
div#search-top img{ max-width:100%;}

div#search-top h2{ width:100px; float:left; position:relative; z-index:999999;}
div#search-top div#inputBoxWrapper{ width:100%; float:right;}
div#search-top div#inputBox{}

div#search-top div#search-formWrap{ width:100%; float:left;}
div#search-top div#inputBox p#search-form{ padding:0 0 0 5px; margin-right:64px;}
div#search-top div#inputBox p#search-form input{ width:100%; border:1px solid #FFB359; line-height:1.5em; height:22px;}
div#search-top p#submit-btn{ padding:0; text-align:right; float:right; margin-left:-64px; width:50px; padding:0 7px; background:#FE9E1A;}
div#search-top p#submit-btn input{ max-width:100%;}

@media screen and (min-width: 360px){
  div#search-top h2{  margin-right:-100px}
  div#search-top div#inputBox{ margin-left:100px;}
}

@media screen and (min-width: 640px){
  div#search-top{ padding:5px;}
  div#search-top h2{ width:134px; background:url(../images/bg_title_search.gif) no-repeat left center; padding-left:30px; margin-right:-164px}
  div#search-top div#inputBox{ margin-left:164px;}
  div#search-top div#inputBox p#search-form{ margin-right:89px; padding-top:0px;}
  div#search-top p#submit-btn{ padding:0 20px; width:46px; border-bottom:4px solid #B96806; margin-left:-96px; margin-top:0px;}
}
@media screen and (min-width: 768px){
  div#search-top div#search-top{ padding:10px;}
  div#search-top div#inputBox p#search-form{ margin-right:96px; padding-top:0px;}
  div#search-top p#submit-btn{ padding:0 20px; width:46px; border-bottom:4px solid #B96806; margin-left:-96px; margin-top:0px;}
}
@media screen and (min-width: 960px){
  div#search-top{ padding:10px 15px;  margin:0 auto;}
}

/* -----検索ボックス：共通ページ用-------------------- */
div#search-second{ clear:both; padding:10px; background:#FFDE79;}
div#search-second img{ max-width:100%;}

div#search-second h2{ width:80px; float:left; margin-right:-80px; padding:5px 0;}
div#search-second div#inputBoxWrapper{ width:100%; float:right;}
div#search-second div#inputBox{ margin-left:80px;}

div#search-second div#search-formWrap{ width:100%; float:left;}
div#search-second div#inputBox p#search-form{ padding:0 0 0 5px; margin-right:66px;}
div#search-second div#inputBox p#search-form input{ width:100%; border:1px solid #FFB359; line-height:1.5em; height:20px;}
div#search-second p#submit-btn{ padding:0; text-align:center; float:right; margin-left:-64px; width:50px; padding:1px 7px 2px; background:#FE9E1A;}
div#search-second p#submit-btn input{ max-width:100%;}

@media screen and (min-width: 640px){
  div#search-second{ padding:5px;}
  div#search-second h2{ width:109px; background:url(../images/bg_title_second_search.gif) no-repeat left center; padding-left:20px; margin-right:-129px}
  div#search-second div#inputBox{ margin-left:135px;}
  div#search-second div#inputBox p#search-form{ margin-right:77px; padding-top:4px;}
  div#search-second p#submit-btn{ padding:1px 10px 2px; width:55px; border-bottom:none; margin-left:-89px; margin-top:4px;}
}
@media screen and (min-width: 768px){
  div#search-secondWrap{ position:absolute; top:0; left:0; width:220px; padding-top:20px;}
  div#search-second{ padding:0px;}
  div#search-second h2{ margin-right:0;}
  div#search-second div#inputBox{ margin-left:0;}
  div#search-second div#inputBox p#search-form{ margin:0; padding:0 0 5px;}
  div#search-second p#submit-btn{ padding:0 10px; float:none; clear:both; margin:10px auto; border-bottom: 4px solid #B96806;}
  div#search-second div#inputBox p#search-form input{ width:90%; margin:0 auto; display:block;}
}

/*==================================================================================================================================================
@group 左サイド
==================================================================================================================================================*/

/* -----Facebookページ-------------------- */
div#fb{ clear:both;}
h2#title-fb{ background:url(../images/bg_title_fb.gif) repeat-x bottom left; padding-bottom:3px;}
h2#title-fb img{ max-width:100%;}

div.fbbanner{ text-align:center; padding-bottom:20px;}
div.fbbanner img{ max-width:100%;}

@media screen and (max-width: 575px){
  div#fb-content{ width:288px; height:200px; overflow-y:scroll; overflow-x:hidden; margin:0 auto;}
}



/* -----広報あらお-------------------- */
p#kouhou-content{ border:1px solid #DFD0B9; margin:5px; background:url(../images/bg_magazine.jpg) no-repeat right center;}
p#kouhou-content a{ display:block;}

@media screen and (min-width: 640px){
  /*--第二階層--*/
  div.second div#kouhou{ width:33%; float:left;}
  div.second div#kouhouInner{ margin:0 5px;}
}
@media screen and (min-width: 768px){
  /*--第二階層--*/
  div.second div#kouhou{ width:100%; float:none; clear:both;}
  div.second div#kouhouInner{ margin:0px;}
}

/* -----市長室・市議会-------------------- */
div#sonota{ margin-top:20px; margin-bottom:10px;}
li#sntnavi-l01,li#sntnavi-l02{ float:left; width:100%; height:40px;}
li#sntnavi-l01 a,li#sntnavi-l02 a{}
@media screen and (min-width: 320px){
li#sntnavi-l01{ width:100%; background:url(../images/bg_btn_mayor2.jpg) no-repeat right center;}
li#sntnavi-l02{ width:100%; background:url(../images/bg_btn_gikai.jpg) no-repeat right center;}
}
@media screen and (min-width: 420px){
li#sntnavi-l01{ width:50%; margin-bottom:10px; background:url(../images/bg_btn_mayor2.jpg) no-repeat right top;}
li#sntnavi-l01 a{ display:block; margin:0 5px;}
li#sntnavi-l01 a span{ display:block; border-bottom:2px solid #997437;}
li#sntnavi-l02{ width:50%; background:url(../images/bg_btn_gikai.jpg) no-repeat right top;}
li#sntnavi-l02 a{ display:block; margin:0 5px;}
li#sntnavi-l02 a span{ display:block; border-bottom:2px solid #997437;}
}
@media screen and (min-width: 480px){
li#sntnavi-l01{ }
li#sntnavi-l02{ }
}
@media screen and (min-width: 576px){
li#sntnavi-l01{ }
li#sntnavi-l02{ }
}
@media screen and (min-width: 640px){
li#sntnavi-l01{ }
li#sntnavi-l02{ }
}
@media screen and (min-width: 768px){
li#sntnavi-l01{ width:100%;}
li#sntnavi-l01 a span{ border-bottom:none;}
li#sntnavi-l02{ width:100%;}
li#sntnavi-l02 a span{ border-bottom:none;}
}

/* -----市政に参加するメニュー-------------------- */
ul#shisei-list li{ width:100%;}
ul#shisei-list a{ display:block; margin:5px;}
ul#shisei-list img{ display:block; max-width:100%;}

@media screen and (min-width: 320px){
  ul#shisei-list li{ width:50%; float:left;}
  ul#shisei-list img{ max-width:130px;}
}
@media screen and (min-width: 360px){
  ul#shisei-list img{ max-width:100%;}
}
@media screen and (min-width: 480px){
  div#shisei{ padding-bottom:20px;}
  ul#shisei-list li{ width:33%;}
  ul#shisei-list img{ max-width:130px;}
}
@media screen and (min-width: 576px){
  div.top ul#shisei-list li{ width:100%;}
  div.second ul#shisei-list li{ width:33%;}
  ul#shisei-list img{ max-width:120px;}
}
@media screen and (min-width: 640px){
  /*--第二階層--*/
  div.second div#shisei{ width:100%; float:left;}
  div.second div#shiseiInner{ margin:0 5px;}
  div.second ul#shisei-list li{ width:33%;}
  div.second ul#shisei-list img{ max-width:140px;}
}
@media screen and (min-width: 768px){
  /*--トップページ--*/
  div.top div#shisei{ width:100%; float:none; clear:both;}
  div.top div#shiseiInner{ margin:0;}
  div.top ul#shisei-list li{ width:100%;}
  div.top ul#shisei-list img{ max-width:163px;}
  /*--第二階層--*/
  div.second div#shisei{ width:100%; float:none; clear:both;}
  div.second div#shiseiInner{ margin:0;}
  div.second ul#shisei-list li{ width:100%;}
  div.second ul#shisei-list img{ max-width:163px;}
}

/* -----人口情報-------------------- */
div#population{ clear:both;}
div#population-content{ padding:15px;}
div#population-content li{ display:inline-block;}

@media screen and (min-width: 640px){
  /*--第二階層--*/
  div.second div#population{ clear:none; width:33%; float:left;}
  div.second div#populationInner{ margin:0 5px;}
  div.second div#population-content li{ display:block;}
} 
@media screen and (min-width: 768px){
  div.second div#population{ clear:both; width:100%; float:none;}
  div.second div#populationInner{ margin:0;}
}
/*==================================================================================================================================================
@group 外部リンク
==================================================================================================================================================*/

div#links{ clear:both; padding-bottom:20px;}

ul.links{ list-style-type:none; padding:10px 0;}
ul.links li{ float:left; width:33%;}
ul.links a{ display:block; margin-right:5px;}
ul.links a img{ max-width:100%;}

@media screen and (min-width: 420px){
  ul.links li{ width:25%;}
}
@media screen and (min-width: 560px){
  ul.links li{ width:135px;}
}

/*==================================================================================================================================================
@group 広告欄
==================================================================================================================================================*/

div#ad-column{ clear:both; padding-bottom:20px;}
h2#title-ad span{ display:block; padding:10px; background:#FFDE79; text-align:center;}
div#content-ad-column{ background:#FFEEBC;}
div#content-ad-columnInner{ padding:10px;}
div#ad-column ul li{ width:33%; float:left; max-width:145px;}
div#ad-column ul li a{ display:block; padding:2px; max-width:160px;}
div#ad-column ul li a img{ max-width:100%;}

@media screen and (min-width: 480px){
  div#ad-column ul li{ width:20%;}
}
@media screen and (min-width: 640px){
  h2#title-ad{ width:140px; float:left; margin-right:-140px; position:relative; z-index:99999;}
  div#content-ad-column{ width:100%; float:right; background:url(../images/bg_ad.gif) repeat-y top left #FFEEBC;}
  div#content-ad-columnInner{ margin-left:140px;}
}
@media screen and (min-width: 960px){
  h2#title-ad{ padding-top:15px;}
  div#ad-column ul li{ width:16.5%;}
}

/*==================================================================================================================================================
@group フッター
==================================================================================================================================================*/

div#footer{ padding:0; font-size:smaller; line-height:1.4em; background:#FFDE79;}
div#footerNav{ padding:10px 10px 5px; background:#FFEEBC; margin:0;}
div#footerNav ul{ text-align:center;}
div#footerNav ul li{ padding:0; display:inline-block;}
div#footerNav ul li a{ display:block;}

div#footer-content{ padding:15px; min-height:120px;}
strong#fc-sitename{ display:block; padding-bottom:10px;}
address span{ display:block; line-height:1.75}

@media screen and (min-width: 360px){
  div#footer-content{ padding:15px 130px 15px 15px; background:url(../images/bg_footer.gif) no-repeat right center;}
}
@media screen and (min-width: 768px){
  div#footer{ font-size:100%;}
  span#fc-text-note{ display:block; text-indent:4em;}
}

p#copy{
  clear:both;
  font-size:78%;
  text-align:center;
  border-top:2px solid #D4D0C8;
  word-wrap:break-word;
  padding:10px 0;
  background:#402000;
  color:#FFFFFF;
}
@media screen and (min-width: 768px){
  p#copy{ font-size:100%;}
}