@charset "UTF-8";
@import url(common.css);
@import url(textsettings.css);
/* ================================================================ *
	CSS for skyfriends SUBLIME design 2009
 * ================================================================ */

/* ---------------------------------------------------------------- *
	ドキュメント全体に関する設定です
 * ---------------------------------------------------------------- */
html,body { margin: 0; padding: 0; }
body {
  /* --- 基本的な前景色（文字色）を設定してください --- */
  background: #ffffff;
}
#screen { background-image: url(../_images/bk_main.jpg); background-repeat: no-repeat; background-position: center top; margin: 0; padding: 0; }
#container {
  /* --- 内容部分の背景を設定してください --- */
  /* Note：内容部分の背景を透明にしたり，透過 GIF を利用したりして
           背景に変化をつけることができます */
  background: #fff;
  /* --- ドキュメント本体の幅を設定してください --- */
  /* Note：百分率指定も可能です */
  width: 960px;
  /* --- ドキュメント本体の位置を設定してください --- */
  /* Note：「0」のみで左寄せ，「0 auto」でセンタリング */
  margin: 0 auto; padding: 0; }

/* ---------------------------------------------------------------- *
	ヘッダ部分の設定です
 * ---------------------------------------------------------------- */
#upper_wrap { background-color: #fff; background-image: url(../_images/bk_head.jpg); background-repeat: no-repeat; background-position: 50% top; width: 960px; height: 125px; margin: 0 auto; padding: 0; }
#header {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  width: 920px; height: 80px; margin: 0 auto; padding: 0; }
#header h1 { position: relative; top: 8px; width: 260px; float: left; margin-left: 5px; }
#header h2 { color: #fff; font-size: 1.1em; line-height: 1.3em; position: relative; top: 20px; width: 240px; float: left; margin-left: 10px; }
#header h2 a.sitemap { background-image: url(../_images/btn_sitemap.gif); background-repeat: no-repeat; background-position: center top; text-indent: -9999px; width: 86px; height: 14px; margin-top: 5px; margin-left: -2px; display: block; }
#header h2 a.sitemap:hover { background-position: 50% bottom; }
#header #big_btn a { background-image: url(../_images/mitusmori_01.gif); background-repeat: no-repeat; background-position: center top; text-indent: -9999px; position: relative; top: 15px; width: 297px; height: 52px; float: right; margin-right: 5px; display: block; }
#header #big_btn a:hover { background-position: 50% bottom; }
#top_img { width: 924px; height: 240px; margin-right: auto; margin-left: auto; }
/* ---------------------------------------------------------------- *
	ナビゲーション部分の設定です
 * ---------------------------------------------------------------- */

#navi {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #fff url(../_images/bk_navi2.gif) no-repeat 50% bottom; width: 924px; height: 45px; margin: 0 auto; padding: 0; }

#navi ul {
  /* --- マージンを設定してください --- */
  background-position: center top; width: 924px; height: 35px; margin: 0;
  /* --- パディングを設定してください --- */
  padding: 0; }

#navi ul li {
  /* --- マージンを設定してください --- */
  margin: 0;
  /* --- パディングを設定してください --- */
  padding: 0;
  /* --- 横並びにさせるためにフロートを指定してください --- */
  float: left; }

#navi ul li a { background-image: url(../_images/bk_navi.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; height: 35px; display: block; }
#navi ul li a.top { width: 149px; }
#navi ul li a.top:hover { background-position: left bottom; }
#navi ul li a.news { background-position: -149px top; width: 155px; }
#navi ul li a.news:hover { background-position: -149px bottom; }
#navi ul li a.aboutus { background-position: -304px top; width: 155px; }
#navi ul li a.aboutus:hover { background-position: -304px bottom; }
#navi ul li a.report { background-position: -459px top; width: 155px; }
#navi ul li a.report:hover { background-position: -459px bottom; }
#navi ul li a.faq { background-position: -614px top; width: 155px; }
#navi ul li a.faq:hover { background-position: -614px bottom; }
#navi ul li a.inquiry { background-position: -769px top; width: 155px; }
#navi ul li a.inquiry:hover { background-position: -769px bottom; }
/* ---------------------------------------------------------------- *
	コンテンツコンテナの設定です
 * ---------------------------------------------------------------- */
#main_container { width: 920px; margin-right: auto; margin-left: auto; padding-top: 8px; }
#main {
  /* ★ --- レイアウト調整：左右カラムの設定に応じて設定 --- */
  /* Note：padding-left をサイドメニューの幅＋マージンとし，
           padding-right をサイドコンテンツの幅＋マージンとして
           ください */
  background: tranparent url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)');
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  width: 695px; float: right; margin-top: 0; margin-bottom: 0; }
/* ---------------------------------------------------------------- *
	サイドメニュー部分の設定です
 * ---------------------------------------------------------------- */

