@charset "utf-8";
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * style.css
 * 初期設定：★R04.10.17 (月) ★R04.10.29 (土)
 * 前回更新：★R04.11.04 (金) ★R04.11.07 (月)
 * 最終更新：★R04.11.10 (木) ★R04.11.15 (火)
**- - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - ◆上・右・下・左◆上・左右・下◆上下・左右 - - - */

/* 全体の設定
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html,body {
	margin: 0;padding: 0;
	font-size: 13px;	/* 基準となるフォントサイズ。 */
	height: 100%;
}

body {
	font-family: Meiryo, Osaka, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;
	color: #333;
	line-height: 2;		/*行間*/
}

/* リセット */
figure { margin: 0; }
dd { margin: 0; }
nav {
	margin: 0;
	padding: 0;
}

/* 画像全般の設定 */
img { border: none;max-width: 100%;height: auto;vertical-align: middle; }
iframe { width: 100%; }
section + section {
	padding-top: 50px;
}

/* リンクテキスト全般の設定 - - - - - - - - - - */
a {
	color: #333;
	transition: 0.3s;
}
a:hover {
	opacity: 0.6;	/* マウスオン時に60%の透明度にする */
}

#container {
	background-color: #fff;			/* ★R04.10.22 (土)#def2f5 */
	margin: 0 auto;					/* ★R04.10.17 (月)追加 90% */
	width: 95%;						/* ★R04.10.17 (月)追加 */
	height: 100%;
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

header {
/* 	display: flex;			flexボックスを使う指定 */
	align-items: center;
	padding: 5px 10px;
	border-top: 3px solid #15b;		/* ★R04.11.04 (金) */
	color: #15b;					/* 文字色#fff */
}
header a {
	color: #fff;
}

/* ３本バー（ハンバーガー）アイコン設定
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#menubar_hdr {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	left: 15px;
	top: 3px;
	padding: 8px 5px;
	width: 22px;
	height: 22px;
	display: flex;
	flex-direction: column;			/* ３本バーを縦並び */
	justify-content: space-between;
	order: 0;
	background: #005;		/* ★R04.11.06 (日) 背景色#9cd3db */
}
#menubar_hdr span {			/* バー１本あたりの設定 */
	display: block;
	transition: 0.3s;
	border-top: 2px solid #fff;	/*線の幅、線種、色*/
}
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {		/* ×印バーの設定 */
	transform-origin: center center;
	width: 26px;							/* バーの幅 */
}
#menubar_hdr.ham span:nth-of-type(1) {		/* ×印バー ※１本目 */
	transform: rotate(45deg) translate(6px, 8px);	/* 回転45°、X軸Y軸 */
}
#menubar_hdr.ham span:nth-of-type(3) {		/* ×印バー ※３本目 */
	transform: rotate(-45deg) translate(6px, -8px);
}
#menubar_hdr.ham span:nth-of-type(2) {		/* ※２本目のバー */
	display: none;			/* ２本目は使わないので非表示にする */
}

/* menubar ブロック初期設定 - - - - - - - - - - */
#menubar {
	height: 0px;
	overflow: hidden;
	background: #227;			/* ★R04.10.22 (土)  */
	}
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 5px 10px 2px 10px;	/* ★R04.10.22 (土) 0  */
	}
#menubar ul.menu {
	margin-bottom: 38px;		/* ★R04.11.14 (月) */
	}

#menubar li {
	font-size: 0.9em;					/* ★R04.11.13 (日) 1em */
	letter-spacing: 0.1em;
	border-bottom: 1px solid #fff;		/* ★R04.11.04 (金) */
}
#menubar a {
	display: block;
	text-decoration: none;
	padding: 2px 5px 2px 15px;
}

#menubar h3 {
	margin: 20px 0 0 10px;
	font-size: 24px;
	line-height: 1.2em;		/* ★R04.07.09 (土) 追加 */
	color: #35a;			/* ★R04.07.07 (木) #35a   */
	font-weight:bold;
	}

