@charset "Shift_JIS";

/* ---▼▼ 全体の背景・テキスト ▼▼--- */
body {
margin: 0;
padding: 0;
background-color: #f9f9f9; /* 全体の背景色 */
color: #404040; /* 全体の文字色 */
font-size: 80%; /* 全体の文字サイズ */
}

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

/* ---▼▼ コンテナ ▼▼--- */
#container {
width: 980px; /* コンテナの幅 */
height: 1120px;
margin: 0 auto; /* センタリング */
background-color: #ffffff; /* コンテナの背景色 */
border-left: 1px #c0c0c0 solid; /* コンテナの左境界線 */
border-right: 1px #c0c0c0 solid; /* コンテナの右境界線 */
}

/* ---▼▼ ページ ▼▼--- */
#page {
width: 950px; /* ページの幅 */
margin: 0 auto; /* センタリング */
}

/* ---▼▼ ヘッダー内の設定開始 ▼▼--- */
/* ---▼ ヘッダー（全体） --- */
#header {
position: relative; /* 相対配置（ガイドメニューのために設定） */
width: 100%; /* IE 6のために幅の指定が必要 */
margin: 0 0 10px; /* ヘッダのマージン（上、左右、下） */
padding: 70px 0 0px; /* ヘッダのパディング（上、左右、下） */
}

/* ---▼ キャッチフレーズ画像（愛します、守ります、日本の海） --- */
#header h1.siteTitle img {
position: absolute; /* 絶対配置 */
top: 40px; /* 上からの距離 */
left: 0px; /* 右からの距離 */
margin: 0;
padding: 0;
}

/* ---▼ ガイドメニュー（右上サイトマップ並び等） --- */
#header ul.guide {
position: absolute; /* 絶対配置 */
top: 55px; /* 上からの距離 */
right: 10px; /* 右からの距離 */
margin: 0;
padding: 0;
list-style-type: none;
font-size: 13px; /* 見出しの文字サイズ */
}
/*▽ メニュー項目 */
#header ul.guide li {
display: inline;
padding: 0 4px 0px 8px; /* 項目のパディング（上右下左） */
background: url(../image/menu_line_gray.gif) no-repeat left; /* 項目の背景（区切り線） */
}
/*▽ 最初の項目 */
#header ul.guide li.first {
background: none; /* 区切り線なし */
}

/* ---▼ トップページ画像　左（弁慶うみまる） --- */
#header div.opening {
margin-top: 4px; /* トップ画像（左）の上マージン */
margin-bottom: 0px; /* トップ画像（左）の下マージン */
padding: 5px 0px 0px 0px; /* トップ画像（左）のパディング（上右下左） */
float: left;
}
/*▽ トップページ画像エリア内の見出し */
#header div.opening1 h2 {
margin: 0;
}

/* ---▼ トップページ画像　右（スライド写真） --- */
#header div.viewer {
margin-top: 10px; /* スライド画像の上マージン */
margin-bottom: 0px; /* スライド画像の下マージン */
padding: 0px 0px 0px 0px; /* スライド画像のパディング（上右下左） */
float: right;
}
/*▽ スライド画像の設定 */
.viewer {
margin: 0 auto;
width: 660px;
height: 200px;
text-align: left;
overflow: hidden;
}
.viewer ul {
width: 660px;
height: 200px;
text-align: left;
overflow: hidden;
position: relative;
}
.viewer ul li {
top: 0;
left: 0;
width: 660px;
height: 200px;
display: none;
position: absolute;
}



