@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#fontctl{ display:none;}

/*==================================================================================================================================================
@group body
==================================================================================================================================================*/

@media screen and (min-width: 768px){
  div.top-mst1{ background:url(../images/background/bg-top_pc1.jpg) no-repeat top center;}
  div.top-mst2{ background:url(../images/background/bg-top_pc2.jpg) no-repeat top center;}
  div.top-mst3{ background:url(../images/background/bg-top_pc3.jpg) no-repeat top center;}
  div.top-mst4{ background:url(../images/background/bg-top_pc4.jpg) no-repeat top center;}
  div.top-mst5{ background:url(../images/background/bg-top_pc5.jpg) no-repeat top center;}
  
  body.second-jsactive{
    background:url(../images/background/bg_category01.jpg) repeat-x 0 -80px;
  }
}
@media screen and (min-width: 1280px){
  div.top-mst1{ background-image:url(../images/background/bg-top_pc1.jpg); background-size:contain;}
  div.top-mst2{ background-image:url(../images/background/bg-top_pc2.jpg); background-size:contain;}
  div.top-mst3{ background-image:url(../images/background/bg-top_pc3.jpg); background-size:contain;}
  div.top-mst4{ background-image:url(../images/background/bg-top_pc4.jpg); background-size:contain;}
  div.top-mst5{ background-image:url(../images/background/bg-top_pc5.jpg); background-size:contain;}
}
@media screen and (min-width: 1680px){
  body.top-jsactive{
    background-size:cover;
    background-position:bottom left;
  }
}

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

body{ padding:0;}
div#navi{ background:#FFF;}
div#contentWrapper{ width:100%;}
  div#content{ width:100%;}
  div#subnavi{ margin:5px;}
    div#main-columnInner{ margin:3px;}
    div#side-column{ clear:both; float:none;}
      div#side-columnInner{ padding:5px;}

img.fluid-image { max-width: 100%;}
.stitlebar{ padding:0; background:url(../images/bg_stitlebar.gif) repeat-x bottom right; margin-bottom:5px; text-align:left;}
.backBtn{ display:none;}

@media screen and (min-width: 768px){

  div#navi{ width:250px; float:left; position:relative; margin-right:-250px; z-index:9999;}
    div#content{
      width:100%;
      float:right;
      position:relative;
      z-index:999;
      padding:0 0 20px;
    }
    .backBtn{ display:block; margin:0 0 5px;}
    
    /* -----トップページ・第二階層共通-------------------- */
      div#contentInner{ margin-left:250px;}
        div#main-column{ padding: 0 0 0 20px;}
        div.second div#main{ padding:20px 0 0 0;}
        div.second div#main-column{ padding: 20px 0 0 0; background:#FFFFFF;}
          div#main-columnInner{ margin:0 5px 0 0;}
          div.second div#main-columnInner{ margin:0 5px 0 0; background:#FFF; padding:0 0 0 20px;}
        div#side-column{ padding: 0 0 0 20px;}
          div#side-columnInner{ padding:10px 0 0;}
      
    div#subnavi{ margin:0; float:left; width:240px; margin-right:-255px; position:relative; z-index:99999;}
      div#subnaviInner{ padding-left:5px;}
}
@media screen and (min-width: 1280px){
  div#main{
    clear:both;
    width:100%;
    background:#FFF;
    padding:30px 0 0;
  }
  div.second div#main{ background:none;}
    div#main-column{
      width:100%;
      float:left;
      padding:0;
    }
    /* トップページ */
      div.top div#main-columnInner{
        margin:0 250px 0 20px;
        padding:0;
      }
    div.top div#side-column{
      float:right;
      width:230px;
      margin-left:-250px;
      clear:none;
    }
      div.top div#side-columnInner{ padding:0 20px 0 0;}
      
    /* 第二階層 */
      div.second div#main-columnInner{
        margin:0 250px 0 0;
        padding:0 0 0 20px;
      }
    div.second div#side-column{
      float:right;
      width:230px;
      margin-left:-250px;
      clear:none;
    }
      div.second div#side-columnInner{ padding:20px 20px 0 0;}
}

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

