@charset "utf-8";



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

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #666;
	/*全体の文字色*/
	background: #fff url(../images/bg.jpg) center;
	/*背景色、背景画像の読み込み*/
	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: 40px;
	padding-bottom: 15px;
}

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: #583822;
	/*リンクテキストの色*/
}

a:hover {
	color: #797979;
	/*マウスオン時の文字色（全体）*/
	text-decoration: none;
	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1200px;
	/*コンテナー幅*/
	margin: 0 auto;
}

/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo {
	width: 600px;
	/*画像の幅*/
	margin: 40px auto;
}

/*上部のメインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
nav#menubar ul,
nav#menubar-s ul {
	display: flex;
	justify-content: center;
}
nav#menubar ul li,
nav#menubar-s ul li {
	/* float: left; */
	/*メニューを左側に回り込み*/
	text-align: center;
	/*内容をセンタリング*/
	width: 15%;
	/*メニュー幅*/
	margin-left: 1.5%;
	/*メニュー同士の隙間*/
	font-size: 16px;
	/*文字サイズ*/
}

/*各メニューの写真部分の設定*/
nav#menubar ul li img,
nav#menubar-s ul li img {
	width: 90%;
	/*上の15%の幅に対しての写真幅*/
	height: auto;
	-webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
	/*影の設定。右へ、下へ、ぼかし幅。rgba以降の3つの数字がRGBでの色（この場合は黒）。最後の小数点の数字が透明度30%の事。*/
	box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
	/*同上*/
	border: 7px solid #FFF;
	/*枠線の幅、線種、色*/
	border-radius: 50%;
	/*角丸の設定*/
	margin-bottom: 10px;
	/*写真とメニューテキストの間にとるスペース*/
}

/*各メニューの写真部分のマウスオン時の設定*/
nav#menubar ul li:hover img,
nav#menubar-s ul li:hover img {
	border: 7px solid #FF3;
	/*枠線の幅、線種、色*/
}

/*テキスト部分の設定*/
nav#menubar ul li a,
nav#menubar-s ul li a {
	text-decoration: none;
	color: #FFF;
	/*文字色*/
}

nav#menubar ul li a span,
nav#menubar-s ul li a span {
	display: block;
	word-wrap: break-word;
	border-radius: 100px;
	/*角丸の設定。大き目に設定しておけばOK。*/
	line-height: 1;
	/*高さ*/
	background: #a69425;
	/*背景色。菜種油色　https://www.colordic.org/w*/
	margin-bottom: 30px;
	/*下のコンテンツブロックとの余白*/
	padding: 4px;
}

/*テキスト部分のマウスオン時の設定。*/
nav#menubar ul li a:hover span,
nav#menubar-s ul li a:hover span {
	color: #FF3;
	/*文字色*/
	background: #583822;
	/*背景色。黒茶　ttps://www.colordic.org/w*/
}

/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s {
	display: none;
}

/*800px以下のメニュー見出し（MENU）を表示させない*/
#menubar_hdr {
	display: none;
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	clear: left;
	overflow: hidden;
	border-radius: 30px;
	/*角丸のサイズ*/
	background: #FFF;
	/*背景色*/
	padding: 2%;
	/*ボックス内の余白*/
	-webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
	/*影の設定。右、下、ぼかし幅*/
	box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
	/*同上*/
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	width: 100%;
	/*メインコンテンツ幅*/
	padding-bottom: 40px;
}

/*mainコンテンツのh2タグの設定*/
#main h2 {
	clear: both;
	margin-bottom: 15px;
	background: #a69425;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#dccb18, #a69425);
	/*グラデーション*/
	background: linear-gradient(#dccb18, #a69425);
	/*同上*/
	-webkit-box-shadow: 0px 2px 5px #ccc;
	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #ccc;
	/*同上*/
	padding: 10px 10px 10px 20px;
	/*左から、上、右、下、左側への余白*/
	border-radius: 50px;
	/*角丸のサイズ。大きめにしておけばOK。*/
	color: #FFF;
	/*文字色*/
}

