@charset "utf-8";

/*======================================================================================*/
/*========================全端末(PC・タブレット・スマホ)共通設定========================*/
/*======================================================================================*/

/*================================全端末共通の設定================================*/
/*--------全体の設定--------*/
body {
	margin: 0px;
	padding: 0px;
	color: #90805a;		/*文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 20px;padding-bottom: 0px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*--------リンクの設定--------*/
a {
	color: #90805a;		/*リンクテキストの色*/
	transition: 1.0s;	/*マウスオン時の移り変わるまでの時間設定 0.5秒*/
	text-decoration: none;	/*下線を消す設定 残したいならこの1行を削除*/
}
a:hover {
	color: #5a5038;		/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定 残したいならこの1行を削除*/
}

/*--------コンテナブロック(HPを囲む)の設定--------*/
#container {
	max-width: 1150px;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0px 0px;	/*上下 左右へのボックス内の余白*/
}


/*================================ヘッダブロック(ロゴが入った最上段)の設定================================*/
/*--------ヘッダブロックの設定--------*/
header {
	height: 0px;		/*ヘッダブロック高*/
}

/*--------ロゴ画像の設定--------*/
header #logo img {
	position: absolute;
	float: left;		/*左に回り込み*/
	width: 0px;		/*画像の幅*/
	margin-top: 0px;	/*上に空ける空白 ここで上下の配置を調整*/
}


/*================================上部のメインメニュブロックの設定================================*/
/*--------メニュ全体の設定--------*/
#menubar {
	float: left;		/*メニュ位置振り分け*/
	margin-top: 0px;	/*上に空ける空白 ここで上下の配置を調整*/
	margin-bottom: 0px;	/*下に空ける空白 ここで上下の配置を調整*/
}

/*--------スマホ用メニュを表示/非表示--------*/
#menubar-s{
	display: none;
}

/*--------メニュ1個あたりの設定--------*/
#menubar li {
	display: inline;
	margin-right: 0px;	/*メニュ同士の左右の隙間*/
	margin-left: 0px;	/*メニュ同士の左右の隙間*/
}
#menubar li a {
	text-decoration: none;text-align: center;display: inline-block;
	font-size: 10px;				/*文字サイズ*/
	height: 50px;					/*メニュ高*/
	width: 260px;					/*メニュ幅*/
	line-height: 50px;				/*行間(heightの数値と合わせる)*/
	color: #fff;					/*文字色*/
	background: #ffffff;				/*背景色(古いブラウザ用)*/
	background: rgba(144,128,90,0.5);		/*背景色 左3つの数値はRGBでの色指定 一番右は透明度(0.5＝50％)の指定*/
	border-radius: 100px;				/*角丸のサイズ 大きめであれば適当で構わない*/
	border: 10px solid #fff;			/*枠線の幅 線種 色 (古いブラウザ用)*/
	border: 10px solid rgba(255,252,250,0.9);	/*枠線の幅 線種 色 色については左3つの数値はRGBでの色指定 一番右は透明度(0.9＝90％)の指定*/
}

/*--------マウスオン時の設定--------*/
#menubar li a:hover {
	background: #fff;	/*背景色*/
	color: #90805a;		/*文字色*/
	border-color: #90805a;	/*枠線の色*/
}


/*================================メインコンテンツの設定================================*/
/*--------h2タグの設定--------*/
#main h2 {
	clear: both;
	margin-bottom: 20px;
	background: url(../images/1.gif) repeat;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.2);	/*影の設定 それぞれ右へ 下へ ぼかし幅 色 の設定*/
	padding: 10px 10px 10px 20px;			/*左から 上 右 下 左側への余白*/
	border-radius: 10px;				/*角丸のサイズ*/
	color: #90805a;					/*文字色*/
}

/*--------h3タグの設定--------*/
#main h3 {
	clear: both;
	margin-bottom: 20px;
	background: #ffffff;				/*背景色(古いブラウザだとここの色のみが出る)*/
	background: linear-gradient(#a99973, #cfc6b1);	/*背景グラデション*/
	box-shadow: 0px 2px 2px rgba(0,0,0,0.2);	/*影の設定 それぞれ右へ 下へ ぼかし幅 色 の設定*/
	padding: 10px 10px 10px 20px;			/*左から 上 右 下 左側への余白*/
	border-radius: 10px;				/*角丸のサイズ*/
	color: #fff;					/*文字色*/
}

