/* ---------------------------------
   container
   メニューと本文を横に並べる <div>
   中心部に配置
------------------------------------ */
div#container {
  border-collapse : collapse;
  margin-left : auto;
  margin-right : auto;
  margin-top : 10px;
  width : 100%;
/* ↑ この設定がないと、rightcell の中に見かけ上の余白ができない */
}

div#container div#leftcell {  /* メニュー領域 */
  padding-right : 4px;
  vertical-align : top;
  float : left;
}

div#container div#rightcell {  /* 本文領域 */
  vertical-align : top;
  float : right;
  width : 80%;
/* ↑ 仮の値をセットしておき、動的に最大可能幅に再設定する */
/*    Window 幅が広い場合は、mainarea の幅を再設定して、   */
/*    見かけ上、右側に余白ができるようにする               */
/*    印刷時には !important を使ってさらに再設定する       */
}

/* ---------------------------------
   menuarea
   メニュー領域
   中心部左側に配置
------------------------------------ */
#menuarea {
  font-size : 14px;   /* メニュー幅を固定するために固定サイズとする */
  width : 165px;      /* メニュー幅を固定 */
  line-height : 180%;
}

#menuarea h2 {
  font-size : 100%;
  text-align : center;
  background-color : blue;
  font-weight : bold;
  color : white;
  border-bottom : solid gray 1px;
}

/* ---------------------------------
   menustyle
   メニュー領域の共通スタイル
------------------------------------ */
div.menustyle {
  margin-bottom : 1em;
  border : solid gray 1px;
  border-bottom : none;
  /* border を指定しないと div の左右に色が現れる */
}

div.menustyle ul {
  font-size : 100%;
  list-style-type : none;
}

div.menustyle ul li {
  border-bottom : groove gray 1px;
  /* border を指定しないと li の高さが間延びする */
}

div.menustyle ul li.moremenu {
  background-image : url("r-arrow-bg.gif");
  background-repeat : no-repeat;
  background-position : right;
}

* html div.menustyle ul li.moremenu {
  /* IE6 ではサブメニューを表示しないため表示させない */
  background-image : none;
}

*:first-child+html div.menustyle ul li.moremenu {
  /* IE7 ではサブメニューを表示しないため表示させない */
  background-image : none;
}

/* block では IE7 で不具合が生じるため inline-block とする */
/* （hover させると img の左マージンがなくなり左端に寄る） */
*:first-child+html div.menustyle ul li a {
  display : inline-block;
}

div.menustyle ul li a {
  padding-top : 2px;
  padding-bottom : 1px;
  display : block;        /* a の幅を li の幅に広げる */
/* ↓動的に IE バージョンを判定し、inline-block に変更するようにした */
  /* block では IE8（互換表示） で不具合が生じるため inline-block とする */
  /* （hover させると img の左マージンがなくなり左端に寄る）             */
/* IE6 で印刷されないため使用中止
  padding-left : 25px;
  background-image : url("list_menu_g.gif");
  background-repeat : no-repeat;
  background-position : left center;
*/
/*  background-position : 5% center; */
/*  Netscape7.1 が 5% を認識できないため left で左寄せとし、
    list_menu_g.gif 自体に左側に余白8pxを持たせる */
}

div.menustyle ul li a img {
  margin-left : 7px;
  margin-right : 4px;
  margin-top : 0px;
  margin-bottom : 2px;
}

div.menustyle ul li a:link {
  text-decoration : none;
  color : blue;  /* 訪問後も色を変えない */
}

div.menustyle ul li a:visited {
  text-decoration : none;
  color : blue;  /* 訪問後も色を変えない */
}

div.menustyle ul li a:hover {
  color : red;
  text-decoration : underline;
  background-color : #ffecec;
/* IE6 で印刷されないため使用中止
  background-image : url("list_menu_g.gif");
  background-repeat : no-repeat;
  background-position : left center;
*/
/*  background-position : 5% center; */
/*  Netscape7.1 が 5% を認識できないため left で左寄せとし、
    list_menu_g.gif 自体に左側に余白8pxを持たせる */
}

/* ---------------------------------
   ドロップダウンメニュー用の設定
------------------------------------ */
div.menustyle > ul > li {
  position : relative;  /* サブメニューの表示基準位置 */
}

/* サブメニュー */
div.menustyle ul li ul {
  position : absolute;
  top : -1px;           /* div.menustyle > ul > li の右に表示する   */
  left : 150px;         /* div.menustyle > ul > li に対して位置決め */
  z-index : 2;
  display : none;
  width : 15em;
  height : 32px;
  border-top : solid gray 1px;
}

div.menustyle ul li:hover ul {
  display : block;
}

/* IE7 ではサブメニューを表示しない   */
/* マウスで選択しづらいため使用しない */
*:first-child+html div.menustyle ul li:hover ul {
  display : none;
}

div.menustyle ul li ul li {
  border-left : solid gray 1px;
  border-right : solid gray 1px;
  background-color : #fafafa;
}

/*
   IE7 で サブメニューを #view_canvas よりも上に表示させるために
   leftcell, rightcell の z-index を設定しなければならないが、
   それを有効にするために position : relative もセットしなければならない。
*/
#leftcell {
  position : relative;
  z-index : 1;
}

