@charset "UTF-8";

/* 全体 */
* {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォントの種類の指定*/
}
body {
	margin: 0px 0px 0px 0px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
	padding: 0px 0px 0px 0px; /*内側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
	background-color:#ffffe5;/*背景色*/
	background-image:url(../images/logo-2.png);
}
.wrapper {
	width: 800px; /*幅指定。pxの数値を変えると幅が変化*/
	border-left: 1px solid #c3bab2; /*左側の縦線。pxの数値を変えると太さが変化*/
	border-right: 1px solid #c3bab2; /*右側の縦線。pxの数値を変えると太さが変化*/
	background-color:#ffffff; /*背景色*/
	margin: 0px auto 0px auto; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる。左右をauto指定するとセンター揃えになります。*/
}
a {
	color: #ff8888; /*リンクの文字色*/
}
a:hover {
	color: #ffa8a8; /*リンクにマウスカーソルを乗せた時の文字色*/
}

/* ヘッダー：ロゴ、タイトルなどがあるページの先頭 */
.header {
	background-image:url(../images/head.jpg);
}
.header_primary { 
	overflow: hidden; /*範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定。hidden指定するとはみ出た部分は表示されない。*/
	height: 150px; /*高さ指定。pxの数値を変えると高さが変化*/
}
#logo { /*ロゴの位置を指定*/
	float: left; /*指定された要素を左または右に寄せて配置。後に続く内容なその反対側に回り込む。*/
	margin: 20px 30px 0px 40px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.header_sub {
	float: left; /*指定された要素を左または右に寄せて配置。後に続く内容なその反対側に回り込む。*/
	margin: 40px 40px 0px 0px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
	text-align: right; /*文字の位置や、均等割付を指定。left,right,center,justify.justifyで均等割付ができる。*/
	color: #53280b; /*文字色の指定*/
}
.header_name {
	font-size: 36px; /*文字サイズ指定。pxの数値を変えると文字サイズが変化*/
	font-family: 'Josefin Sans', sans-serif; /*フォントの種類の指定*/
	margin:20px 0px 0px 0px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.header_namesub {
	font-size:20px;/*文字サイズ指定。pxの数値を変えると文字サイズが変化*/
	font-family: 'Josefin Sans', sans-serif; /*フォントの種類の指定*/
}


/*メニューバー：ヘッダー下のメニュー*/

#nav {
	width: 100%; /*幅指定。%の数値を変えると幅が変化*/
	height: 60px; /*高さ指定。pxの数値を変えると高さが変化*/
	background-image: url("../images/menu.jpg") /*メニューバーの背景画像*/
}

#nav ul li {
	list-style:none; /*リストの先頭に表示するマーカーに関する指定*/
	float: left; /*指定された要素を左または右に寄せて配置。後に続く内容なその反対側に回り込む。*/
	width: 120px; /*親メニューの幅*/
	height: 60px; /*親メニューの高さ*/
	line-height:60px; /*行の高さの指定。負の値を指定することはできません。*/
	font-weight:bold; /*フォントの太さの指定*/
	text-align: center; /*文字の位置や、均等割付を指定。left,right,center,justify.*/
	background:#028760; /*親メニューの背景色*/
	color:#ffffff /*親メニューの文字色*/
}

#nav ul li a { /*親メニューのリンクの指定*/
	display: block;
	width: 120px; /*親メニューのリンクの幅*/
	height: 60px; /*親メニューのリンクの高さ*/
	color: #ffffff; /*親メニューのリンクの文字色*/
	font-size: 18px; /*親メニューのリンクの文字サイズ*/
	text-decoration:none; /*テキストに下線、上線、打消し線を付ける。*/
}

#nav ul li:hover,
 #nav ul li a:hover { /*親メニューのリンクにマウスカーソルを乗せた時の色*/
	background:#e0ffc1;/*マウスカーソルを乗せた時の親メニューの背景色*/
	color:#ffffff;/*マウスカーソルを乗せた時の親メニューの文字色*/
}