#sidenavi {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  /* Note：ここでの背景設定はメニュー部分の内容がある部分にしか適用
           されません。サイドメニュー部分全体に背景を適用させる場合は
           コンテンツコンテナの背景として，サイドメニュー部分の背景を
           作ってください */
  background: #ffffff;
  /* ★ --- メニューの幅を設定してください --- */
  width: 218px;
  /* ★ --- メニューを左右どちらに寄せるか設定してください -- */
  /* Note：左に寄せる場合は，「left: 0; right: auto;」，右の場合は
           「left: auto; right: 0;」です */
  left: 20px; right: auto;
  /* --- パディングを設定してください --- */
  /* Note：コンテンツ部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  z-index: 1; }
#sidenavi .bnr { margin-bottom: 10px; }
#sidenavi ul {
  /* --- マージンを設定してください --- */
    margin: 0; padding: 50px 0 0; }
#sidenavi ul li {
  /* --- マージンを設定してください --- */
    margin: 0;
  /* --- パディングを設定してください（短縮プロパティでの設定です） --- */
    list-style-type: none; }
#sidenavi #menu01 { background-image: url(../_images/bk_side01.gif); background-repeat: no-repeat; background-position: left top; width: 215px; display: block; }
#sidenavi #menu01 ul li a { background-image: url(../_images/bk_side01.gif); background-position: left top; text-indent: -9999px; height: 30px; display: block; }
#sidenavi #menu01 ul li a.detail01 { background-position: left -51px; }
#sidenavi #menu01 ul li a.detail01:hover { background-position: right -51px; }
#sidenavi #menu01 ul li a.detail02 { background-position: left -81px; }
#sidenavi #menu01 ul li a.detail02:hover { background-position: right -81px; }
#sidenavi #menu01 ul li a.detail03 { background-position: left -111px; }
#sidenavi #menu01 ul li a.detail03:hover { background-position: right -111px; }
#sidenavi #menu01 ul li a.detail04 { background-position: left -141px; }
#sidenavi #menu01 ul li a.detail04:hover { background-position: right -141px; }
#sidenavi #menu01 ul li a.detail05 { background-position: left -171px; }
#sidenavi #menu01 ul li a.detail05:hover { background-position: right -171px; }
#sidenavi #menu01 ul li a.detail06 { background-position: left -201px; }
#sidenavi #menu01 ul li a.detail06:hover { background-position: right -201px; }
#sidenavi #menu02 { background-image: url(../_images/bk_side02.gif); background-repeat: no-repeat; background-position: left top; width: 215px; margin-top: 10px; display: block; }
#sidenavi #menu02 ul li a { background-image: url(../_images/bk_side02.gif); background-position: left top; text-indent: -9999px; height: 30px; display: block; }
#sidenavi #menu02 ul li a.detail01 { background-position: left -51px; }
#sidenavi #menu02 ul li a.detail01:hover { background-position: right -51px; }
#sidenavi #menu02 ul li a.detail02 { background-position: left -81px; }
#sidenavi #menu02 ul li a.detail02:hover { background-position: right -81px; }
#sidenavi #menu02 ul li a.detail03 { background-position: left -111px; }
#sidenavi #menu02 ul li a.detail03:hover { background-position: right -111px; }
#sidenavi #menu02 ul li a.detail04 { background-position: left -141px; }
#sidenavi #menu02 ul li a.detail04:hover { background-position: right -141px; }
#sidenavi #menu02 ul li a.detail05 { background-position: left -171px; }
#sidenavi #menu02 ul li a.detail05:hover { background-position: right -171px; }
#sidenavi #menu03 { background-image: url(../_images/bk_side03.gif); background-repeat: no-repeat; background-position: left top; width: 215px; margin-top: 10px; margin-bottom: 15px; display: block; }
#sidenavi #menu03 ul li a { background-image: url(../_images/bk_side03.gif); background-position: left top; text-indent: -9999px; height: 30px; display: block; }
#sidenavi #menu03 ul li a.detail01 { background-position: left -51px; }
#sidenavi #menu03 ul li a.detail01:hover { background-position: right -51px; }
#sidenavi #menu03 ul li a.detail02 { background-position: left -81px; }
#sidenavi #menu03 ul li a.detail02:hover { background-position: right -81px; }
#sidenavi #menu03 ul li a.detail03 { background-position: left -111px; }
#sidenavi #menu03 ul li a.detail03:hover { background-position: right -111px; }
#sidenavi #menu03 ul li a.detail04 { background-position: left -141px; }
#sidenavi #menu03 ul li a.detail04:hover { background-position: right -141px; }
#sidenavi  .textbox { background-color: #f2f2f2; position: relative; top: 10px; margin-bottom: 50px; padding-top: 10px; padding-bottom: 10px; }
#sidenavi .textbox p { font-size: 1.2em; line-height: 1.5em; width: 90%; margin-right: auto; margin-left: auto; }
/* Note：バグ回避のため，同じ値での指定を 2 回行ってください */
[id="sidenavi"]#sidenavi {
  /* ★ --- 上マージンを設定してください --- */
  /* Note：コンテンツ部分の上マージンと同じ値を設定してください */
  margin-top: 0;
}
html:lang(ja) #sidenavi {
  /* Note：直前の指定と同じ値を設定してください */
  margin-top: 0;
}

