/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* 1.メインコンテンツ 共通 */
/* 2.フォントサイズ、フォントカラー */

/* 3.TOPページ */
/* 4.TOP ナビゲーション　ロールオーバー */


/* 5.横笛協会とは */
/* 6.横笛協会とは ナビゲーション　ロールオーバー */
/* 7.私と横笛 */
/* 8.私と横笛 ナビゲーション　ロールオーバー */

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* 1.メインコンテンツ 共通 */
/* 全体の幅、高さ */
html{
	margin:0px;
	width:100%;
	height:100%;
}

/* 全体背景画像、文字色、フォントの設定 */
body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	background:#988799 url(../images/bg_common.jpg) no-repeat scroll center top;
	font-family: arial,avenir;
}

/* 全体の幅、高さ。センター寄せ */
#wrap{
	width:1024px;
	margin:auto;
	height:100%;
}

/* メインコンテンツ配置 */
#main{
	text-align:left;
	margin:0px 0px 40px 0px;
	padding:0px;
	background:#ffffff;
	width: 1024px;
	height: 100%;
	position: relative;
	top: 0px;
	overflow: visible;
}


/* タイトル画像配置 */
#titleimg{
	position:   absolute;
	z-index:   0;
}

ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}


/* ナビゲーションロールオーバー全共通 */
.navi a:hover{
	background-color:transparent;
}
.navi a:hover img{
	visibility:hidden;
}



/* 第２階層以下 メインコンテンツ */

/* 第２階層以下 メインコンテンツの幅、コピーライトの配置 */
#content{
	position:   absolute;
	top:      350px;
	width:1024px;
	background:#ffffff url(../images/copy.gif) no-repeat 97% 97%;
	overflow:visible;
}


/* 本文全体の幅 */
#content table{
	width:870px;
	overflow:auto;
	margin:0px 0px 0px 78px;
	padding:0px 0px 0px 0px;
}

/* 左コンテンツの幅 */
#content .left{
	width:285px;
	padding:0px 45px 0px 0px;
}

/* このページの先頭へボタン　配置とロールオーバー */
.pagetop{
	width:860px;
	margin-top:10px;
	margin-bottom:30px;
	margin-left:78px;
	overflow:hidden;
}

.rolloverpagetop {
	float:right;
	width:140px;
	height:13px;
	background:url(../images/pagetop_on.gif) no-repeat left top;
}

.rolloverpagetop a {
	display:block;
	width:140px;
	height:13px;
	outline:none;
}

.rolloverpagetop a:hover{
	background-color:transparent;
}
.rolloverpagetop a:hover img{
	visibility:hidden;
}


/* リスト表記 */
#content .right li{
	list-style-type: disc;
	color: #9a659b;
}



/* ---------------------------------------------------------------------- */
/* 2.フォントサイズ、フォントカラー */
/* 共通 */
.txt{font-size:80%;line-height:1.8em;color:#676767;}
.small{font-size:70%;line-height:1.5em;color:#676767;}
/* 「沖縄横笛協会とは」写真のキャプション文字色、サイズ、改行余白 */
.caption{font-size:70%;line-height:1.5em;color:#b3b5a0;width:265px;padding:0px 0px 30px 0px;}

/* リンクテキストカラー */
a{
	text-decoration:none;
	color:#676767;
}

/* タイトルまわり */
H1 {
	font-size:80%;
	margin: 0px;
	padding: 0 0 10 0px;
}
H2 {
	font-size:80%;
	color: #9a659b;
	margin: 0px;
	padding: 0 0 10 0px;
}


/* ---------------------------------------------------------------------- */
/* 3.TOPページ */
/* TOP ナビゲーション配置 */
#top ul.navi{
	position:   absolute;
	z-index:   1;
	padding-left: 100px;
}
#top ul.navi li {
	float: left;
	padding-right: 0px;
	padding-top: 450px;
	text-align: right;
}

/* TOP ナビゲーション　NEWマーク（「活動報告」用） */
.new01{
   position:   absolute;
   z-index:   2;
   top:      560px;
   left:      255px;
}

/* TOP ナビゲーション　NEWマーク（「私と横笛」用） */
.new02{
   position:   absolute;
   z-index:   2;
   top:      560px;
   left:      195px;
}

/* TOP 「私と横笛」バナーの位置 */
ul.topcolumn{
	position:   absolute;
	z-index:   1;
	padding-top: 411px;
	padding-left: 875px;
}


/* TOP 「私と横笛」バナーのロールオーバー */
.rolloverbnr {
	position:   absolute;
	z-index:   2;
	width:85px;
	height:119px;
	background:url(../images/top_column_bnr_on.gif) no-repeat left top;
}
.rolloverbnr a {
	display:block;
	width:85px;
	height:119px;
	outline:none;
}

.rolloverbnr a:hover{
	background-color:transparent;
}
.rolloverbnr a:hover img{
	visibility:hidden;
}


/* TOP 「私と横笛」バナー(写真の位置） */
.topcolumnphoto{
	position:   absolute;
	z-index:   3;
	top:      448px;
	left:      878px;
}

/* TOP 「私と横笛」バナー(vol.xxの部分の配置） */
.bg-bnr {
	position:   absolute;
	z-index:   3;
	top:      540px;
	right:      64px;
	padding-right:2px;
	margin:0px;
	background:url(../images/top_column_bnr_line.gif) no-repeat right top;
	text-align:right;
}

.bg-bnr .name{
	padding-right:12px;
	padding-top:0px;
	margin:0px;
}

/* ---------------------------------------------------------------------- */
/* 4.TOP ナビゲーション　ロールオーバー */
/* トップ */
#top .rollover01 {
	width:60px;
	height:113px;
	background:url(../images/top_top_on.gif) no-repeat left bottom;
}
#top .rollover01 a {
	display:block;
	width:60px;
	height:113px;
	outline:none;
}

