@charset "utf-8";



/*PC・タブレット・スマホ共通設定-------------------------------------------------*/

/*全体の設定---------------------------------------------------------------*/
	body {
		margin: 0px;padding: 0px;
		color: #000;	/*全体の文字色*/
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
		font-size: 15px;	/*文字サイズ*/
		line-height: 2;		/*行間*/
		-webkit-text-size-adjust: none;
		background:#fff;
		background:#fff;
	}
	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: 40px;padding-bottom: 15px;}
	img {border: none;
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		position: relative;

	}
	table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}

	iframe {
		display: block;
		width: 90%;
		border-radius: 10px;	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
		margin: auto;
		z-index: 0;

	}

	#subimg {
		width: 100%;
		position: relative;
		top: -20vw;
		border-radius: 0px;	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
	}
	@media screen and (max-width:1200px){
		header,#menubar,.contents,#pagetop {
			margin: 0 3%;
		}
	}


	@media screen and (max-width:650px){

		body {
			font-size: 12px;	/*文字サイズ*/
			line-height: 1.6;	/*行間*/
		}
	
		/*トップページ以外のメイン画像。
		#subimgのcss設定はここのみです。あまりに画像が細長くなるので、一旦幅を200%にして中央のみ切り抜いています。
		細長いまま全体を出したいならここのブロック全部削除して下さい。
		---------------------------------------------------------------------------*/
		#subimg {
			width: 100%;
			position: relative;
			top: -5vw;
			border-radius: 0px;	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
		}
	}


/*全体の設定-end--*/

/*リンク（全般）設定----------------------------------------------------------*/
	a {
		color: #fff;	/*リンクテキストの色*/
		-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
		transition: 0.5s;			/*同上*/
	}

	a:hover {
		color: #759450;				/*マウスオン時の文字色*/
		text-decoration: none;		/*マウスオン時にリンクの下線を消す設定*/
	}

/*リンク-end--*/


/*コンテナー（ホームページ全体を囲むブロック）----------------------------------*/
	#container {overflow-x: hidden;}


/*コンテナー-end*/



/*ヘッダー（ロゴが入った最上段のブロック）-----------------------------------*/
header {
	max-width: 1200px;	/*最大幅。#menubar、.contents、#pagetopと数字を合わせる*/
	position: relative;z-index: 1;
	margin: 0 auto;
	height: 10px;	/*ヘッダーの高さ*/
	text-align: center;	/*内容をセンタリング*/
}

/*ロゴ画像-----------------------------------------------------------------*/

#logo img {
	width: 80%;	/*画像幅*/
	padding-top: 100px;	/*画像の上にあける余白*/
	z-index: 99;

}
#logo2 img {
	width: 50%;	/*画像幅*/
	padding-top: 7.5vw;	/*画像の上にあける余白*/
	z-index: 99;
}

@media screen and (max-width:1200px){

	#logo img {
		padding-top: 150px;	/*画像の上にあける余白*/
	}
	#logo2 img {
		padding-top: 90px;	/*画像の上にあける余白*/
	}
	
}

@media screen and (max-width:650px){
	#logo img {
		width: 100%;	/*画像幅*/
		padding-top: 100px;	/*画像の上にあける余白*/
	
	}
	#logo2 img {
		width: 150%;	/*画像幅*/
		padding-top: 5vw;	/*画像の上にあける余白*/
	}

}
/*ロゴ画像--end-*/