#rightcell {
  position : relative;
  z-index : 0;
}


/* ---------------------------------
   publicmenu
   公開メニュー領域
   menuarea 領域内の上部に配置
------------------------------------ */

/* ---------------------------------
   eventmenu
   公開メニュー領域
   menuarea 領域内の上部に配置
------------------------------------ */
#eventmenu ul {
  border-top : groove gray 1px;
}

#eventmenu table {
  font-size : 80%;
  line-height : 120%;
  width : 100%;
  margin : 0px;
  background-color : white;
  border : none;
}

#eventmenu table td.datecol {
  padding : 0px 2px;
/*  text-align : center; */
  vertical-align : top;
}

#eventmenu table td.datacol {
  padding : 0px 2px;
  padding-bottom : 5px;
}

#eventmenu ul#eventlist {
  font-size : 70%;
  background-color : skyblue;
  border-bottom : groove gray 1px;
}

#eventmenu ul#eventlist li {
  border-bottom : none;
  list-style-type : disc;
  line-height : 120%;
  margin-left : 2em;
}

/* 2016/10/07 市システム更改による会員専用ページ廃止

/ * ---------------------------------
   privatemenu
   会員用メニュー領域
   menuarea 領域内の中部に配置
------------------------------------ * /
#privatemenu p#caption {
  width : 90%;
  margin-left : auto;
  margin-right : auto;
  / * margin : auto; では IE6 で上下が間延びする * /
  font-size : 80%;
  font-weight : bold;
}

#privatemenu table {
  font-size : 100%;
  width : 90%;  / * p#caption の幅と合わせる * /
  margin : auto;
  background-color : white;
  border : solid gray 1px;
}

#privatemenu table td {
  padding : 0px 3px;
}

#privatemenu p#lampnote {
  text-align : right;
  font-size : 80%;
  padding : 0px 5px;
}

#privatemenu ul {
  border-top : groove gray 1px;
}

2016/10/07 市システム更改による会員専用ページ廃止 */

/* ---------------------------------
   joinusmenu
   各種案内メニュー領域
   menuarea 領域内の下部に配置
------------------------------------ */

/* ---------------------------------
   cityofficemenu
   市役所関係メニュー領域
   menuarea 領域内の下部に配置
------------------------------------ */
#cityofficemenu p#comment {
  font-size : 80%;
  margin-top : -5px;
  text-align : center;
}

#cityofficemenu img#citylogo {
  margin : 0px;
}

/* ---------------------------------
   mainaera
   メインの領域
   中心部右側に配置
------------------------------------ */
#mainarea {
  /* 幅が広い場合は、動的に幅を 800px に設定する */
  /* 印刷時には、幅を 500px に設定する           */
}

/* ---------------------------------
   contents
   index.html 用に設定を上書き
------------------------------------ */
#contents {
  margin-right : 0px;
  margin-left : 0px;
}

/* ---------------------------------
   welcome
   ようこそ
------------------------------------ */
#welcome {
}

#welcome h3 {
  background : url("welcomebg.gif") repeat-x left bottom;
  border : none;
  margin : 0px;
  padding : 0px;
  margin-bottom : 0.5em;
}

#welcome p {
  margin : 0px;
}

/*
   スライドショー
*/
#view_canvas {
  float : left;
  width : 548px;   /* 540+8 */
  height : 308px;  /* 300+8 */
  overflow : hidden;
  position : relative;
}

#view_canvas img {
  margin : 0em 8px 8px 0px;
  vertical-align : top;
  border : none;
  top: 0;
  left: 0;
  position: absolute;
}

/*
   １枚物
*/
p#view {
  display : none;  /* 通常は非表示 */
  float:left;
}

p#view img {
  margin : 0em 8px 8px 0px;
  vertical-align : top;
  border : none;
}

p#view img#forprint {
  display : none;
}

p#flag {
  float:left;
}

p#flag img {
  margin : 0em 10px 0.5em 0px;
  vertical-align : top;
}

div#counter {
  float : left;
  white-space : nowrap;
  text-align : center;
  vertical-align : bottom;
  font-size : small;
  margin-right : 10px;
}

p#counterstart {
  font-style : italic;
}

div#flagandcounter {
  float:left;
}

/*
   サイト検索　Google Search
*/
#sitesearch {
  float:left;
}

#sitesearch form {
  margin : 0px;
  padding : 0px 2px 2px 2px;
  width : 244px;
  font-size : 12px;  /* サイズを固定し <input> のサイズ変動を防ぐ */
  border : solid gray 1px;
  margin-bottom : 1ex;
}

#sitesearch p {
  font-size : small;
  padding-left : 4px;
}

#sitesearch p#poweredby {
  font-size : 12px;
  line-height : 12px;
  text-align : right;
}

/*
   安全・安心マップ
*/
#securitymap {
  float:left;
}

#securitymap img {
  margin-bottom : 4px;
}

/* ---------------------------------
   banner
   バナー
------------------------------------ */
#banner {
}

#banner p {
  padding : 0px;
  margin : 0px;
}