/* ---▼ メニュー項目 --- */
/* メインメニュー */
#menu ul {
   width: 948px; /* メニューの幅（ページの幅から2px引いた値） */
   height: 35px; /* メニューの高さ（ページの最上部からの値） */
   display:block;
   list-style-type: none;
   margin: 210px 0px 0px 0px; /* ライブカメラの行のマージン（上右下左） */
   padding:0;
   border: 1px solid; /* ヘッダメニューの境界線（太さ、スタイル） */
   background: #847b65 url(../image/hor_menu8_off.gif) repeat-x top; /* ヘッダメニューの背景 */
   border-color: #7d735f #cbc0a7 #cbc0a7 #7d735f; /* ヘッダメニューの境界線色（上右下左） */
}
/* サブメニュー */
#menu ul ul{
   display: none;
   position: absolute;
   margin: 0; /* 2段目以降のマージン */
   left: 0;
   width: 158px; /* 項目の幅 */
}
/* リスト */
#menu li {
   float:left;
   width: 158px; /* 項目の幅 */
   font-size: 14px; /* 見出しの文字サイズ */
   text-align: center;
   line-height: 250%;
background: #847b65 url(../image/hor_menu8_off.gif) repeat-x top; /* ヘッダメニューの背景 */
}
#menu li a {
   display: block;
   width: 158px; /* 項目の幅 */
   text-decoration: none; /* テキストの下線（なし） */
   font-weight: bold; /* 文字の太さ（太字） */
   color: #ffffff; /* 文字色 */
   border: 1px solid; /* リンクエリアの境界線（太さ、スタイル） */
   border-color: #cbc0a7 #7d735f #7d735f #cbc0a7; /* リンクエリアの境界線色（上右下左） */
}
#menu li li {
   clear: both;
   text-align: center;
   color: #ffffff; /* 文字色 */
}
#menu li:hover {
   position: relative;
   background: #7BBA10;
   color: #333;
}
#menu li:hover > ul {
   display: block
}




/* ---▼ 注目情報（ライブカメラ紹介） --- */
#header ul.spotlight {
margin: 5px 0 0px; /* 注目情報のマージン（上、左右、下） */
padding: 6px; /* 注目情報のパディング */
background-color: #4d4d4d; /* 注目情報の背景色 */
list-style-type: none;
text-align: center;
}
/*▽ リスト項目 */
#header ul.spotlight li {
display: inline;
padding: 0 25px 0 11px; /* 項目のパディング（上右下左） */
background: url(../image/menu_triangle2.gif) no-repeat 0 0.2em; /* 項目の背景（マーカー） */
line-height: 100%;
}
/*▽ リンクエリア */
#header ul.spotlight li a {
color: #f0f0f0; /* リンクの文字色 */
font-size: 15px; /* 全体の文字サイズ */
}

/* ---▼ 罫線 --- */
#header hr.none {
display: none; /* 表示形式（なし） */
}

/* ---▲▲ ヘッダー内の設定終了 ▲▲--- */

/* ---▼▼ 新着情報の設定開始 ▼▼--- */
/* ---▼ 新着情報 大枠 --- */
#new {
width: 950px; /* メインカラムの幅（上書き） */
margin-top: -5px;
margin-bottom: 10px;
}

/* ---▼ 新着情報（タイトル部分） --- */
/* 見出しエリア */
#new div.normal div.heading {
margin: 0 0 1em; /* 見出しエリアのマージン（上、左右、下） */
padding: 6px 8px 3px; /* 見出しエリアのパディング（上、左右、下） */
background: #f9f9f9 url(../image/heading_back1.gif) repeat-x; /* 見出しエリアの背景 */
border: 1px #c0c0c0 solid; /* 見出しエリアの境界線 */
font-size: 1.5em;
}
/*▽ 見出し */
#new div.normal div.heading h2 {
margin: 0;
font-size: 22px; /* 全体の文字サイズ */
line-height: 100%;
}
/*▽ 段落 */
#new div.normal p {
margin: 0 5px 1em; /* 段落のマージン（上、左右、下） */
line-height: 160%; /* 行の高さ */
}