/*--------pタグ(段落)の設定--------*/
#main p {
	padding: 0px 0px 0px;	/*上 左右 下 への余白*/
}

/*--------pタグ(段落)が続いた場合の設定--------*/
#main p + p {
	margin-top: 0px;	/*続いたp(段落タグ)を少し上に詰める設定*/
}

/*--------sectionが続いた場合の設定--------*/
#main section + section {
	margin-top: 0px;
}


/*================================フッタブロックの設定================================*/
/*--------フッタメニュの設定--------*/
#footermenu	{
	clear: both;
	padding-top: 0px;
	font-size: 12px;
	text-align: center;
}
#footermenu li {
	display: inline;
	padding: 0px 4px;
}

/*--------フッタの設定--------*/
footer {
	clear: both;text-align: center;
	max-width: 1150px;	/*ブロックの最大幅 上の#containerと合わせる*/
	padding-top: 0px;
	padding-bottom: 0px;
}
footer .pr {display: block;font-size: 80%;}
footer a {text-decoration: none;}


/*================================テ－ブルの設定================================*/
/*--------セル間の隙間の設定--------*/
table {
	border-collapse: collapse;
}
table, th, td {
	border: 0px; padding: 0px;
}

/*--------ta1の設定--------*/
.ta1 {
	width: 100%;
	margin: 0 auto 0px;
}
.ta1, .ta1 td, .ta1 th {
	border: 0px solid #fff;		/*テ－ブルの枠線の幅 線種 色*/
	padding: 0px 0px;		/*ボックス内の余白*/
	word-break: break-all;
}

/*--------テ－ブル1行目に入った見出し部の設定--------*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;
	background: #fff;		/*背景色*/
}

/*--------テ－ブル内の左側の見出し部の設定--------*/
.ta1 th {
	background: rgba(255,255,255,0.1);	/*背景色 左３つの数値はRGBでの色指定 一番右は透明度(0.1＝10％)の指定*/
	width: 300px;				/*幅*/
	text-align: center;
}

/*--------テ－ブル左側ボックスに画像を入れた場合の設定--------*/
.ta1 th img {
	width: 100%;
}


/*================================ペ－ジの上部に戻る↑ボタンの設定================================*/
/*--------キ－フレ－ムスクロ－ルの設定--------*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*--------通常時ボタン表示/非表示--------*/
body .nav-fix-pos-pagetop a {
	display: none;
}

/*--------fixmenu_pagetop.jsの設定値になれば出現するボタンのスタイル--------*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;			/*ボタン幅*/
	line-height: 50px;		/*ボタン高*/
	z-index: 100;
	position: fixed;
	bottom: 5%;			/*ウィンドウの下から0pxの場所に配置*/
	right: 0%;			/*ウィンドウの右から0%の場所に配置*/
	background: #000;		/*背景色(古いブラウザ用)*/
	background: rgba(144,128,90,0.6);	/*背景色 0,0,0は黒の事で0.6は60%色がついた状態*/
	color: #fff;			/*文字色*/
	border-radius: 50%;		/*角丸指定 50%にすると円形になる 四角形がいいならこの1行削除*/
	animation-name: scroll;		/*上のアニメ－ションで指定しているkeyframesの名前(scroll)*/
	animation-duration: 1s;		/*アニメ－ションの実行時間*/
	animation-fill-mode: forwards;	/*アニメ－ションの完了後 最後のキ－フレ－ムを維持*/
}

/*--------マウスオン時の背景色--------*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #bbb;
}

/*================================その他の設定================================*/
/*--------その他の設定--------*/
.look {background: rgba(144,128,90,0.5);color: #fff;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 1em;list-style: disc;}
.color1, .color1 a {color: #90805a;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fl {margin: 0px 10px 10px 0px;float: left;}
img.fr {margin: 0px 0px 10px 10px;float: left;}




/*==============================================================================*/
/*========================トップペ－ジ(index.html)の設定========================*/
/*==============================================================================*/

/*================================index.htmlの設定================================*/
/*--------更新情報・お知らせブロックの設定--------*/
#new dl {
	padding: 0px 20px;
	margin-bottom: 0px;
}

/*--------日付ブロックの設定--------*/
#new dt {
	float: left;
	width: 0em;	/*幅*/
	letter-spacing: 0.1em;
}