/* 横笛協会とは */
#top .rollover02 {
	width:60px;
	height:145px;
	background:url(../images/top_about_on.gif) no-repeat left bottom;
}
#top .rollover02 a {
	display:block;
	width:60px;
	height:145px;
	outline:none;
}

/* 活動報告 */
#top .rollover03 {
	width:60px;
	height:145px;
	background:url(../images/top_topics_on.gif) no-repeat left bottom;
}
#top .rollover03 a {
	display:block;
	width:60px;
	height:145px;
	outline:none;
}

/* 私と横笛 */
#top .rollover04 {
	width:60px;
	height:145px;
	background:url(../images/top_column_on.gif) no-repeat left bottom;
}
#top .rollover04 a {
	display:block;
	width:60px;
	height:145px;
	outline:none;
}

/* コンタクト */
#top .rollover05 {
	width:60px;
	height:145px;
	background:url(../images/top_contact_on.gif) no-repeat left bottom;
}
#top .rollover05 a {
	display:block;
	width:60px;
	height:145px;
	outline:none;
}






/* ---------------------------------------------------------------------- */
/* 5.横笛協会とは */
/* 横笛協会とは ナビゲーション配置 */
#about ul.navi{
	position:   absolute;
	z-index:   1;
	top:      0px;
	left:      78px;
}
#about ul.navi li {
	float: left;
	text-align: right;
	display:block;
}

/* 横笛協会とは 左コンテンツの幅 */
#content .left #left-about{
	width:265px;
	padding:0px 0px 0px 10px;
}

/* 横笛協会とは 右本文の幅とline配置 */
#content .right-about{
	width:540px;
	background:url(../about/images/about_line.gif) no-repeat 100% 100%;
}




/* ---------------------------------------------------------------------- */
/* 6.横笛協会とは ナビゲーション　ロールオーバー */
/* トップ */
#about .rollover01 {
	width:45px;
	height:340px;
	background:url(../about/images/about_top_on.gif) no-repeat left bottom;
}

/* 横笛協会とは */
#about .rollover02 {
	width:45px;
	height:340px;
	background:url(../about/images/about_about_on.gif) no-repeat left bottom;
}

/* 活動報告 */
#about .rollover03 {
	width:45px;
	height:340px;
	background:url(../about/images/about_topics_on.gif) no-repeat left bottom;
}

/* 私と横笛 */
#about .rollover04 {
	width:45px;
	height:340px;
	background:url(../about/images/about_column_on.gif) no-repeat left bottom;
}

/* コンタクト */
#about .rollover05 {
	width:45px;
	height:340px;
	background:url(../about/images/about_contact_on.gif) no-repeat left bottom;
}

/* ロールオーバー共通 */
#about a {
	display:block;
	width:45px;
	height:340px;
	outline:none;
}





/* ---------------------------------------------------------------------- */
/* 7.私と横笛 */
/* 私と横笛 ナビゲーション配置 */
#column ul.navi{
	position:   absolute;
	z-index:   1;
	top:      0px;
	left:      78px;
}
#column ul.navi li {
	float: left;
	text-align: right;
	display:block;
}