/*メインメニュー------------------------------------------------------*/



	/*メニューブロックの設定*/
	#menubar {
		max-width: 1200px;	/*最大幅。#header、.contents、#pagetopと数字を合わせる*/
		position: relative;z-index: 2;
		margin: 0 auto;
		background: rgb(58, 41, 15);	/*背景色（古いブラウザ用）*/
		background: rgba(39, 27, 10, 0.9);	/*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
		height: 45px;		/*メニューブロックの高さ。ここを変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
		padding: 10px 0;	/*上下、左右へあける余白。ここの10pxの数字を変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
		border-radius: 10px 10px 10px 10px !important;		/*角丸のサイズ。左上、右上、右下、左下の順番。*/
	}

	/*トップページのメニューブロックの設定*/
	#top #menubar {
		border-radius: 10px;	/*角丸のサイズ*/
		-webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
		box-shadow: 2px 5px 8px rgba(0,0,0,0.2);			/*同上*/
	}
	/*小さい端末用メニューを表示させない*/
	#menubar-s {
		display: none;
	}

	@media screen and (max-width:650px){
		#menubar-s {
			display: block;	/*小さい端末用メニューを非表示から表示に切り替える*/
			position: relative;
			z-index: 3;
			padding-top: 20px;
}
		#top #menubar-s {margin-top: -150px}
	}

	/*メニュー１個あたりの設定*/
	#menubar li {
		float: left;	/*左に回り込み*/
		width: 23.5%;	/*メニュー幅（※６個の場合）*/

	}

	#menubar li a {
		text-decoration: none;
		display: block;
		text-align: center;
		line-height: 45px;	/*行間（高さ）*/
		border-right: 1px dashed #fff;	/*右側の線の幅、線種、色*/
	}

	@media screen and (max-width:650px){

		#menubar-s li {
			float: left;
			width: 31%;		/*幅*/
			margin: 0 1% 10px 1%;	/*上、右、下、左へ、メニューの外側に空けるスペース*/
		}
		#menubar-s li a {
			text-decoration: none;
			display: block;
			text-align: center;
			color: rgb(58, 41, 15);	/*文字色*/
			line-height: 50px;		/*行間（高さ）*/
			border: 2px solid rgb(58, 41, 15);	/*枠線の幅、線種、色*/
			border-radius: 10px;	/*角丸のサイズ*/
			background: #fff;	/*背景色（古いブラウザ用）*/
			background: rgba(255,255,255,0.9);	/*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
		}
		#menubar-s li a:hover,
		#menubar-s li.current a {
			color: #fff;	/*文字色*/
			background: #327d58;	/*背景色*/
		}
	}

	/*１個目メニューの設定*/
	#menubar li:first-child {
		margin-left: 2.8%;	/*左側にバランスよく余白を入れる*/
	}

	#menubar li:first-child a {
		border-left: 1px dashed#fff;	/*左側の線の幅、線種、色*/
	}

	/*マウスオン時と、現在表示中(current)設定*/
	#menubar li a:hover,
	#menubar li.current a {
		color: #fff;	/*文字色*/
		background: #327d58;	/*背景色*/
	}



	@media screen and (max-width:650px){
		/*大きな端末用メニューを非表示にする*/
		#menubar {display: none;}
	}


/*メインメニュー--end--*/

.silhouette img {
	position: fixed;
	right: 0%;
	bottom: 0%;
	height: 70%;
	opacity: 0.2;	/*透明度30%の事*/
	z-index: 0;
}
@media screen and (max-width:650px){
	.silhouette img {
		display: none;
	}
}

/*コンテンツ-----------------------------------------------*/
.contents {
	clear: both;
	max-width: 1200px;	/*最大幅。#header、#menubar、#pagetopと数字を合わせる*/
	margin: 0 auto;
	overflow: hidden;
	padding: 20px 0;
}
	@media screen and (max-width:650px){
		.contents {	padding: 10px 0;}
	}

	.contents img {border-radius: 20px;}	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
	/*h2タグ*/
	.contents h2 {
		clear: both;
		margin-bottom: 15px;
		padding: 7px 20px;	/*上下、左右への余白*/
		background: #3a290f;	/*背景色（古いブラウザ用）*/
		background: linear-gradient(rgb(58, 41, 15), rgb(36, 25, 9));
		color: #fff;	/*文字色*/
		border-radius: 10px;	/*角丸のサイズ*/
		font-size: 25px;
	}

	.type1 {
		background: none !important;
		border-radius: 0 !important;
		color: #000  !important;
		line-height: 1.3 !important;
		font-weight: normal !important;
		font-size: 40px !important;
		text-align: center !important;
		border: none !important;
		border-bottom: 1px dashed #3a290f !important;
		margin-bottom: 25px !important;
		letter-spacing: 0.2em !important;
		text-shadow: 4px 4px rgb(228, 228, 228) !important;

	}
	@media screen and (max-width:1200px){
		.type1 {font-size: 3vw !important;}
	}
	@media screen and (max-width:650px){
		.type1 {font-size: 4vw !important;}
	}



	/*h3タグ*/

	/*h3タグのタイプ違い（MENUページのh3見出しに使用）*/
	.contents h3 {
		clear: both;


	}
	/*見出しのタイプ違い設定（トップページの挨拶で使っている大きな見出し）*/
	.contents h3.type2 {
		background: none !important;
		border-radius: 0 !important;
		color: #3a290f  !important;
		line-height: 1.3 !important;
		font-weight: normal !important;
		font-size: 30px !important;
		text-align: center !important;
		border: none !important;
		margin: 35px !important;
		letter-spacing: 0.3em !important;
	}

	.contents h3.type3 {
		background: none !important;
		border-radius: 0 !important;
		color: #3a290f  !important;
		line-height: 1.3 !important;
		font-weight: normal !important;
		font-size: 20px !important;
		text-align: center !important;
		border: none !important;
		margin: 25px !important;
		letter-spacing: 0.3em !important;
	}

	@media screen and (max-width:1200px){
		.contents h3.type2 {font-size: 2.5vw !important;}
	}
	@media screen and (max-width:650px){
		.contents h3.type2 {font-size: 4vw !important;}
	}

	/*段落タグ*/
	.contents p {
		padding: 0px 20px 15px;	/*上、左右、下への余白*/
	}
	.contents h2 + p,
	.contents h3 + p {
		margin-top: -5px;
	}
