﻿@charset "utf-8"; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
}

img {
	border:none;
}

body {
	background-color:#d5edd5;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*フォントの種類指定(左から優先順位)*/
	font-size: 14px;
	line-height: 21px;
	color: #1a1a1a; /*文字色指定*/
}

h1 {
	padding: 10px 0 5px 15px;
	font-size: 18px;
	font-weight: bold;
}

ul {
	list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}

a { /*リンクの文字設定(マウスをのせる前)*/
	color: #009900; /*文字色指定（深緑）*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

a:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #C74B15; /*文字色指定（オレンジ）*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}

.color1 {
	color: #000000; /*文字色指定（ブラック）*/
	font-weight:bold;
}
.color2 {
	color: #006400; /*文字色指定（ダークグリーン）*/
	font-weight:bold;
}

/* ----- ヘッダー(ページの一番上の部分) ----- */

#header {
	margin:10px auto 0px;
	height: 80px; /*領域の高さ指定（旧120）*/
	width: auto; /*幅指定(autoは初期値に戻す)*/
}

#header_inner {
	position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	width: 1000px; /*幅指定（旧970）*/
}

#header_inner span{
	color:#fff;
	font-size: 13px;
	line-height: 1.4;
	font-weight: bold;
	position: absolute;
	top: 20px;
	left: 630px;
	width: 300px;
}

#header_inner a { /*リンクの文字設定(マウスをのせる前)*/
	color: #ffffff; /*文字色指定（深緑）*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}
#header_inner a:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #C74B15; /*文字色指定（オレンジ）*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}

/* ----- レイアウト ----- */

#container {
	width: 1080px; /*幅指定（旧970）*/
	margin: 0 auto;
}
#container a:hover img {
	opacity: 0.7;
}
#container2 {
	width: 1000px; /*幅指定（旧970）*/
	margin: 0 auto;
}
#container2 a:hover img {
	opacity: 0.7;
}

#main {		 /*MAIN画面*/
	width: 870px; /*幅指定（旧720）*/
	margin: 20px 0;
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
}

#info {
	width: 95%;
	margin: 10px auto 0;
	border: 3px #2f4f4f solid;
	border-radius: 20px;
	background: #e0ffff;
	font-size: 16px;
}
#info p{
	padding: 0 10px 10px 10px;
}
#info span{
	color: #8b0000;
	font-weight: bold;
}
.img_1 {
	position:absolute;
	top: 376px;
	left: 30%;
	width: 500px;
}

#main2 {		/*会員・概要・活動・受託・スライド画面*/
	width: 790px; /*幅指定*/
	clear: both;
	margin: 0 auto;
}

#main3 {		/*募集画面*/
	width: 650px; /*幅指定*/
	float: left;
	margin: 20px auto;
}
#main4 {		/*ふれあい画面*/
	width: 1000px; /*幅指定*/
	clear: both;
	margin: 0 auto;
}

#content {		 /*MAIN画面*/
	width: 630px; /*幅指定（旧480）*/
	float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	background-color:#b7ccb7;
}

#content2 {		/*会員・概要・活動・受託・スライド画面*/
	width: 760px; /*幅指定*/
	clear: both;
	margin: 10px auto;
	background-color:#b7ccb7;
	padding:20px;
}

#content3 {		/*募集画面*/
	width: 640px; /*幅指定*/
	clear: both;
	margin: 0 auto;
	background-color:#b7ccb7;
	padding:10px;
}
#content4 {		/*ふれあい画面*/
	width: 960px; /*幅指定*/
	clear: both;
	margin: 10px auto;
	background-color:#b7ccb7;
	padding:20px;
}

#leftside {
	width: 230px; /*幅指定（旧230）*/
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#leftside2 {
	width: 160px; /*幅指定*/
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#rightside {
	width: 200px; /*幅指定（旧200）*/
	float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#rightside2 {						/*募集画面*/
	width: 320px; /*幅指定（旧280）*/
	float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 30px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}


/* ----- コンテンツ ----- */

.post {
	clear: both; /*floatの回り込みを解除*/
}