/* 私と横笛 左メニュー（過去のコラム）上のライン配置 */
.columnline{
	position:   absolute;
	z-index:   2;
	top:      320px;
	left:      78px;
}



/* 私と横笛 左メニュー（過去のコラム）配置 */
.columnmenu{
	width:285px;
	margin:0px;
	padding:0px;
}

/* 私と横笛 左メニュー（過去のコラム）のドットライン配置 */
.columndotline{
/* 	width:270px; */
	width:285px;
	margin:0px;
	padding:0px;
}

/* 私と横笛 左メニュー（過去のコラム）のアイコンと配置調整 */
.left ul li {
	width:225px;
	list-style-image: url('../column/images/columnmenu_icon.gif');
	list-style-position: outside;
	margin:3px 0px 0px 45px;
	padding:0px;
}


/* 私と横笛 左メニュー（過去のコラム）のvol.xxフォントカラー */
.left .title{
	color:#993399;
	margin:0px;
	padding:0px;
}

/* 私と横笛 左メニュー（過去のコラム）の画像ボーダーと配置調整 */
img.menuborder{
	float:right;
	border:3px solid #ebecdc !important;
	margin:4px 0px 7px 0px;
	padding:0px;
}


/* 私と横笛 右本文の幅とline配置 */
#content .right-column{
	width:540px;
	background:url(../column/images/column_line.gif) no-repeat 100% 100%;
}

/* 私と横笛 筆者プロフィール */
#content .profile{
	float:left;
	width:430px;
	margin:0 0 40 0px;
	background:url(../column/images/column_dotline02.gif) repeat-y 100% 0%;
}

/* 私と横笛 筆者プロフィールの画像ボーダー */
img.profileimgborder{
	float:left;
	border:6px solid #ebecdc !important;
	margin:0 30 0 0px;
}

/* 私と横笛 筆者プロフィールの氏名 */
#content .profilename{
	width:245px;
	float:right;
	margin:0 0 0 0px;
	padding:0 10 0 0px;
	text-align:right;
}
#content .profilename2{
	width:245px;
	color:#993399;
	float:right;
	margin:0 0 0 0px;
	padding:0 10 0 0px;
	text-align:right;
}

/* 私と横笛 筆者プロフィール本文 */
#content .profiletxt{
	width:250px;
	float:left;
	margin:0 0 0 0px;
	padding:0 5 0 0px;
}

img.profiletitle{
	padding:10 0 5 0px;
}

/* 私と横笛 コラム日付 */
#content .date{
	color:#993399;
	float:right;
}

/* 私と横笛 コラムタイトル左寄せ用　全体の幅 */
#content .column-titleleft-wrap{
	width:540px;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

/* 私と横笛 コラムタイトル左寄せ用 h2タイトル配置 */
#content .column-titleleft-wrap h2{
	width:105px;
	float:left;
	margin:0px;
	padding:0px;
}

/* 私と横笛 コラムタイトル左寄せ用 コラム本文配置 */
#content .column-titleleft-wrap .columntxt{
	width:430px;
	float:left;
	margin:0px;
	padding:0px;
}

/* 私と横笛 コラムタイトル右寄せ用　全体の幅 */
#content .column-titleright-wrap{
	width:540px;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

/* 私と横笛 コラムタイトル右寄せ用 h2タイトル配置 */
#content .column-titleright-wrap h2{
	width:105px;
	float:right;
	margin:0px;
	padding:0px;
	text-align:center;
}

/* 私と横笛 コラムタイトル右寄せ用 コラム本文配置 */
#content .column-titleright-wrap .columntxt{
	width:430px;
	float:right;
	margin:0px;
	padding:0px;
}



/* ---------------------------------------------------------------------- */
/* 8.私と横笛 ナビゲーション　ロールオーバー */
/* トップ */
#column .rollover01 {
	width:45px;
	height:320px;
	background:url(../column/images/column_top_on.gif) no-repeat left bottom;
}

/* 横笛協会とは */
#column .rollover02 {
	width:45px;
	height:320px;
	background:url(../column/images/column_about_on.gif) no-repeat left bottom;
}

/* 活動報告 */
#column .rollover03 {
	width:45px;
	height:320px;
	background:url(../column/images/column_topics_on.gif) no-repeat left bottom;
}