/*コンテンツ--end---*/




/*メインコンテンツ-------------------------------*/

	/*メインコンテンツブロック*/
	.main {
		float: right;	/*右に回り込み*/
		width: 63%;		/*ボックス幅*/
	}
	.main img {border: none;max-width: 96%;height: auto;vertical-align: middle;}


	

	.frr img {
		float: right;
		margin: 15px;
		width: 30%;
		border-radius: 50%;/*角丸のサイズ*/
	}

	.contents h4 #aisatu{
		font-size: 18px;	/*文字サイズ*/
		font-family: 'Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝',serif;
		margin: 5%;
		float: none;
	}

	.contents h4 #syomei{
		font-size: 24px;	/*文字サイズ*/
		font-family: 'Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝',serif;
		text-align: right;	
		margin: 100px;
		float: none;
	}



	@media screen and (max-width:650px){
		.contents h4 #aisatu{
			font-size: 14px;	/*文字サイズ*/
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
		}

		.contents h4 #syomei{
			font-size: 16px;	/*文字サイズ*/
			margin: 50px;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
		}
	}
	.mokuzai {
		width: 28%;	/*ボックスの幅*/
		padding: 1.5%;	/*ボックス内の余白*/
		float: left;
		margin: 0px 1% 20px;	/*上、左右、下へのボックスの外側のスペース*/
	}
	

	@media screen and (max-width:650px){
		.mokuzai {
			height: auto;
			width: 80%;
			float: none;
			margin: 0px 10% 20px;	/*上、左右、下へのボックスの外側のスペース*/
			padding: 0px;	/*ボックス内の余白*/
		}
	}

	.jinkan figure {float: right;	margin: 0 15px 15px 0;	width: 200px;}

	.tenkan figure {float: left;	margin: 0 15px 15px 0;	width: 200px;}
	@media screen and (max-width:650px){
		.jinkan figure {float: right;	margin: 0 15px 15px 0;	width: 180px;}
		.tenkan figure {float: right;	margin: 0 15px 15px 0;	width: 180px;}
	}

	/*サブコンテンツ*/
		.sub {
			float: left;	/*左に回り込み*/
			width: 35%;	/*幅*/
		}
		/*サブコンテンツ内のbox1
		---------------------------------------------------------------------------*/
		.sub .box1 {
			width: 90%;	/*ボックスの幅*/
			padding: 20px;			/*ボックス内の余白*/
			margin: 5px;	/*ボックスの下に空けるスペース*/
			position: relative;
			border-radius: 10px;	/*角丸のサイズ*/
			box-shadow: 0px 2px 5px rgba(0,0,0,0.2);	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
			background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
			background: linear-gradient(rgb(236, 236, 236), rgb(219, 219, 219));			/*グラデーション*/
			padding: 1.5%;	/*ボックス内の余白*/
			float: left;
			
		}
		/*box1内のメニューの設定*/
		.sub .box1 h2 {
			text-align: center;
			font-size: 18px;
			padding: 5px 20px;	/*上下、左右への余白*/}
		
		.sub .box1 img {
			border-radius:5px;

		}

		.kinocoLogo{
			width: 60%;
			margin: 0px 5% 0px;
		}

		.kinocoL {

			height: auto;
			width: 90%;
			float: none;
			margin: 0px 5% 20px;	/*上、左右、下へのボックスの外側のスペース*/
			padding: 0px;	/*ボックス内の余白*/
		
		}

		.kinocoR {

			height: auto;
			width: 90%;
			float: none;
			margin: 0px 5% 20px;	/*上、左右、下へのボックスの外側のスペース*/
			padding: 0px;	/*ボックス内の余白*/
		
		}
	
		.kinocoR h4 {
			float: left;
		}
		.kinocoR p {
			float: right;
			margin-right: 30px;
		}

		.icon img {
			width: 50px;
			float: right;
			margin-right: 20px;
		}

		@media screen and (max-width:650px){
			.kinocoL {
				width: 35%;	/*ボックスの幅*/
				padding: 1.5%;	/*ボックス内の余白*/
				float: left;
				margin: 0px 1% 10px;	/*上、左右、下へのボックスの外側のスペース*/
			}
			.kinocoR {
				width: 55%;	/*ボックスの幅*/
				float: right;
				margin: 0px 1% 0px;	/*上、左右、下へのボックスの外側のスペース*/
				
			}
			.kinocoR h4 {
				margin-bottom: 0px;
			}
			.kinocoR h4 + p {
				margin-bottom: 50px;
			}

		}


	/*サブコンテンツ--end*/

	@media screen and (max-width:650px){
		.main, .sub {
			float: none;
			width: auto;
		}
	}