/* -----サイトロゴ-------------------- */
div#siteID{ padding:3px; background:url(../images/logobg_s.png) no-repeat right center;}
div#siteID h1{ width:120px; float:left;}
div#siteID h1 a{ display:block;}
div#siteID p{ width:134px; float:right; padding-top:3px;}
div#siteID img{ max-width:100%;}

@media screen and (min-width: 768px){
  div#siteID{ background:url(../images/bg_siteid.gif) no-repeat top left; padding:0;}
  div#siteID h1{ width:170px; height:55px; padding:22px 0 0 25px; float:none;}
  div#siteID a{ width:170px; height:55px; display:block; padding:0px;}
  div#siteID p{ float:none; padding-top:3px; text-align:center; width:250px; background:url(../images/logobg.png) no-repeat top center; padding:54px 0 6px;}
  p#mobile-navi{ display:none;}
}
@media screen and (min-width: 960px){
  h1#siteID{ width:182px;}
  h1#siteID a{ width:182px;}
}

/* -----スマートフォン用コンテンツナビ-------------------- */
p#mobile-navi{ background:#558B2F; color:#000; font-size:85%; height:25px; padding:5px; clear:both;}
a#mobile-btn{ display:block; float:right;}
div#navigation{ display:none;}

/* -----グローバルナビゲーション-------------------- */
ul#gmenulist li{ width:50%; text-align:center; float:left;}
ul#gmenulist li a{ display:block; border:1px solid #92AE79; margin:1px; text-align:left;}
ul#gmenulist li span{ display:block;}
ul#gmenulist li img{ max-width: 100%;}
ul#gmenulist li#gnavi-mayor{ width:100%; text-align:center; float:none;}

@media screen and (min-width: 360px){
  ul#gmenulist li{ width:33%;}
}
@media screen and (min-width: 640px){
  ul#gmenulist li{ width:25%;}
}
@media screen and (min-width: 768px){
  div#navigation{ display:block; padding:5px 20px 20px 20px;}
  ul#gmenulist{ border:none; width:210px;}
  ul#gmenulist li{ width:100%;}
  ul#gmenulist li a{
    border-top:none;
    border-right:none;
    border-bottom:1px solid #92AE79;
    border-left:none;
    margin:0px;}
  ul#gmenulist li span{ display:block; padding:0px;}
}