/* 私と横笛 */
#column .rollover04 {
	width:45px;
	height:320px;
	background:url(../column/images/column_column_on.gif) no-repeat left bottom;
}

/* コンタクト */
#column .rollover05 {
	width:45px;
	height:320px;
	background:url(../column/images/column_contact_on.gif) no-repeat left bottom;
}

/* ロールオーバー共通 */
#column a {
	display:block;
	width:45px;
	height:320px;
	outline:none;
}





/* ---------------------------------------------------------------------- */
/* 9.活動報告 */
/* 活動報告 ナビゲーション配置 */
#topics ul.navi{
	position:   absolute;
	z-index:   1;
	top:      0px;
	left:      78px;
}
#topics ul.navi li {
	float: left;
	text-align: right;
	display:block;
}

/* 活動報告 左メニュー（過去のコラム）上のライン配置 */
.topicsline{
	position:   absolute;
	z-index:   2;
	top:      320px;
	left:      78px;
}



/* 活動報告 左メニュー（過去のコラム）配置 */
.topicsmenu{
	width:270px;
	width:285px;
	margin:0px;
	padding:0px;
}

/* 活動報告 左メニュー（過去のコラム）のドットライン配置 */
.topicsdotline{
/* 	width:270px; */
	width:285px;
	margin:0px;
	padding:0px;
}

/* 活動報告 左メニュー（過去のコラム）のアイコンと配置調整 */
.left #topicsmenu ul li {
	width:255px;
	list-style-image: url('../topics/images/topicsmenu_icon.gif');
	list-style-position: inside;
	background:url(../topics/images/topicsmenu_dotline.gif) no-repeat left bottom;
	margin:7px 0px 0px 0px;
	padding:0px 0px 7px 30px;
}




/* 活動報告 右本文の幅とline配置 */
#content .right-topics{
	width:540px;
	background:url(../topics/images/topics_line.gif) no-repeat 100% 100%;
}

/* 活動報告 筆者プロフィールの画像ボーダー */
img.profileimgborder{
	float:left;
	border:6px solid #ebecdc !important;
	margin:0 30 0 0px;
}


/* 活動報告 筆者プロフィール本文 */
#content .profiletxt{
	width:250px;
	float:left;
	margin:0 0 0 0px;
	padding:0 5 0 0px;
}

img.profiletitle{
	padding:10 0 5 0px;
}

/* 活動報告 コラム日付 */
#content .date{
	color:#993399;
	float:right;
}

/* 活動報告 h2タイトルカラーと配置 */
#content .right-topics h2{
	color:#cd6502;
	margin:0px;
	padding:0px;
}






/* ---------------------------------------------------------------------- */
/* 10.活動報告 ナビゲーション　ロールオーバー */
/* トップ */
#topics .rollover01 {
	width:45px;
	height:320px;
	background:url(../topics/images/topics_top_on.gif) no-repeat left bottom;
}

/* 横笛協会とは */
#topics .rollover02 {
	width:45px;
	height:320px;
	background:url(../topics/images/topics_about_on.gif) no-repeat left bottom;
}

/* 活動報告 */
#topics .rollover03 {
	width:45px;
	height:320px;
	background:url(../topics/images/topics_topics_on.gif) no-repeat left bottom;
}

/* 私と横笛 */
#topics .rollover04 {
	width:45px;
	height:320px;
	background:url(../topics/images/topics_column_on.gif) no-repeat left bottom;
}

/* コンタクト */
#topics .rollover05 {
	width:45px;
	height:320px;
	background:url(../topics/images/topics_contact_on.gif) no-repeat left bottom;
}

/* ロールオーバー共通 */
#topics a {
	display:block;
	width:45px;
	height:320px;
	outline:none;
}










/* ---------------------------------------------------------------------- */
/* 4.メインコンテンツ 共通 */

/* 画像にボーダーライン付けない */
img{
	border:none !important;
}

/* 下に15px余白追加 */
.mb{
	padding-bottom: 15px;
}

/* 下に30px余白追加 */
.mb30{
	padding-bottom: 30px;
}

/* 左に15px余白追加 */
.ml{
	padding-left: 15px;
}

/* 画像に6px幅の枠追加 */
img.border{
	border:6px solid #ebecdc !important;
	padding:0px;
}



/* 改行＋下に余白30px追加 */
p{
	margin: 0px;
	padding: 0 0 30 0px;
}


/* 回り込み解除 */
.clear{
	clear:both;
}