/*メインコンテンツ--end---*/

/*PAGE TOP設定---------*/
	#pagetop {
		clear: both;
		max-width: 1200px;	/*最大幅。#header、#menubar、.contentsと数字を合わせる*/
		margin: 0 auto;
	}
	#pagetop a {
		text-decoration: none;
		text-align: center;
		display: block;
		float: right;
		color: #FFF;		/*文字色*/
		font-size: 20px;	/*文字サイズ*/
		padding: 0px 30px;	/*上下、左右へのボックス内余白*/
		background: #3a290f;	/*背景色*/
		border-radius: 4px 4px 0px 0px;	/*角丸のサイズ。左上、右上、右下、左下。*/
	}
	/*マウスオン時*/
	#pagetop a:hover {
		background: #999;	/*背景色*/
		color: #FFF;			/*文字色*/
	}
/*PAGE TOP設定---end------*/

/*テーブル ta2-------------------------------------------------------*/

 .box2 {
	width: 95%;	/*ボックスの幅*/
	padding: 20px;			/*ボックス内の余白*/
	margin: 35px;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 10px;	/*角丸のサイズ*/
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2);	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(rgb(240, 240, 240), rgb(202, 202, 202));			/*グラデーション*/

}



@media screen and (max-width:650px){
	.box2 {
		height: auto;
		width: auto;
		float: none;
		margin: 0px 0px 20px;	/*上、左右、下へのボックスの外側のスペース*/
		padding: 20px;	/*ボックス内の余白*/
	}
}
	/*ta2設定*/
	.ta2 {
		width: 96%;
		margin: 0 2% 15px;
		}
	.ta2 tr:nth-child(even) {
		background: linear-gradient(rgb(190, 190, 190), rgb(216, 216, 216));			/*グラデーション 奇数番目の行にだけ色をつける。古いブラウザは未対応。*/
	}
	.ta2 td{
		padding: 10px;	/*ボックス内の余白*/
		border-bottom: 1px groove #327d58;	/*下の線の幅、線種、色*/
		text-align: left;
	}

	@media screen and (max-width:650px){
		.ta2 {	font-size: 14px;}

		.ta2 td,.ta2 th {padding: 3px;	/*ボックス内の余白*/
		}
	}


	/*一番左の列の設定。メニュータイトルが入っている所。*/
	.ta2 th {
		width: 170px;	/*幅*/
		text-align: center;	
		border-bottom: 1px groove #327d58;	/*下の線の幅、線種、色*/
	}

	@media screen and (max-width:650px){
		.ta2 th {width: 100px;}
	}

	/*写真用*/
	.ta2 img.menu-img {
		width: 150px;	/*画像の幅*/
		margin: 10px 2% 15px;
		float: left;
		border-radius: 50%;	/*角丸のサイズ*/
		box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.096);	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	}

	@media screen and (max-width:650px){
		.ta2 img.menu-img {
			float: none;
			display: block;
			width: 135px;
		}
	}

	h4 #jyusyu{
		font-size: 40px;	/*文字サイズ*/
		font-family: 'Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝',serif;
		text-shadow: 4px 4px rgb(219, 219, 219);
		text-align: left;	
		margin:0px 50px -5px;
		float: none;
		letter-spacing: 0.3em ;
		
	}
	@media screen and (max-width:650px){
		h4 #jyusyu {
			font-size: 30px;	/*文字サイズ*/
		}
	}

	.bg img{
		position: absolute;
		right: 0%;
		bottom: 0%;
		height: 80%;
		opacity: 0.2;	/*透明度30%の事*/
	}