/*mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 15px;
	background: #e5e5e5;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#FFF, #e5e5e5);
	/*グラデーション*/
	background: linear-gradient(#FFF, #e5e5e5);
	/*同上*/
	-webkit-box-shadow: 0px 2px 5px #dcdcdc;
	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #dcdcdc;
	/*同上*/
	padding: 9px 10px 9px 20px;
	/*左から、上、右、下、左側への余白*/
	border-radius: 50px;
	/*角丸のサイズ。大きめにしておけばOK。*/
	border: 1px solid #CCC;
	/*枠線の幅、線種、色*/
}

/*メインコンテンツのp(段落)タグ設定*/
#main p {
	padding: 0px 20px 14px;
	/*上、左右、下への余白*/
}

#main h2+p,
#main h3+p {
	margin-top: -5px;
}

/*menu内のブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main .list {
	height: 450px;
	/*ボックスの高さ*/
	width: 25%;
	/*ボックスの幅*/
	border-radius: 10px;
	/*角丸のサイズ*/
	-webkit-box-shadow: 0px 2px 5px #bcbcbc;
	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #bcbcbc;
	/*同上*/
	background: #FFF;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#FFF, #e6e6e6);
	/*グラデーション*/
	background: linear-gradient(#FFF, #e6e6e6);
	/*同上*/
	padding: 2%;
	/*ボックス内の余白*/
	float: left;
	margin: 0px 2% 20px;
	border: 1px solid #CCC;
	position: relative;
}

#main .list.h_100 {
	height: 100px;
}

#main .list.h_300 {
	height: 300px;
}

#main .list.col4 {
	width: 16.7%;
	height: 330px;
}

#main .list.gra01::before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/gra_2022_24.png)no-repeat top/contain;
	width: 130px;
	height: 86px;
	left: 10px;
	top: -8px;
}

#main .list.gra02::before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/gra_2023.png)no-repeat top/contain;
	width: 66px;
	height: 86px;
	left: 10px;
	top: -8px;
}

#main .list.gra03::before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/gra_2024_saiyusyu.png)no-repeat top/contain;
	width: 66px;
	height: 86px;
	left: 10px;
	top: -8px;
}

#main .list.col_2 {
	width: auto;
	height: auto;
	float: none;
	display: flex;
	justify-content: space-between;
}

#main .list.col_2 .img_wrap {
	width: 40%;
}

/*ボックス内の段落タグ設定*/
#main .list p {
	padding: 0px;
	color: #666;
	/*文字色*/
	font-size: 12px;
	/*文字サイズ*/
}

#main .list p span {
	color: #ff0000;
	font-weight: bold;
}

/*ボックス内のh4タグ設定*/
#main .list h4 {
	color: #797979;
	/*文字色*/
	border-bottom: 2px dotted #797979;
	/*下線の幅、線種、色*/
	margin-bottom: 5px;
	font-size: 16px;
	/*文字サイズ*/
}

#main .list h4 span {
	font-size: 13px;
}

/*ボックス内の写真*/
#main .list figure img {
	margin-bottom: 10px;
}

/*ふきだしアイコンの位置*/
#main .list img.icon {
	position: absolute;
	top: -10px;
	/*ボックスに対して上から-10pxの位置に配置*/
	right: 0px;
	/*ボックスに対して右から0pxの位置に配置*/
}

/*menu内のページ内メニュー（CMS用）
---------------------------------------------------------------------------*/
ul.navmenu {
	padding: 30px 0px;
	text-align: center;
}

ul.navmenu li {
	display: inline;
}

ul.navmenu li a {
	background: url(../images/arrow.png) no-repeat left center;
	/*矢印マークの設定*/
	padding-left: 15px;
	text-decoration: none;
}

ul.navmenu li a:hover {
	background: url(../images/arrow.png) no-repeat 2px center;
	/*マウスオン時に矢印マークを2pxだけ移動させて表示する設定*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding: 15px 0px;
}

footer .pr {
	display: block;
	font-size: 80%;
}

footer a {
	text-decoration: none;
}

/*snsなどのアイコン
---------------------------------------------------------------------------*/
/*アイコンブロック*/
ul.icon {
	text-align: center;
	/*センタリング*/
}

/*アイコン１個あたりの設定*/
ul.icon li {
	display: inline;
	/*横並びにさせる指定*/
}

/*アイコン画像の設定*/
ul.icon img {
	width: 30px;
	/*画像の幅*/
	margin: 5px;
	/*画像同士の余白*/
}


/*フッター内のメニュー
---------------------------------------------------------------------------*/
#footermenu {
	clear: both;
	padding-top: 30px;
	font-size: 12px;
	text-align: center;
}