/* ---▼ 新着情報（記事部分） --- */
#new div.update {
padding-bottom: 15px; /* 新着情報枠内の下パディング */
border: 1px #c0c0c0 solid; /* セクションの境界線 */
}
/*▽ 記事エリア */
#new div.update div.heading {
margin: 0 0 0.5em; /* 記事エリアのマージン（上書き） */
border-style: none none solid; /* 記事エリアの境界線スタイル（上書き）　*/
}
/*▽ 新着情報エリア */
#new div.update dl {
width: 900px; /* 新着情報枠の幅（「950pxの幅」から50px引いた値） */
height: 100px; /* 新着情報枠の高さ（８行表示） */
margin: 0 auto; /* センタリング */
overflow-y: scroll;   /* スクロール表示 */ 
font-size: 14px; /* 全体の文字サイズ */
}
/*▽ 記事（日付）エリア */
#new div.update dt {
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 120%; /* 行の高さ */
}
/*▽ 記事（本文）エリア */
#new div.update dd {
margin: 0;
padding: 7px 0px 6px 7px; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #c0c0c0 dotted; /* 本文エリア下境界線 */
line-height: 120%; /* 行の高さ */
}
/* ---▲▲ 新着情報の設定終了 ▲▲--- */


/* ---▼▼ 参考情報、ニュースフラッシュ　の設定開始 ▼▼--- */
/* ---▼ 　大枠　（参考情報、ニュースフラッシュ合わせた枠） --- */
#content {
float: left;
width: 950px; /* コンテンツの幅 */
margin-bottom: 10px; /* コンテンツの下マージン */
}

/* ---▼▼ ニュースフラッシュの設定開始 ▼▼--- */
/* ---▼ ニュースフラッシュ（大枠部分） --- */
#news {
float: right;
width: 628px; /* ニュースフラッシュの幅 */
height: 350px; /* ニュースフラッシュの高さ */
margin-bottom: 10px; /* コンテンツの下マージン */
padding: 5px 10px 10px 0; /* 本文、写真　領域のパディング（上、右、下、左） */
background: #f0e7ce url(../image/emphasis_back4.gif) repeat-x top; /* セクションの背景 */
border: 1px #c0c0c0 solid; /* セクションの境界線 */
}
/* ---▼ ニュースフラッシュ（タイトル部分） --- */
#news div.topic {
padding: 10px 250px 10px 15px; /* セクションのパディング（上、右、下、左） */
background: #f0e7ce url(../image/emphasis_back4.gif) repeat-x top; /* セクションの背景 */
}
/*▽ タイトル */
#news div.topic h2 {
margin: 0; /* 見出しのマージン（上、右、下、左） */
font-size: 20px; /* 見出しの文字サイズ */
color: #94845a; /* 見出しの文字色 */
border-top: none; /* ニュースフラッシュ（題字）の境界線（上）なし */
border-right: none; /* ニュースフラッシュ（題字）の境界線（右）なし */
border-bottom: medium silver double; /* ニュースフラッシュ（題字）の境界線（下）中幅、銀色、二重線 */
border-left: thick silver double; /* ニュースフラッシュ（題字）の境界線（左）中幅、銀色、二重線 */
}
/*▽ 写真枠内 */
#news div.photo {
float: right;
padding: 10px; /* 写真枠内の上パディング */
background-color: #f9f9f9; /* 写真枠内の背景色 */
border: 1px #c0c0c0 solid; /* 写真枠内の境界線 */
text-align: center;
font-size: medium;
}
/*▽ 写真 */
#news div.photo img {
border: 3px #c0c0c0 solid; /* 写真の境界線 */
}
/*▽ 写真枠内　文字高さ調整 */
#news div.photo p {
margin: 10px 10px 5px; /* 写真枠内の文字マージン（上、左右、下） */
}
/*▽ 記事枠（タイトル） */
#news div.title p {
padding: 0px 0px 0px 25px; /* タイトル　内側余白 */
font-size: 16px; /* タイトルの文字サイズ */
font-weight: bold; /* タイトルの文字太さ */
}
/*▽ 記事枠（記事内容） */
#news div.text p {
padding: 0px 240px 0px 30px; /* 記事内容エリア 内側余白*/
font-size: 15px; /* 内容の文字サイズ */
line-height: 150%; /* 内容の行の幅指定 */
}
/* ---▲▲ ニュースフラッシュの設定終了 ▲▲--- */