/* -----サブナビゲーション共通スタイル-------------------- */
div.subbox{ clear:both; padding:5px 0; border-bottom:1px solid #558B2F;}
div.subbox h2{ border-bottom:1px solid #558B2F;}


/* -----ピックアップ-------------------- */
div#pickupcontent{ clear:both;}
div#pickupcontent ul li{ text-align:left; width:50%; float:left;}
div#pickupcontent ul li a{ padding:0px; display:block; margin:1px;}
div#pickupcontent ul li a img{ max-width:100%;}

@media screen and (min-width: 360px){
  div#pickupcontent ul li{ width:33%;}
}
@media screen and (min-width: 640px){
  div#pickupcontent ul li{ width:25%;}
}
@media screen and (min-width: 768px){
  div#pickupcontent{ clear:both; padding-top:10px;}
  div#pickupcontent ul li{ width:100%; float:none; margin:0 0 5px;}
}

/* -----イベントカレンダー-------------------- */
div#ev-calendar p.btn-archive{ text-align:center; clear:both;}

@media screen and (min-width: 768px){
  div#ev-calendar p.btn-archive{ padding:5px;}
}

/* -----サブメニュー-------------------- */
div#submenu{ clear:both;}
div#submenu ul li{ text-align:left; width:50%; float:left;}
div#submenu ul li a{ padding:0px; display:block; border:1px solid #92AE79; margin:1px;}
div#submenu ul li a img{ max-width:100%;}

@media screen and (min-width: 360px){
  div#submenu ul li{ width:33%;}
}
@media screen and (min-width: 640px){
  div#submenu ul li{ width:25%;}
}
@media screen and (min-width: 768px){
  div#submenu ul li{ width:100%; clear:both;}
  div#submenu ul li a{ border:none; background:url(../images/dot_x_green.gif) repeat-x bottom left; padding-bottom:1px;}
}

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

/* -----検索ボックス-------------------- */
div#searchWrap{ margin:0; clear:both; padding:0;}
div#search{ background:#F9FBE7;}
div#search  p#search_example{ padding:0 5px; line-height:1.3em;}
div#search-formWrap{ width:100%; float:left;}
div#inputBox p#search-form{ padding:7px 0 5px 5px; margin-right:70px;}
div#inputBox p#search-form input{ width:100%; border:1px solid #D5E0A5; line-height:1.5em; height:24px;}
p#submit-btn{ padding:5px 5px 5px 0; text-align:right; float:right; margin-left:-70px;}

@media screen and (min-width: 768px){
  div#searchWrap{ margin:0px;}
}
@media screen and (min-width: 1120px){
  div#searchWrap{ width:100%; float:left;}
  div#search{ margin-right:530px;}
  div#inputBox p#search-form{ padding:9px 0 9px 9px;}
  p#submit-btn{ padding: 7px 7px 7px 0;}
}

/* -----文字サイズ変更・翻訳ツール-------------------- */


  div#tools{
    clear:both;
    margin:0;
    display:block;
  }
  div#langctl,div#fontctl{ display:block;}
  
  /* 翻訳ツールリンク */
  div#langctl{ background:url(../images/bg_noise_green01.gif) repeat; padding:10px 6px; width:251px; float:right; height:24px;}
  div#langctl ul{ height:24px;}
  div#langctl ul li{ float:left;}
  
  /* 文字サイズ変更 */
  div#fontctl{ float:right; padding:10px; height:24px; background:url(../images/bg_noise_green02.gif) repeat; width:235px;}
  div#fontctl p{ width:130px; float:left; height:24px;}
  div#fontctl ul li{ float:right; height:24px; margin-left:2px;}
  div#fontctl ul li a{ display:block; width:26px; height:24px;}
@media screen and (max-width: 767px){
  div#langctl{ display:block; width:100%; padding:3px 6px; }
  div#langctl ul{ width:251px; margin:0 auto;}
  div#fontctl{ display:none;}
  
}
@media screen and (min-width: 768px){
  div#fontctl{ display:block;}
}
@media screen and (min-width: 960px){
  div#tools{ margin:0 20px 20px; padding-top:20px;}
  div#tools-fixed{ padding-top:5px;}
}
@media screen and (min-width: 1120px){
  div#tools-fixed{ float:right; width:530px; margin-left:-530px; padding:0;}
}



/*==================================================================================================================================================
@group 右カラム：かんたん検索（ライフシーン、くらしの情報）、このカテゴリーから探す
==================================================================================================================================================*/

/* -----かんたん検索（ライフシーン、くらしの情報）-------------------- */
div#second-lifescene,
div#second-lifeinfo{ clear:both; margin:0 5px; padding-bottom:10px;}

div#second-lifescene h2,
div#second-lifeinfo h2{ border-bottom:2px solid #92AE79; padding:5px;}

div#second-lifescene li,
div#second-lifeinfo li{ width:33%; float:left; text-align:center;}

div#second-lifescene li a,
div#second-lifeinfo li a{
  display:block;
  background:url(../images/dot_y_trans.gif) repeat-y right top;
}
div#second-lifescene li a span,
div#second-lifeinfo li a span{ display:block; margin:3px;}
li#linavi01 span{
  display:block;
  background:url(../images/dot_y_trans.gif) repeat-y right top;
  padding:3px;
}
div#second-lifescene li img,
div#second-lifeinfo li img{ max-width:100%;}