/*テーブル ta2----end--*/


/*menu.html内のメニューブロック------------------------------------------------*/

	/*clearfix（変更不要）*/
	.list:after {content: "";display: block;clear: both;}

	/*各ボックスの設定*/
	.list {
		position: relative;
		height: 420px;	/*ボックスの高さ*/
		width: 28%;	/*ボックスの幅*/
		border-radius: 10px;	/*角丸のサイズ*/
		box-shadow: 0px 2px 5px rgba(0,0,0,0.2);	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
		background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
		background: linear-gradient(rgb(245, 245, 245), #dbdbdb);			/*グラデーション*/
		padding: 1.5%;	/*ボックス内の余白*/
		float: left;
		margin: 0px 1% 20px;	/*上、左右、下へのボックスの外側のスペース*/





	}
	
	@media screen and (max-width:650px){
		.list {
			height: auto;
			width: auto;
			float: none;
			margin: 0px 0px 20px;	/*上、左右、下へのボックスの外側のスペース*/
			padding: 20px;	/*ボックス内の余白*/
		}
	}

	/*ボックス内のp(段落)タグ設定*/
	.list p {
		padding: 0px;
		color: #666;		/*文字色*/
		font-size: 12px;	/*文字サイズ*/
	}
	/*ボックス内のh4(見出し)タグ設定*/
	.list h4 {
		margin-top: 10px;	/*上に空ける余白*/
	}
	/*ふきだしアイコンの位置*/
	.list img.icon {
		position: absolute;
		top:-2px;	/*ボックスに対して上から-10pxの位置に配置*/
		right: 2px;	/*ボックスに対して右から0pxの位置に配置*/
		width: 45px;	/*アイコン画像の幅*/
	}
	@media screen and (max-width:650px){
		/*写真画像*/
		.list figure img {
			float: left;
			width: 30%;
			margin-right: 3%;
		}
	}
/*menu.html内のメニューブロック---end-----*/


/*フッター設定---------------------------------------------------------------------------*/
	footer {
		clear: both;
		background: #3a290f;	/*背景色*/
		color: #fff;			/*文字色*/
		text-align: center;
	}
	footer a {
		color: #fff;
		text-decoration: none;
	}
	footer a:hover {
		color: #fff;
	}
	footer .pr {
		display: block;
		font-size: 80%;
	}
/*フッター設定--end-----*/

/*その他-----------------------------------------------------*/
	.look {color:#fff;background: #666;padding:5px;border-radius: 4px;}
	.mb15,.mb1em {margin-bottom: 15px;}
	.p3p {padding: 3%;}
	.pt70 {padding-top: 70px;}
	.clear {clear: both;}
	ul.disc {padding: 0em 25px 1em;list-style: disc;}
	.color1 {color: #3a290f !important;}
	.color2 {color: #3a290f;font-size: 24px;}
	.pr {font-size: 10px;}
	.wl {width: 96%;}
	.ws {width: 50%;}
	.w30p {width: 30% !important;}
	.w20p {width: 50px;text-align: center;}
	.w10p {width: 150px;text-align: center;}
	.w10p img {width: 100%;}
	.c {text-align: center;}
	.r {text-align: right;}
	.l {text-align: left;}
	.fr {float: right;margin-left: 1%;margin-bottom: 15px;width: 48%;}
	.fl {float: left;margin-right: 1%;margin-bottom: 15px;width: 48%;}
	.fl img{width: 100%;margin-bottom: 10px;margin: 0,auto;}
	.fr img{width: 100%;margin-left: 5%;margin-bottom: 10px;margin: 0,auto;}
	.big1 {font-size: 24px;letter-spacing: 0.2em;}
	.mini1 {font-size: 11px;}
	.sh {display: none;}
	.dn {display: none;}
	.mt-top {margin-top: -150px !important;}

	.menu-top {text-align: right;}
	.smt-top {margin-top: -19vw !important;}

	@media screen and (max-width:650px){

		body.s-n .sub {display: none;}
		.pt70 {padding-top: 0px;}

		.fr,.fl {float: none;margin: 0;margin-bottom: 10px;width: 100%;}
		.ws,.wl {width: 95%;}
		.sh {display: block;}
		.pc {display: none;}
		.mt-top {margin-top: -12vw !important;}
	}
/*その他---end--*/