.post h2 {
	background-image: url(../images/h2-c.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	line-height: 30px;	/*行の高さ指定*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	font-size: 16px;
	color: #ffffff; /*文字色指定*/
	padding-left: 10px; /*ボックス内側左の余白*/
}

.post h3 {
	background-image: url(../images/h2-c.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	line-height: 30px;	/*行の高さ指定*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	font-size: 16px;
	color: #ffffff; /*文字色指定*/
	text-align:center;
}

.post ul {
	margin-bottom: 15px; /*ボックス外側下の余白*/
}

.post ul {
	margin-left:10px;
	padding-left: 10px; /*ボックス内側左の余白*/
	padding-right: 5px; /*ボックス内側左の余白*/
	padding-bottom: 5px; /*ボックス内側左の余白*/
	font-size:16px;
	line-height:24px;
}
.post ol {
	margin-left:20px;
	padding-left: 15px; /*ボックス内側左の余白*/
	padding-right: 5px; /*ボックス内側左の余白*/
	padding-bottom: 5px; /*ボックス内側左の余白*/
	font-size:16px;
	line-height:24px;
}

.post p {
	margin-left:10px;
	padding-left: 10px; /*ボックス内側左の余白*/
	padding-right: 5px; /*ボックス内側左の余白*/
	padding-bottom: 5px; /*ボックス内側左の余白*/
	font-size:16px;
	line-height:24px;
}

.p1 {
	text-align:center; 
	margin-bottom:5px;
}
.p2 {
	margin: 5px 0 20px 0;
}
.p_blog {
	margin: 5px 0 20px 0;
}
.span_blog {
	margin-left:40px;
	font-size: 12px;
}
.p-err {
	text-align:center;
	color:#ff0000;
	font-weight:bold;
}

.img1 {
	padding-top: 5px;
	text-align: center;
}
.img2 {
	float: right;
	margin: 5px 0 20px 10px;
	padding: 0 10px 0 0;
}
.pdf1 {
	float: right;
	margin: 5px 0 20px 10px;
	padding: 0 10px 0 0;
}
.youTube1 {
	float: right;
}
.img_blog {
	float: right;
	margin: 5px 0 20px 10px;
}
.youtube {
	float: right;
	margin: 5px 0 20px 10px;
	padding: 0 10px 0 0;
	width: 320px;
	height: 180px;
}
.youtube_side {
	width: 576px;
	height: 324px;
}

.submit_button {
	padding: 2px 10px;
}

.submit_button2 {
	width: 250px;
	height: 35px;
	font-size: 16px;
	font-weight: bold;
	color:#4d4d4d;
}

.iframe_1 {
	margin: 0 auto;
	width: 99%;
	height: 80vh;
}
.iframe_pdf{
	float: right;
	width: 210px;
	height: 297px;	/* ---- =297-23 ----- */
	border: none;
	overflow: hidden;
	scrolling: no;
}

/* ---- テーブルの設定 ----- */

.ta1 {					/*団体概要画面使用*/
	width: 700px;
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
	margin: 0 auto;
}

.ta1 th {
	width: 100px;
	background-color: #dbe0c6; /*背景色指定*/
	border: solid 3px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 10px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 16px;
	line-height: 24px;
	color: #333333; /*文字色指定*/
}

.ta1 td {
	width: 548px;
	background-color: #f0f6da; /*背景色指定*/
	border: solid 3px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 10px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 16px;
	line-height: 24px;
	color: #333333; /*文字色指定*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}


.ta2 {					/*団体歴史画面使用*/
	width: 760px;
	margin: 0 auto;
	border-collapse: collapse;
	background-color: #f0f6da;
}

.ta2 tr.tr1{
	border-bottom:1px solid #b7ccb7;
	background-color: #dbe0c6;
}
.ta2 th.th1{
	width: 54px;
	padding:2px 0px 2px 5px;
	text-align: right;
}
.ta2 th.th2{
	width: 35px;
	padding:2px 5px 2px 0px;
	border-right: 1px #b7ccb7 solid;
}
.ta2 th.th3{
	width: 373px;
	padding:2px 10px;
	border-right: 1px #b7ccb7 solid;
	text-align: center;
}
.ta2 th.th4{
	width: 251px;
	padding:2px 10px;
	text-align: center;
}
.ta2 td.td1 {
	padding:2px 0px 2px 5px;
	vertical-align: top;
}
.ta2 td.td2 {
	padding:2px 5px 2px 0px;
	border-right: 1px #b7ccb7 solid;
	text-align:right;
	vertical-align: top;
}
.ta2 td.td3 {
	padding:2px 10px;
	border-right: 1px #b7ccb7 solid;
	vertical-align: top;
}
.ta2 td.td4 {
	padding:2px 10px;
	vertical-align: top;
}


.ta3 {						/*管理プログラム使用*/
	table-layout: fixed;
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
	margin: 0 auto;
}

.ta3 th {
	background-color: #f0f6da; /*背景色指定*/
	border: solid 1px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 14px;
	line-height: 21px;
	color: #333333; /*文字色指定*/
	text-align: center;
}

.ta3 td {
	background-color: #f0f6da; /*背景色指定*/
	border: solid 1px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 14px;
	line-height: 21px;
	color: #333333; /*文字色指定*/
}

.ta4 {
	table-layout: fixed;
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
	margin: 0 auto;
	width :70%;
}

.ta4 th {
	width: 13%;
	background-color: #f0f6da; /*背景色指定*/
	border: solid 1px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 14px;
	line-height: 21px;
	color: #333333; /*文字色指定*/
	vertical-align: top;
}
.ta4 td {
	width: 87%;
	background-color: #f0f6da; /*背景色指定*/
	border: solid 1px #b7ccb7; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 14px;
	line-height: 21px;
	color: #333333; /*文字色指定*/
	text-align: left;
}

/* ----- ページ左の内容 ----- */

#leftside img {
	margin-bottom: 10px; /*ボックス外側下の余白*/
}

#leftside h2 {
	background-image: url(../images/h2-l.gif);
	padding-left: 10px; /*ボックス内側左の余白*/
	margin: 0px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	font-size: 16px;
	line-height: 30px;	/*行の高さ指定*/
	color: #ffffff; /*文字色指定*/
}

#leftside p {
	padding: 10px 5px 10px 5px;
	color: #003300;
	width: 220px;
}