/* ---------------------------------------------------------------- *
	サイドコンテンツ領域の設定です
 * ---------------------------------------------------------------- */

#sidebox {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  /* Note：サイドコンテンツ領域内のそれぞれのコンテンツに背景色を
           指定してもよいでしょう */
  background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; width: 205px; }

/* ---------------------------------------------------------------- *
	コンテンツ部分の設定です
 * ---------------------------------------------------------------- */

#contents {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  width: 480px; float: left; margin-top: 0; margin-bottom: 15px; }
#contentsmain { width: 695px; float: left; margin-top: 0; margin-bottom: 50px; }
#contentsmain #pankuzu { background-color: #e6e6e6; width: auto; height: 30px; margin: 0 0 10px; padding: 0; }
#contentsmain #pankuzu p { font-size: 1.1em; position: relative; top: 7px; width: 675px; margin-right: auto; margin-left: auto; }
#contentsmain #pankuzu p a { color: #464646; text-decoration: underline; }
#contentsmain #pankuzu p a:hover { text-decoration: none; }
#contentsmain h3 img { margin-bottom: 15px; }
/* ---------------------------------------------------------------- *
	コンテンツ画像の設定です
 * ---------------------------------------------------------------- */

#contents img.fig {
  /* --- 画像をどちらに回り込ませるか設定してください --- */
  /* Note：left（左）または right（右）を指定します；この指定によって
           以降のマージンの指定方法が異なります */
  float: left;
  /* --- 画像のマージンを設定してください --- */
  /* Note：前記の回り込みについて「left」のとき→左マージン 0，
           「right」のとき→右マージン 0 としてください */
  margin-top: 0;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 0;
}

/* ---------------------------------------------------------------- *
	サイドボックス内のコンテンツの設定です
 * ---------------------------------------------------------------- */
#sidebox #contents {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #F2F2F2;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  /* Note：ボックス内の最初のボックスの上マージンは折りたたまれない
           ので，「0」を指定することをおすすめします */
  margin-top: 0;
  /* margin-bottom: 3px; */
  /* --- パディングを設定してください --- */
  /* Note：コンテンツ部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  /* padding-top: 1em; */
  /* padding-right: 1em; */
  /* padding-bottom: 1em; */
  /* padding-left: 1em; */
}

#sidebox #contents ul {
  /* --- 新着情報リストのマージンを設定してください（短縮プロパティでの設定です）--- */
  margin: 0 0 0 1.4em;
  /* --- 新着情報リストのパディングを設定してください（短縮プロパティでの設定です）--- */
  padding: 0;
}

#sidebox #contents ul li {
  /* --- 新着情報リストアイテム単体の下方向マージンを設定してください --- */
  margin-bottom: 0.5em;
}

/* ---------------------------------------------------------------- *
	画像のみのボックスを作る場合の設定です
 * ---------------------------------------------------------------- */

.imgbox {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #ffffff;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-top: 0;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- *
	サイドボックス内の画像のみボックスの設定です
 * ---------------------------------------------------------------- */
#sidebox .imgbox {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: transparent;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  /* margin-top: 3px; */
  /* margin-bottom: 3px; */
}

/* ---------------------------------------------------------------- *
	フッタ部分の設定です
 * ---------------------------------------------------------------- */

#footer {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #ffffff url(../_images/logo_foot.gif) no-repeat left top;
  /* --- マージンを設定してください --- */
  /* Note：上マージンは段組コンテナの下マージンとの折りたたみが
           生じます */
  width: 920px; margin: 0 auto; padding: 0.6em 0 1em 1em; }

#footer ul { float: right; margin-bottom: 4px; padding: 0;
  /* --- フッタメニュー左端の罫線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
    border-left: 1px solid #cccccc; }

#footer ul li {
  margin: 0;
  padding: 0 5px;
  /* --- フッタメニュー右側の区切り線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
  border-right: 1px solid #CCCCCC;
  /* --- 横並びリストのリストマーカ画像を設定してください --- */
  /* Note：16×16 ピクセル以下のものを使用してください */
  background-image: none;
}
#bottom_wrap { background-image: url(../_images/bk_bottom.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: center bottom; width: 960px; height: 120px; margin: 0 auto; padding: 0; }
#bottom { position: relative; top: 80px; width: 920px; margin: 0 auto 0; padding: 0; }
#bottom address { float: right; }
#bottom ul { float: left; margin-bottom: 4px; padding: 0;
  /* --- フッタメニュー左端の罫線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
    border-left: 1px solid #cccccc; }
#bottom ul li {
  margin: 0;
  padding: 0 5px;
  /* --- フッタメニュー右側の区切り線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
  border-right: 1px solid #CCCCCC;
  /* --- 横並びリストのリストマーカ画像を設定してください --- */
  /* Note：16×16 ピクセル以下のものを使用してください */
  background-image: none;
}
#bottom p { font-size: 1em; position: relative; top: 2px; clear: both; }
.float_right { float: right; }
.float_left { float: left; }
.float_clear { clear: both; }