@media screen and (min-width: 320px){
  div#second-lifescene li,
  div#second-lifeinfo li{ width:25%;}
}
@media screen and (min-width: 360px){
  div#second-lifescene li,
  div#second-lifeinfo li{ width:20%;}
}
@media screen and (min-width: 768px){
  div#second-lifescene,
  div#second-lifeinfo{ margin:0;}
  div#second-lifescene li#lsnavi05 a,
  div#second-lifescene li#lsnavi10 a{ background:none;}
  div#second-lifeinfo li#linavi05 a,
  div#second-lifeinfo li#linavi10 a{ background:none;}
}
@media screen and (min-width: 960px){
  div#second-kantan-search{ padding-top:10px;}
  div#second-lifescene,
  div#second-lifeinfo{ width:50%; float:left; margin:0; padding:0; clear:none;}
  div#second-lifesceneInner{ margin-right:10px;}
  div#second-lifeinfoInner{ margin-right:10px;}
  div#second-lifescene li,
  div#second-lifeinfo li{ width:25%;}
  div#second-lifescene li#lsnavi05 a,
  div#second-lifescene li#lsnavi10 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
  div#second-lifeinfo li#linavi05 a,
  div#second-lifeinfo li#linavi10 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
  div#second-lifescene li#lsnavi04 a,
  div#second-lifescene li#lsnavi08 a{ background:none;}
  div#second-lifeinfo li#linavi04 a,
  div#second-lifeinfo li#linavi08 a{ background:none;}
}
@media screen and (min-width: 1120px){
  div#second-lifescene li,
  div#second-lifeinfo li{ width:20%;}
  div#second-lifescene li#lsnavi05 a,
  div#second-lifescene li#lsnavi10 a{ background:none;}
  div#second-lifeinfo li#linavi05 a,
  div#second-lifeinfo li#linavi10 a{ background:none;}
  div#second-lifescene li#lsnavi04 a,
  div#second-lifescene li#lsnavi08 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
  div#second-lifeinfo li#linavi04 a,
  div#second-lifeinfo li#linavi08 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
}
@media screen and (min-width: 1280px){
  div#second-lifescene,
  div#second-lifeinfo{ width:210px; float:none; clear:both; margin-bottom:20px;}
  div#second-lifesceneInner{ margin-right:0;}
  div#second-lifeinfoInner{ margin-right:0;}
  div#second-lifescene li,
  div#second-lifeinfo li{ width:50%;}
  div#second-lifescene li#lsnavi05 a,
  div#second-lifescene li#lsnavi10 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
  div#second-lifeinfo li#linavi05 a,
  div#second-lifeinfo li#linavi10 a{ background:url(../images/dot_y_trans.gif) repeat-y right top;}
}

/* -----各課代表電話番号-------------------- */
div#phonelist{ margin:0 5px 0 0;}
div#phonelist #phone-chuo{ padding-bottom:10px; border-bottom:1px dotted #ACAC9D;}
div#phonelist #phone-tomochi{ margin-top:20px;}
div#phonelist h2{ border-bottom:2px solid #92AE79;}
div#phonelist h3{ font-weight:100; font-size:90%; background:url(../images/bg_phonetitle.gif) no-repeat left top; margin-top:10px; padding:2px 6px;}
div#phonelist table{ width:100%; font-size:90%; border-top:1px solid #AAAAAA; border-left:1px solid #AAAAAA; margin-top:10px;}
div#phonelist table tbody{}
div#phonelist table th{ width:40%; background:#DDD; padding:0.2em 1.2em 0.2em 0.5em; font-weight:100; border-right:1px dotted #AAAAAA; border-bottom:1px solid #AAAAAA;}
div#phonelist table td{ width:70%; padding:0.2em 0.5em 0.2em 0.5em; font-weight:100; border-right:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; word-break:break-all;}
div#phonelist p{ font-size:90%; margin:5px;}
@media screen and (min-width: 480px){
	div#phonelist #phone-chuo{ width:50%; float:left; padding-bottom:0; border-bottom:none;}
	div#phonelist #phone-tomochi{ width:50%; float:right; margin-top:0;}
	div#phonelist #phone-chuoInner{ padding:5px;}
	div#phonelist #phone-tomochiInner{ padding:5px;}
}
@media screen and (min-width: 960px){
div#phonelist{ margin:0 20px 0 0;}
}
@media screen and (min-width: 1280px){
div#phonelist{ margin:0;}
div#phonelist #phone-chuo{ width:100%; padding-bottom:10px; border-bottom:1px dotted #ACAC9D;}
div#phonelist #phone-tomochi{ width:100%; margin-top:10px;}
div#phonelist #phone-chuoInner{ padding:0px 3px;}
div#phonelist #phone-tomochiInner{ padding:10px 3px;}
div#phonelist table th{ width:45%;}
div#phonelist table td{ width:65%;}
}


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