/* ----- ページ右の内容 ----- */

#rightside h2,#rightside2 h2 {
	background-image: url(../images/h2-r.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	margin-top: 0px; /*ボックス外側下の余白（旧10）*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	font-size: 16px;
	line-height: 30px;	/*行の高さ指定*/
	color: #ffffff; /*文字色指定*/
	padding-left: 10px; /*ボックス内側左の余白*/
}
#rightside h3 {
	background-image: url(../images/h2-r_o.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	margin-top: 0px; /*ボックス外側下の余白（旧10）*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	font-size: 16px;
	line-height: 30px;	/*行の高さ指定*/
	color: #ffffff; /*文字色指定*/
	padding-left: 10px; /*ボックス内側左の余白*/
}

#rightside li,#rightside2 li {
	border-bottom: 1px solid #cccccc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin: 5px 10px 10px 5px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

#rightside p{
	text-align:right;
}

#rightside input{
	border-style: solid;
	border-color: #d5edd5;
	border-width: 1; background-color:#d5edd5;
	color: #009900; /*文字色指定（深緑）*/
}

#rightside input:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #C74B15; /*文字色指定（オレンジ）*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}

/* ----- フッター(ページの一番下の部分) ----- */

#footer {
	clear: both; /*floatの回り込みを解除*/
	margin: 0px auto 10px; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	height: 70px; /*領域の高さを指定*/
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
	background-image: url(../images/foot.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: no-repeat; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	background-position: top;

}

#footer_inner {
	position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
	width: 1000px; /*幅指定（旧970）*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	padding: 10px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
}

#footer p {
	font-size: 14px;
	color: #ffffff; /*文字色指定*/
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

#footerlogo {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	right: 0px; /*左からの距離(positionで指定している場合に適用)*/
	top: 10px; /*上からの距離(positionで指定している場合に適用)*/
}

/* ----- フッターメニュー ----- */

#footmenu {
	margin-bottom: 8px; /*ボックス外側下の余白*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

#footmenu li {
	padding-left: 15px; /*ボックス内側左の余白*/
	margin-left: 15px; /*ボックス外側左の余白*/
	border-left: solid 1px #ffffff; /*左境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	display: inline; /*要素の表示形式指定(inlineはインラインレベルで表示(リストを横並び))*/
	list-style-type: none; /*リストマーカーの種類指定(noneはなし)*/
}

#footmenu li.first {
	border-left: none; /*左境界線の一括指定(noneはなし)*/
}

#footmenu a { /*リンクの文字設定(マウスをのせる前)*/
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

#footmenu a:hover { /*リンクの文字設定(マウスをのせた時)*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}

#event {
	width: 640px;
	margin: 0 auto;
	opacity: 0.8;
	border: 3px #028760 solid;		/*---常磐緑---*/
	border-radius: 20px;
	background: #f7fcfe;	/*---卯の花色---*/
	padding: 15px 20px;
}
#event p {
	text-align: left;
	font-size:14px;
	color: #000;
	font-weight:bold;
}
#event ul {
	list-style: none;
	padding-left: 10px;
}
#event li {
	padding-left: 30px;
	font-weight: bold;
}