/* ---▼▼ 参考情報の設定開始 ▼▼--- */
/* ---▼ 参考情報（大枠部分） --- */
#nav {
float: left;
width: 298px; /* 参考情報の幅 */
}

/* ---▼ 参考情報（タイトル背景） --- */
#nav div.section {
padding: 2px; /* セクションのパディング */
border: 1px #c0c0c0 solid; /* セクションの境界線 */
}
#nav div.section h2 {
padding: 6px 10px; /* タイトルのパディング（上下、左右） */
font-size: 120%; /* タイトルの文字サイズ */
line-height: 100%;
}

/* ---▼ 参考情報メニュー --- */
#nav div.subMenu {
background: #f9f9f9 url(../image/box_back_gray4.gif); /* 参考情報メニューの背景 */
}
/*▽ 参考情報（タイトル部分） */
#nav div.subMenu h2 {
margin: 0 0 10px 0; /* 見出しのマージン（上書き） */
background-color: #b3a98c; /* 見出しの背景色 */
color: #ffffff; /* 見出しの文字色 */
font-size: 23px; /* 見出しの文字サイズ */
}
/*▽ 参考情報メニューの配置 */
#nav div.subMenu ul.nl {
margin: 0 0 5px 25px; /* メニューエリアのマージン（上、右、下、左） */
font-size: 1.5em; /* メニューエリアのフォントサイズ */
list-style-type: none;
}
/*▽ メニュー（文字）の配置 */
#nav div.subMenu ul.nl li {
padding: 0 2px 8px 14px; /* メニュー（文字）のパディング（上右下左） */
background: url(../image/menu_triangle6.gif) no-repeat 2px 0.15em; /* 項目の背景（右三角マーカー） */
}
/*▽ リンクエリア */
#nav div.subMenu ul.nl li a {
text-decoration: none; /* テキストの下線（なし） */
font-size: 19px; /* 見出しの文字サイズ */
}
/*▽ ポイント時の設定 */
#nav div.subMenu ul.nl li a:hover {
text-decoration: underline; /* テキストの下線（あり） */
}
/* ---▲▲ 参考情報の設定終了 ▲▲--- */

/* ---▼ 罫線 --- */
#content hr.clear {
clear: right; /* 右フロートのクリア */
width: 100%;
margin: 75px 0;
visibility: hidden; /* 非表示 */
}

/* ---▲▲ 参考情報、ニュースフラッシュ　の設定終了 ▲▲--- */

/* ---▼▼ フッタ内の設定開始 ▼▼--- */
/* ---▼ フッタ --- */
#footer {
clear: left; /* 左フロートのクリア */
width: 100%;
padding: 30px 0 30px; /* フッタのパディング（上、左右、下） */
border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
font-size: 13px; /* 見出しの文字サイズ */
}

/* ---▼ フッタメニュー --- */
#footer ul.nl {
margin: 0 0 10px; /* フッタメニューのマージン（上、左右、下） */
padding: 0;
list-style-type: none;
text-align: center;
}
/* ---▼ メニュー項目 --- */
#footer ul.nl li {
padding: 0 4px 0 8px; /* 項目のパディング（上右下左） */
background: url(../image/menu_line_gray.gif) no-repeat left; /* 項目の背景（区切り線） */
display: inline;
}
/*▽ 最初の項目 */
#footer ul.nl li.first {
background-image: none; /* 区切り線なし */
}
/*▽ ガイドメニュー */
#footer ul.guide {
margin: 0 0 15px; /* ガイドメニューのマージン（上書き） */
}

/* ---▼ アドレス・コピーライト --- */
#footer address {
font-style: normal;
text-align: center;
line-height: 140%; /* 行の高さ */
}
/* ---▲▲ フッタ内の設定終了 ▲▲--- */

/* ---▼▼ その他の設定開始 ▼▼--- */
/* ---▼ clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* ---▲▲ その他の設定終了 ▲▲--- */