#banner img {
  margin : 0px 4px 4px 0px;
}


/* ---------------------------------
   leftbox
   メイン領域の左部分
------------------------------------ */
#leftbox {
  clear : both; /* clear しないと印刷時にレイアウトが壊れる */
  float : left;
/*  width : 59%;   #menuarea:10em, #rightbox:38%  season画像幅=200px */
  width : 50%;  /* #menuarea:10em, #rightbox:49%  season画像幅=250px */
/* ↑ この設定値はウィンドウ幅によって動的に変更する */
/*  min-width : 350px; */
  /* Netscape7.1, Opera9.23, Firefox2.0.0.8 は OK */
  /* しかし印刷時におかしくなるため削除           */
}

/* ---------------------------------
   whatsnew
   新着情報
------------------------------------ */
#whatsnew {
}

#whatsnew table {
  font-size : small;
  line-height : 120%;
}

#whatsnew th {
  display : none;
}

#whatsnew td.datecol {
  width : 4em;
  padding : 3px 2px 3px 2px;
  white-space : nowrap;
  vertical-align : top;
  border : none;
  background : none;
}

#whatsnew td.desccol {
  vertical-align : top;
  padding : 3px 1ex 3px 2px;
  border : none;
  background : none;
  width : 500px;
  /* whatsnew の width で制限される */
}

/* 最新日の未訪問リンクだけハイライト表示 */
#whatsnew tr.newest td a:link {
  background : #ffff88;
}

/* default.css と同じ */
#whatsnew td a:link {
}

#whatsnew td a:visited {
}

#whatsnew td a:hover {
}

/* ---------------------------------
   info
   お知らせ
------------------------------------ */
#info {
}

#info ul {
  margin-right : 1ex;  /* default.css を上書き */
  margin-left : 1.5em; /* default.css を上書き */
  list-style-type : square;
}

#info .highlight {
  background : #ffff88;
  font-weight : bold;
}

/* ---------------------------------
   rightbox
   メイン領域の右部分
------------------------------------ */
#rightbox {
  /* Netscape7.1, Opera9.23, Firefox2.0.0.8 で右回り込みに必要 */
  float : right;
  margin-left : auto;
  margin-right : auto;
  margin-top : 2em;
/*  width : 38%;   #menuarea:10em, #leftbox:59%  season画像幅=200px  */
  width : 49%;  /* #menuarea:10em, #leftbox:50%  season画像幅=250px  */
/* ↑ この設定値はウィンドウ幅によって動的に変更する */
/*  min-width : 210px;  #etcborder の幅+margin */
  /* Netscape7.1, Opera9.23, Firefox2.0.0.8 は OK */
  /* しかし印刷時におかしくなるため削除           */
}

/* ---------------------------------
   season
   季節の画像
------------------------------------ */
/* 背景画像として利用する場合の設定 */
/*
body {
  background : url("season03b.jpg") no-repeat;
  background-position : 100% 320px;
}
*/
/* この上は通常はコメントアウトすること */

/*
   スライドショー
*/
#season {
  margin : 0 auto;
  width : 250px;
  text-align : center;
}

#season p {
  margin : 0px;
  padding : 0px;
  line-height : 100%;  /* p の line-height のデフォルト値をリセットする */
}

#seasonimagetitle {
  font-size : small;
  font-weight : bold;
/*  color : #ff44ff;*/
/*  color : #0044ff;*/
  color : blue;
/*  color : red; */
/*  color : #ec8200;   orange */
}

#season form {
  margin : 1ex auto 1ex auto;
}

#seasonimagecaption {
  font-size : small;
}

table#seasonimagetable {
  margin : 0;
}

#seasonimagetable td {
  margin : 0 auto;
  padding : 0;
  background : none;
  border : none;
}

#seasonimage {
  margin : 0 auto;
  width : 250px;
  height : 200px;
  overflow : hidden;
  position : relative;
}

#seasonimage img {
  top: 0;
  left: 0;
  position: absolute;
}

#seasonauthor {
  margin : 0 auto 1em auto;
  font-size : x-small;
  color : gray;
  text-align : right;
}

/*
   ブログへのリンク
*/
p#flowerblog {
  margin : 0;
  padding : 0;
  text-align : center;
}

p#flowerblog img {
  border : solid black 1px;
}


/* ---------------------------------
   etc
   その他の情報
------------------------------------ */
#etc {
  text-align : center;
}

#etc div#etcborder {
  border : solid gray 1px;
  margin : 3em 5px 1em 5px;
  width : 200px; /* バナーの幅 160px */
  /* Netscape7.1, Opera9.23, Firefox2.0.0.8 で中央寄せに必要 */
  margin-left : auto;
  margin-right : auto;
}

#etc p {
  margin : 0px;
}

#etc img {
  margin : 1em 0px;
}

/* margin 指定は p#id のように
   p を明示する必要があるようだ
   あるいは #etc #id のように指定する */
/* #etc #d-chounai { */
p#d-chounai {
  line-height : 160%;
  font-size : 100%;
  text-align : center;
  background : blue;
  color : white;
  font-weight : bold;
  border-bottom : solid gray 1px;
}