/* メニューブロック設定 - - - - - - - - - - - - */
#menubar.db {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;top: 0px;
	width: 220px;			/* ★R04.11.06 (日)メニューの幅180px */
	height: 100%;
	padding: 70px 0 0;
/* 	background: rgba(0,0,85,0.9);		rgba(0,0,0,0.9)  */
	background: #005;		/* ▲R04.11.13 (日) */
	color: #fff;			/* ▲R04.11.13 (日)*/
	animation: animation1 0.2s both;	/* animation1を実行 */
}
#menubar.db a {
	color: #fff;
}
#menubar.db a:hover {
	background: #8ff;
	color: #333;
}
#menubar.db li.current a {		/* メニュー設定（current） */
	background: #666;
}

/* mainブロック設定 - - - - - - - - - - - - - - */
main {
	flex: 1;
	margin: 50px;
}
main h2 {
	margin: 0;
	margin-bottom: 20px;
	font-weight: normal;
	border-bottom: 4px solid #fff;
}
main h3 {
	margin: 0;
	margin-bottom: 20px;
	font-weight: normal;
	background: #fff;
	padding: 3px 20px;
	border-radius: 3px;		/* 角丸のサイズ */
}
main p {
	margin: 0 20px 30px;
}

/* フッター設定 - - - - - - - - - - - - - - - - */
footer small { font-size: 100%; }

footer {
	font-size: 1rem;
	border-top: 2px solid #15b;		/* ★R04.11.06 (日) */
	color: #333;
	text-align: center;
	width: 72%;	
	margin: 0 25% 0 20%;			/* ★R04.11.01 (火) */
	padding: 5px 20px;
}

/* リンクテキスト */
footer a { color: #fff; text-decoration: none; }

/* リンクテキストのマウスオン時 */
footer a:hover { color: #fff; }

/* お知らせブロック */
#new {
/*	display: flex;	 ★R04.11.06 (日) */
	margin: 0;
	flex-wrap: wrap;	/* 折り返す指定 */
	padding: 0 20px;
}

/* PAGE TOP設定 - - - - - - - - - - - - - - - - */
/* ボタンの設定 */
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	position: fixed;	/* スクロールに追従しない(固定で表示)為の設定 */
	right: 20px;
	bottom: 30px;
	color: #fff;
	font-size: 1.5rem;
	width: 1.5em;
	line-height: 1.5em;
}

/* - - - - - - - - - - - - - - - - - -
ここから下は画面幅720px以下の追加指定
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width:720px) {
  main {
	margin: 10px;	/* ボックスの外側へ空けるスペース */
	}
  #menubar h3 {
	color: #fff;			/* ★R04.11.14 (月) #35a   */
	}
  footer {
	font-size: 0.8rem;		/* ★R04.11.01 (火) */
	margin: 0 10px 0 2px;	/* ★R04.11.01 (火) */
	width: 90%;				/* ★R04.11.12 (土) */
	}
}	/* ■【注意】左の閉じカッコ } は必要！■ */

/* - - - - - - - - - - - - - - - - - -
ここから下は画面幅721px以上の追加指定
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (min-width:721px) {
  html, body {
	font-size: 15px;
	}
  #menubar_hdr { display: none; }	/* ハンバーガーメニューを非表示に */
  #menubar {
	width: 220px;
	left: 0px;
	top: 80px;
	height: calc(100% - 80px);	/* topの数値(80px)を引いた高さに */
	position: fixed;			/* スクロールしても固定表示させる設定 */
	background: #fff;
	margin: 0 0 0 80px;
	}
/* マウスオン時 */
  #menubar:hover {
	overflow: auto;		/* 自動でスクロールバーを出す */
	}
  #menubar ul {
	list-style: none;
	margin: 0;
	} 
  #menubar ul li a {
	background: #227;
	color: #0eb;    
	}
  #menubar ul li a:hover {
	background: #0ca;		/* 翡翠色★R04.10.31 (月) #0ca */
	color: #fff;
	}
  main {	
	margin: 10px 50px 100px 270px;
	}
}	/* ■【注意】左の閉じカッコ } は必要！■ */

/* - - - - - - - - - - - - - - - - - - - - - - - */