#nav ul li a:hover {
	background: #a3d6cc; /*マウスカーソルを乗せた時のメニューの背景色*/
	color: #000000; /*マウスカーソルを乗せた時のサブメニューの文字色*/
}
#nav ul li ul {
	display: none;
	margin:0px;
	padding:0px;
}
#nav ul li a:hover {
	background:#e0ffc1; /*ホバー時のメニューの背景色*/
	color: #000000; /*ホバー時のサブメニューの文字色*/
	border-top:1px solid #fff;
}

#nav ul li:hover ul {
	display: block;
	position:relative;
	width: 120px;
	height: 60px;
}
#nav ul li ul li {
	background:#028760; /*サブメニューの背景色*/
}

#nav * { /*マウスカーソルを乗せた時のアニメーションの指定*/
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
#nav p {
	font-size: 18px; /*親メニューのリンクの文字サイズ*/
	text-decoration:none; /*テキストに下線、上線、打消し線を付ける。*/
	margin:0px;
}
#nav p:hover {
	color:#000000;
}



/* メイン */
.main {
	overflow: hidden;
	padding: 30px 20px 30px 20px; /*内側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.main a { /*main要素内のリンクの指定*/
	color: #1f3134; /*main要素内のリンクの文字色*/
	font-size:17px; /*main要素内のリンクの文字サイズ。pxの数値を変えると文字サイズが変化*/
}
.main a:hover { /*main要素内のリンクにマウスカーソルを乗せた時の色*/
	color: #00a497; /*main要素内のリンクにマウスカーソルを乗せた時の文字色*/
	font-size:17px; /*main要素内のリンクにマウスカーソルを乗せた時の文字サイズ。pxの数値を変えると文字サイズが変化*/
}
content {
	width: 750px; /*幅指定。pxの数値を変えると幅が変化*/
	float: left; /*指定された要素を左または右に寄せて配置。後に続く内容なその反対側に回り込む。*/
	margin: 0px 20px 20px 0px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
h1 {
	font-size: 44px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight:bold; /*フォントの太さの指定*/
	color: #00008b; /*文字色の指定*/
}
.content h2 {
	font-size: 24px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight: bold; /*フォントの太さの指定*/
	color: #0000ff; /*文字色の指定*/
	padding:30px 0px 0px 0px; /*内側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.content h3 {
	font-size:18px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight:bold; /*フォントの太さの指定*/
	margin:20px 0px 0px 10px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.content h4 {
	font-size:24px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight:bold; /*フォントの太さの指定*/
	color:#dc143c; /*文字色の指定*/
	margin:10px 0px 5px 0px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.akaji {
	font-size:18px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	color:#dc143c; /*文字色の指定*/
	display: inline-block;
	display: inline;
}
.tyui {
	color:#ea5550; /*文字色の指定*/
	font-weight:bold;
	font-size:17px;
	padding-left:20px;
}
.content p {
	font-size:18px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	margin:5px 0px 0px 20px; /*外側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
}
.content li {
	font-size:18px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	line-height:40px;
	margin-left:20px;
}
.gazou {
	width:800px;
}


/* フッター：ページ下部に設けられた定型的な情報を記すための領域 */
.footer {
	padding: 10px 20px 40px 20px; /*内側の余白。上、右、下、左の順番で、pxの数値を変えると余白ができる*/
	background-color:#f0fff0; /*ヘッダーの背景色*/
	text-align:center; /*文字の位置や、均等割付を指定。left,right,center,justify.*/
	font-weight:bold;
}
.footer p {
	font-size:16px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight:normal;
	line-height:1.5em;
}
.copyright {
	text-align:center; /*文字の位置や、均等割付を指定。left,right,center,justify.*/
	font-size:16px; /*文字サイズ。pxの数値を変えると文字サイズが変化*/
	font-weight:normal;
}