#footermenu li {
	display: inline;
	padding: 0px 5px;
}



/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	overflow: auto;
	/*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
	height: 150px;
	margin: 5px 20px 0px;
}

/*日付設定*/
#new dt {
	font-weight: bold;
	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}

/*記事設定*/
#new dd {
	border-bottom: 1px solid #CCC;
	/*下線の幅、線種、色*/
	padding-left: 8em;
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
	width: 96%;
	margin: 0px auto 15px;
}

.ta1,
.ta1 td,
.ta1 th {
	border: 1px solid #ccc;
	/*テーブルの枠線の幅、線種、色*/
}

/*テーブル内の右側*/
.ta1 td {
	padding: 10px;
}

/*テーブル内の左側の見出し部分*/
.ta1 th {
	background: #e5e5e5;
	/*背景色*/
	width: 25%;
	/*幅*/
	padding: 10px;
	text-align: center;
}

/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;
	background: #FFCC33;
	/*背景色*/
}

/*inputボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	width: 250px;
	/*ボタン幅*/
	padding: 10px;
	/*ボタン内の余白*/
	font-size: 100%;
	border: none;
	border-radius: 30px;
	/*角丸のサイズ*/
	background: #797979;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#a2a2a2, #797979);
	/*グラデーション*/
	background: linear-gradient(#a2a2a2, #797979);
	/*同上*/
	-webkit-box-shadow: 0px 2px 5px #ccc;
	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #ccc;
	/*同上*/
	color: #FFF;
	/*文字色*/
}

/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background: #a2a2a2;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#797979, #a2a2a2);
	/*グラデーション*/
	background: linear-gradient(#797979, #a2a2a2);
	/*同上*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}

#pagetop a {
	display: block;
	float: right;
	text-decoration: none;
	text-align: center;
	color: #FFF;
	/*文字色*/
	font-size: 20px;
	/*文字サイズ*/
	background: #797979;
	/*背景色*/
	width: 60px;
	/*幅*/
	line-height: 60px;
	/*高さ*/
	border-radius: 50%;
	/*角丸のサイズ*/
}

/*マウスオン時*/
#pagetop a:hover {
	background: #333;
	/*背景色*/
	color: #FFF;
	/*文字色*/
}

/*FAQ・LINK
---------------------------------------------------------------------------*/
.faq {
	padding: 0px 15px;
}

.faq dt,
.faq dt a {
	color: #797979;
	font-weight: bold;
}

.faq dd {
	border-bottom: 1px solid #CCC;
	overflow: hidden;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;
	color: #FFF;
	font-size: 10px;
	padding: 0px 5px;
	border-radius: 2px;
	margin: 0px 5px;
}

/*その他
---------------------------------------------------------------------------*/
.look {
	background: #dcdcdc;
	padding: 4px;
	border-radius: 4px;
}

.mb1em,
.mb15 {
	margin-bottom: 15px;
}

.clear {
	clear: both;
}

ul.disc {
	padding: 0em 25px 1em;
	list-style: disc;
}

.color1 {
	color: #69821b;
}

.pr {
	font-size: 10px;
}

.wl {
	width: 96%;
}

.ws {
	width: 50%;
}

.c {
	text-align: center;
}

.r {
	text-align: right;
}

img.fl {
	margin: 0px 10px 10px 0px;
	float: left;
}

img.fr {
	margin: 0px 0px 10px 10px;
	float: left;
}

/*shop*/
#recruit .recruit_wrap {
	max-width: 600px;
	margin: 30px auto 0;
}

#recruit .recruit_wrap img {
	width: 100%;
	margin-bottom: 40px;
}

/*bento*/
ul.bento_memo {
	margin: 20px auto 50px;
	text-align: center;
}

ul.bento_memo li {
	font-size: 16px;
	font-weight: bold;
}

section.float_wrap{
	overflow: hidden;
}




