@charset "shift_jis";

/*---------------------------- 基本設定 ----------------------------*/
* {margin: 0;padding: 0;}

/*-- html/body --*/
body {
background-color: #1e90ff; /* 全体の背景色 */
margin: 10px; /* 回りの余白 */
}

/*-- body（全体）/フォーム内のフォント、改行 --*/
body,input,textarea,select,td {
font-family: Verdana,Chicago,Arial,Helvetica,sans-serif,'ＭＳ Ｐゴシック',Osaka; /* フォント種類 */
font-size: 87%; /* フォントサイズ */
color: #000000; /* フォント色 */
line-height: 1.5; /* 改行 */
}

/*-- 画像の周りの線 --*/
IMG {
border: none; /* 線なし */
vertical-align: top;
  
}

/*-- htmlで<big>タグを使用した時のサイズ --*/
big {font-size: 120%;}

/*-- htmlで<small>タグを使用した時のサイズ --*/
small {font-size: 80%;}

/*-- リンク共通 --*/
/* リンクの装飾 */
a {text-decoration: none;} /* テキスト装飾なし */

/* 通常、訪問済みのリンク色 */
a:link,a:visited {color: #ff0000;}

/* カーソルを乗せたとき、クリックしたときのリンク色*/
a:hover,a:active {color: #808080;}

/* クリックした時の回りの点線（IE無効） */
a:focus {outline: none;}

/*-- CSS floatタグのクリアー（分からない場合は触らないで下さい） --*/
.clear {
min-height:0;
display: inline-block;
}
.clear:after {
content: "";
display: block;
height:0; 
clear: both;
}
/* \*/ 
* html .clear {height:0;} 
.clear {display: block;} 
/* */


/*---------------------------- 外枠・配置 ----------------------------*/
/* 全体の横幅（メニュー＋メイン） */
#wrap {
width: 905px; /* 横幅（左＋メイン＋5px） */
}

/*-- メインとメニューの高さ合わせと配置 --*/
#box {
overflow: hidden;
height: auto;
width: auto;
background-color: #999999; /* 背景色 */
}

#box div#main,#box div#left {
padding-bottom: 32767px;
margin-bottom: -32767px;
float: right; /* 配置 */
}

/*-- メインの幅と背景 --*/
#main {
background-color: #FFFFFF; /* メインの背景色 */
width: 700px; /* 横幅 */
}

/*-- メニューの幅と背景 --*/
#left {
width: 200px; /* 横幅 */
background-color: #999999; /* 背景色 */
}


/*---------------------------- ヘッダ ----------------------------*/
/* 背景（男性白黒＋青球体） */
#head {
width: auto;
height: 300px;
background: url('img/_vector-music-notes-cs-by-dragonart4.png') no-repeat left bottom; /* 画像 */
background-color: #FFFFFF; /* ヘッダ全体の背景色 */
}
/* サイト名の背景（灰色部分） */
#head-top {
width: 100%;
height: 300px;
background: url('img/head-bg02.png') repeat-x left top; /* 画像 */
}
/* 後ろ向きの画像 */
#head-right {
width: 100%;
height: 300px;
background: url('img/duckcompanylogo8.gif') no-repeat right bottom; /* 画像 */
z-index: 3;
}

/* サイト名＋SEO対策用コメント共通 */
#sitename
{
width: auto;
height: 82px;
color: #FFFFFF; /* フォント色 */
margin-left: 10px;
}
/* サイト名 */
#sitename h1 {
font-family: 'Times New Roman',Times,serif; /* フォント種類 */
font-size: 60px; /* フォントサイズ */
line-height: 1.0;
display: inline; /* 表示設定（現状表示する）表示しない場合は inlineをnoneに変更 */
}

/* SEO対策用コメント */
#sitename h2 {
font-size: 12px; /* フォントサイズ */
font-weight: normal;
color: #000000; /* フォント色 */
line-height: 1.0;
display: none; /* 表示設定（現状表示しない）表示する場合はこの行を削除*/
}

/* ヘッダ内文章 */
#head-txt {
width: auto;
height: auto;
margin: 20px 200px;
text-align: right; /* 配置 */
font-size: 14px; /* フォントサイズ */
color: ##000000; /* フォント色 */
}


/*---------------------------- 上部ナビ ----------------------------*/
#navi {
height: 60px;
background: url('img/btn-blue.gif') repeat-x left bottom;
background-color: #000000; /* 背景色 */
font-size: 20px; /* フォントサイズ */
font-family: 'Times New Roman',Times,serif,'ＭＳ Ｐ明朝',細明朝体; /* フォント種類 */
font-weight: bold;
text-align: center; /* 配置 */
line-height: 40px;
}

/* リンク設定 */
#navi a {
margin: 0 5px;
color: #FFFFFF; /* フォント色 */
}
#navi a:hover {
color: #ff4500; /* カーソルが乗った時のフォント色 */
}


/*---------------------------- メニュー ----------------------------*/
ul#menu {
margin: 10px 0 0 10px;
font-family: 'Times New Roman',Times,serif,'ＭＳ Ｐ明朝',細明朝体; /* フォント種類 */
font-size: 180%; /* メインメニューのフォントサイズ */
list-style-type: none;
color: #0000cd; /* フォント色 */
}