div#footer{ clear:both; padding:0; font-size:smaller; line-height:1.4em; border-top:3px solid #5B8F36;}
div#footer-content{ padding:10px 0; margin:0 5px;}
div#footer-content strong#flogo{
  display:block;
  width:70px;
  float:left;
  margin-right:-70px;
  text-align:center;
  position:relative;
  z-index:99999;
}
div#footer-content strong img{ width:60px;}
div#footerContent{ width:100%; float:right;}
div#footerContentInner{ margin-left:70px; border-left:1px solid #C2D9B3; padding-left:10px;}
div#footerContent span{ display:block;}
div#footerNav{ padding:0;}
div#footerNav ul{ padding:0}
div#footerNav ul li{ background:url(../images/dot_y_trans.gif) repeat-y top right; padding:3px 6px 3px 3px; display:inline-block;}
p#copy{
  clear:both;
  font-size:78%;
  text-align:center;
  word-wrap:break-word;
  padding:5px 0;
  background:#558B2F;
}

@media screen and (min-width: 480px){
  div#chuou{ clear:both;}
  div#tomochi{ clear:both;}
  div#chuou address{background:url(../images/bg_fc01.gif) no-repeat left top; padding:5px 5px 5px 90px;}
  div#tomochi address{background:url(../images/bg_fc02.gif) no-repeat left top; padding:5px 5px 5px 90px;}
}
@media screen and (min-width: 480px){
  div#footerNav ul li{ float:left;}
}
@media screen and (min-width: 768px){
  div#footer{ font-size:95%; line-height:1.5em;}
  div#footerContentInner{ margin-left:100px; padding:5px 0 0 0;}
  div#footer-content strong{ width:90px; margin-right:-90px;}
  div#footer-content strong img{ width:74px;}
  div#chuou{ width:50%; float:left;}
  div#tomochi{ clear:none; width:50%; float:left;}
  p#copy{ font-size:80%;}
  div#footerNav ul li{ padding:3px 8px;}
}
@media screen and (min-width: 960px){
  div#footer-content{ margin:0 15px;}
  div#footer-content strong{ width:102px; margin-right:-102px;}
  div#footer-content strong img{ width:92px;}
  div#footerContentInner{ margin-left:105px;}
}
@media screen and (min-width: 1120px){
  div#chuou{ width:490px; float:left;}
  div#tomochi{ width:490px; float:left;}
}


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

#ad-column{ padding:5px;}
#ad-column img{ max-width:100%;}

.adList{ clear:both;}
.adList li{ width:20%; float:left; max-width:164px;}
.adList li a,
.adList li span{ display:block; margin:2px;}

@media screen and (min-width: 768px){
  #ad-column{ padding:5px 20px;}
}
@media screen and (min-width: 1280px){
  #ad-column{ margin:0 250px 0 0}
  .adList li{ max-width:170px;}
  .adList li a,
  .adList li span{ margin:5px;}
}
/*==================================================================================================================================================
@group 都市圏連携
==================================================================================================================================================*/

#tsk-column{ padding:5px;}
#tsk-column .titlebar{ height:30px;}
#tsk-column img{ max-width:100%;}
#tsk-column h4{ text-align:left; float:left; width:50%;}

#tsk-about{ text-align:right; float:right; width:50%;}

@media screen and (min-width: 768px){
  #tsk-column{ padding:5px 20px;}
}
@media screen and (min-width: 1280px){
  #tsk-column{ margin:0 250px 0 0}
}
#tsk-column iframe{ width:100%; border:1px solid #CEDBC4;}