/*画面幅1200px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {

	/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
	#container {
		margin: 2%;
		/*外側に少し余白を作る*/
	}

}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px) {

	/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
	header {
		margin-bottom: 20px;
	}

	/*ロゴ画像*/
	header #logo {
		width: 80%;
		/*画像の幅*/
		margin: 20px auto 10px;
	}

	/*上部のメインメニュー
---------------------------------------------------------------------------*/
	/*小さい端末用(画面幅800px以下)メニューを非表示から表示に切り替える*/
	#menubar-s {
		display: block;
	}

	/*メニュー１個あたりの設定*/
	nav#menubar-s ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	nav#menubar-s ul li {
		text-align: center;
		width: 28%;
		font-size: 12px;
		margin-left: 0;
	}

	/*大きな端末用(画面幅801px以上)メニューを非表示にする*/
	#menubar {
		display: none;
	}

	/*800px以下のメニュー見出し（MENU）
---------------------------------------------------------------------------*/
	#menubar_hdr {
		display: block;
		margin: 0 auto;
		color: #fff;
		/*文字色*/
		letter-spacing: 0.3em;
		border-radius: 50px;
		width: 40%;
		/*幅*/
		line-height: 36px;
		/*高さ*/
		text-align: center;
	}

	/*メニューopen時のアイコン（アイコンはマイナス表示中）と背景色の設定。480px以下の設定の「更新情報・お知らせ」ブロックと合わせるとOK。*/
	#menubar_hdr.open {
		background: url(../images/btn_minus.png) no-repeat right center, -webkit-linear-gradient(#dccb18, #a69425);
		background: url(../images/btn_minus.png) no-repeat right center, linear-gradient(#dccb18, #a69425);
	}

	/*メニューclose時のアイコン（アイコンはプラス表示中）と背景色の設定。480px以下の設定の「更新情報・お知らせ」ブロックと合わせるとOK。*/
	#menubar_hdr.close {
		background: url(../images/btn_plus.png) no-repeat right center, -webkit-linear-gradient(#dccb18, #a69425);
		background: url(../images/btn_plus.png) no-repeat right center, linear-gradient(#dccb18, #a69425);
	}

	/*menu.html内のメニューブロック
---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		width: 41%;
		/*ボックスの幅*/
	}

	#main .list.h_100 {
		height: 100px;
	}

	#main .list.col4 {
		width: 41%;
		height: auto;
	}

	/*その他
---------------------------------------------------------------------------*/
	body.s-n #sub {
		display: none;
	}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {

	/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
	/*ロゴ画像*/
	header #logo {
		width: 100%;
		/*画像の幅*/
	}

	/*menu内のブロック
---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		margin-bottom: 20px;
		padding: 5%;
		/*ボックス内の余白*/
	}

	#main .list.h_300,
	#main .list.h_100 {
		height: auto;
	}

	#main .list.col4 {
		width: auto;
		height: auto;
	}

	#main .list.col_2 {
		width: auto;
		height: auto;
		display: block;
	}

	#main .list.col_2 .img_wrap {
		width: 100%;
		margin-top: 20px;
	}

	/*menu内のページ内メニュー（CMS用）
---------------------------------------------------------------------------*/
	ul.navmenu {
		padding-top: 0px;
		padding-bottom: 10px;
		text-align: left;
	}

	ul.navmenu li {
		display: block;
	}

	/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
	/*お知らせ情報open時のアイコン（アイコンはマイナス表示中）と背景色の設定*/
	section#new h2.open {
		background: url(../images/btn_minus.png) no-repeat right center, -webkit-linear-gradient(#a2a2a2, #797979);
		background: url(../images/btn_minus.png) no-repeat right center, linear-gradient(#a2a2a2, #797979);
	}

	/*お知らせ情報close時のアイコン（アイコンはプラス表示中）と背景色の設定*/
	section#new h2.close {
		background: url(../images/btn_plus.png) no-repeat right center, -webkit-linear-gradient(#a2a2a2, #797979);
		background: url(../images/btn_plus.png) no-repeat right center, linear-gradient(#a2a2a2, #797979);
	}

	/*その他
---------------------------------------------------------------------------*/
	.ws,
	.wl {
		width: 95%;
	}


}