/*--------記事ブロックの設定--------*/
#new dd {
	padding-left: 8em;
	border-bottom: 1px solid #efefef;	/*下線の幅 線種 色*/
}

/*--------NEWアイコンの設定--------*/
.newicon {
	background: #f00;	/*背景色*/
	color: #fff;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}




/*======================================================================*/
/*========================画面幅1244px以下の設定========================*/
/*======================================================================*/

/*================================1244px以下の設定================================*/
/*----------------画面幅の設定----------------*/
@media screen and (max-width:1244px){

	/*--------全体の設定--------*/
	body {
		font-size: 12px;	/*文字サイズ*/
		line-height: 1.5;	/*行間*/
	}

	/*--------ヘッダの設定--------*/
	header {
		text-align: left;	/*中身を左寄せ*/
	}

	/*--------アニメ－ションのフレ－ム設定 全100コマアニメ－ションだと解釈 透明度(opacity)0%から透明度100%にする指定--------*/
	@keyframes menu1 {
		0% {opacity: 0;}
		100% {opacity: 10;}
	}

	/*--------スマホ用メニュの設定--------*/
	#menubar-s {
		display: block;overflow: hidden;
		position: absolute;
		top: 40%;			/*上から400pxの場所に配置*/
		left: 0px;
		border-top: 1px solid #fff;	/*上の線の幅 線種 色*/
		width: 100%;
		z-index: 10;
		text-align: center;		/*テキストをセンタリング*/
		animation-name: menu1;		/*上のkeyframesの名前*/
		animation-duration: 0.5S;	/*アニメ－ションの実行時間 0.5秒*/
		animation-fill-mode: both;	/*アニメ－ションの完了後 最後のキ－フレ－ムを維持*/
	}

	/*--------メニュ1個あたりの設定--------*/
	#menubar-s li a {
		display: block;text-decoration: none;
		padding: 20px 0px 20px 0px;		/*上 右 下 左へのメニュ内の余白*/
		border-bottom: 1px solid #fff;		/*下の線の幅 線種 色*/
		background: rgba(100,85,70,0.8);	/*背景色*/
		color: #fff;				/*文字色*/
		font-size: 20px;			/*文字サイズ*/

	}

	 /*--------リンクにマウスオ－バの際の背景色の設定--------*/
	#menubar-s li a:hover {
		display: block;text-decoration: none;
		background: rgba(210,180,150,0.8);	/*背景色*/
		color: #fff;				/*文字色*/
		font-size: 20px;			/*文字サイズ*/
	}

	/*--------英語表記(飾り文字)--------*/
	#menubar-s li a span {
		display: block;
		font-size: 12px;	/*文字サイズ*/
	}

	/*--------PC用メニュを表示/非表示--------*/
	#menubar {
		display: none;
	}

	/*--------3本バ－アイコンの位置の設定--------*/
	#menubar_hdr {
		display: block;
		position: absolute;
		top: 30%;	/*上から300pxの場所に配置*/
		right: 0%;	/*右から3%の場所に配置*/
		border: 0px solid #000;	/*枠線の幅 線種 色*/
		z-index: 20;
	}

	/*--------3本バ－アイコンのサイズの設定--------*/
	#menubar_hdr.close,
	#menubar_hdr.open {
		width: 50px;	/*幅*/
		height: 50px;	/*高*/
	}

	/*--------3本バ－アイコンの画像--------*/
	#menubar_hdr.close {
		background: url(../images/icon_menu.png) no-repeat center top/50px;
	}

	/*--------3本バ－閉じるアイコンの画像--------*/
	#menubar_hdr.open {
		background: url(../images/icon_menu.png) no-repeat center bottom/50px;
	}

	/*--------hタグの設定--------*/
	#main h2 {
		padding: 20px 10px 20px 10px;	/*上 右 下 左へのボックス内の余白*/
	}
	#main h3 {
		padding-left: 10px;		/*左側のボックス内の余白*/
	}

	/*--------pタグの設定--------*/
	#main p {
		padding: 0px 0px 0px;		/*上 左右 下への余白*/
	}

	/*--------ta1の設定--------*/
	.ta1, .ta1 td, .ta1 th {
		padding: 0px;		/*ボックス内の余白*/
	}

	/*--------ta1の左側ボックスの設定--------*/
	.ta1 th {
	width: 100px;
	}

	/*--------その他の設定--------*/
	.ws,.wl {width: 94%;}
}