ul#menu li {
line-height: 1.0;
margin: 10px 0;
font-weight: bold;
}

ul#menu li ul {
margin-left: 10px;
list-style-type: square; /* サブメニューのリストマーク */
list-style-position: inside;
}

ul#menu li ul li {
font-size: 70%; /* サブメニューのフォントサイズ */
margin: 5px 0;
font-weight: normal;
}

/* メニューリンク設定 */
ul#menu a {color: #FFFFFF;} /* メインメニューのフォント色 */
ul#menu li ul li a {color: #00008b;} /* サブメニューのフォント色 */
ul#menu a:hover {color: #00ffff;} /* カーソルが乗った時のフォント色 */


/*---------------------------- メイン ----------------------------*/
#main {letter-spacing: 1px;}

/*-- メイン枠から内容までの余白 --*/
#main div.inner {margin: 10px;}

/*-- 段落Ｐタグ内の余白 --*/
#main p {padding: 10px 20px;}

/*-- index.htmlインフォメーション部分の設定 --*/
#info {
width: auto;
height: 160px;
}

/* 青い球体画像 */
#info div#mark {
width: 140px;
height: 140px;
background: url('img/mark.jpg') no-repeat right center; /* 画像 */
margin-left: 10px;
float: left;
}

/* 球体内のテキスト */
#info div#mark div {
width: 100px; /* 横幅 */
height: 50px; /* 高さ */
margin: 45px 0 0 20px; /* 画像端からの上下左右の余白（上px 右px 下px 左px の順） */
color: #C0C0C0; /* フォント色 */
letter-spacing: normal;
font-family: Verdana,Chicago,Arial,Helvetica,sans-serif,'ＭＳ Ｐゴシック',Osaka; /* フォント種類 */
font-size: 13pt; /* フォントサイズ */
line-height: 1.2; /* 改行 */
}
/* 球体テキストのリンク設定 */
#info div#mark div a {color: #ffffff;} /* フォント色 */
#info div#mark div a:hover {color: #ff0000;} /* カーソルが乗った時のフォント色 */

/* 更新情報などが入る枠付き部分 */
#info div#news {
width: 500px;
height: 140px;
padding: 5px;
border: 1px solid #000000; /* 枠のボーダー（太さpx 線種 色 の順） */
overflow: auto; /* 枠をはみ出す文章などの表示（はみ出したらスクロールバーを自動で表示） */
float: left;
}

/*-- タイトル（見出し） --*/
#main h3 {
height: 30px;
margin: 20px 0;
font-size: 18px; /* フォントサイズ */
color: #000000; /* フォント色 */
text-indent: 10px;
line-height: 30px;
border-top: 1px solid #000000; /* 上線（太さpx・線種・色 の順） */
border-bottom: 3px solid #000000; /* 下線（太さpx・線種・色 の順）  */
}


/*---------------------------- ナビ（下） ----------------------------*/
#bottom-navi {
height: 20px;
background-color: #000000; /* 背景色 */
text-align: right; /* 配置 */
font-size: 13px; /* フォントサイズ */
color: #FFFFFF; /* フォント色 */
line-height: 20px;
}

/* リンク設定 */
#bottom-navi a {color: #FFFFFF;} /* フォント色 */
#bottom-navi a:hover {color: #dc143c;} /* カーソルが乗った時のフォント色 */


/*---------------------------- フッター ----------------------------*/
/* 最下部のグレー系ボーダー画像 */
#foot-line {
height: 20px;
background: url('img/btn-gray.gif') repeat-x left top; /* 背景画像 */
}

/*-- サイトの著作権 --*/
#footer {
height: 18px;
background-color: #C0C0C0; /* 背景色 */
color: #666666; /* フォント色 */
font-size: 11px; /* フォントサイズ */
text-align: center; /* 配置 */
line-height: 18px;
}

/*-- テンプレートの著作権 --*/
#copy {
font-size: 11px; /* フォントサイズ */
text-align: right; /* 配置 */
}

/*-- テンプレートの著作権のリンク設定 --*/
#copy a {color: #000000;} /* フォント色 */
#copy a:hover {color: #FFFFFF;} /* カーソルが乗った時のフォント色 */

/*---------------------------- メールフォーム ----------------------------*/

#main p#mail {
width: auto;
text-align: right;
}

/*-- フォーム全体の設定 --*/
p#mail input,p#mail textarea,p#mail select{
border: 1px solid #000000; /* ボーダー（線の太さ/種類/色の順） */
background-color: #FFFFFF; /* 背景色 */
color: #999999; /* フォーム内のフォント色 */
margin: 5px;
padding: 2px;
}

/*-- 各フォームの設定 --*/
p#mail input {width: 200px;} /* １行フォームの幅 */
p#mail input#btn {
width: 80px; /* 送信ボタンの幅 */
padding: 0;
color: #000000; /* フォーム内のフォント色 */
}
p#mail textarea {
width: 400px; /* テキストエリアの幅 */
height: 150px; /* テキストエリアの高さ */
}