/*=====================================================================*/
/*========================画面幅610px以下の設定========================*/
/*=====================================================================*/

/*================================610px以下の設定================================*/
/*----------------画面幅の設定----------------*/
@media screen and (max-width:610px){

	/*--------全体の設定--------*/
	body {
		font-size: 12px;	/*文字サイズ*/
		line-height: 1.5;	/*行間*/
	}

	/*--------ヘッダの設定--------*/
	header {
		text-align: left;	/*中身を左寄せ*/
	}

	/*--------アニメ－ションのフレ－ム設定 全100コマアニメ－ションだと解釈 透明度(opacity)0%から透明度100%にする指定--------*/	@keyframes menu1 {
		0% {opacity: 0;}
		100% {opacity: 10;}
	}

	/*--------スマホ用メニュの設定--------*/
	#menubar-s {
		display: block;overflow: hidden;
		position: absolute;
		top: 210px;			/*上から210pxの場所に配置*/
		left: 0px;
		border-top: 1px solid #fff;	/*上の線の幅 線種 色*/
		width: 100%;
		z-index: 10;
		text-align: center;		/*テキストをセンタリング*/
		animation-name: menu1;		/*上のkeyframesの名前*/
		animation-duration: 0.5S;	/*アニメ－ションの実行時間 0.5秒*/
		animation-fill-mode: both;	/*アニメ－ションの完了後 最後のキ－フレ－ムを維持*/
	}

	/*--------メニュ1個あたりの設定--------*/
	#menubar-s li a {
		display: block;text-decoration: none;
		padding: 15px 0px 15px 0px;		/*上 右 下 左へのメニュ内の余白*/
		border-bottom: 1px solid #fff;		/*下の線の幅 線種 色*/
		background: rgba(100,85,70,0.8);	/*背景色*/
		color: #fff;				/*文字色*/
		font-size: 20px;			/*文字サイズ*/

	}

	 /*--------リンクにマウスオ－バの際の背景色の設定--------*/
	#menubar-s li a:hover {
		display: block;text-decoration: none;
		background: rgba(210,180,150,0.8);	/*背景色*/
		color: #fff;				/*文字色*/
		font-size: 20px;			/*文字サイズ*/
	}

	/*--------英語表記(飾り文字)--------*/
	#menubar-s li a span {
		display: block;
		font-size: 12px;	/*文字サイズ*/
	}

	/*--------PC用メニュを表示/非表示--------*/
	#menubar {
		display: none;
	}

	/*--------3本バ－アイコンの位置の設定--------*/
	#menubar_hdr {
		display: block;
		position: absolute;
		top: 161px;			/*上から161pxの場所に配置*/
		right: 0px;			/*右から0pxの場所に配置*/
		border: 0px solid #000;		/*枠線の幅 線種 色*/
		z-index: 20;
	}

	/*--------3本バ－アイコンのサイズの設定--------*/
	#menubar_hdr.close,
	#menubar_hdr.open {
		width: 50px;	/*幅*/
		height: 50px;	/*高*/
	}

	/*--------3本バ－アイコンの画像--------*//
	#menubar_hdr.close {
		background: url(../images/icon_menu.png) no-repeat center top/50px;
	}

	/*--------3本バ－閉じるアイコンの画像--------*/
	#menubar_hdr.open {
		background: url(../images/icon_menu.png) no-repeat center bottom/50px;
	}

	/*--------hタグの設定--------*/
	#main h2 {
		padding: 20px 10px 20px 10px;	/*上 右 下 左へのボックス内の余白*/
	}
	#main h3 {
		padding-left: 10px;		/*左側のボックス内の余白*/
	}

	/*--------pタグの設定--------*/
	#main p {
		padding: 0px 15px 0px;		/*上 左右 下への余白*/
	}

	/*--------ta1の設定--------*/
	.ta1, .ta1 td, .ta1 th {
		padding: 0px;			/*ボックス内の余白*/
	}

	/*--------ta1の左側ボックスの設定--------*/
	.ta1 th {
	width: 100px;
	}

	/*--------その他の設定--------*/
	.ws,.wl {width: 94%;}
}
