@charset "utf-8";


/***************
全体の設定
***************/

/**背景画像設定、フォント設定**/

body{
	-webkit-text-size-adjust: 100%;
	background-image: url(../images/bg_03.png); /*背景読み込み*/
	background-repeat: repeat-x repeat-y; /*背景を縦横に繰り返す*/
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; /*フォント読み込み*/
}


/***ページサイズ***/
#page{
	width: 1000px; /*全体の大きさ*/
	margin: 0 auto; /*全体の中心寄せ*/
}

/**全体の中央ぞろえ**/

section,header,article{
	text-align: center; /*文字などの中心ぞろえ*/
}


/**下線を消す**/
*{
	text-decoration: none;
}

/**リンクの文字色を白にする**/

a{
	color: white;
}

/**リンクの文字色を通常に**/

aside ul li a{
	color: blue;
}

.top_news ul li a{
	color: blue;
}

/**figureのmarginを0に**/

figure{
	margin: 0;
}


/**グローバルナビのフリーフォント設定**/

@font-face {
  font-family: 'shirokuma';
  src: url('../fonts/Shirokuma.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Shirokuma.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Shirokuma.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Shirokuma.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Shirokuma.svg#svgFontName') format('svg'); /* Legacy iOS */
}



/******h1,h2などの見出し設定******/

/*見出し画像（フリーフォントを使用したもの）設定*/

h1 img{
	height: 75px;/*縦幅*/
	text-align: center;/*中心寄せ*/
}

h2 img{
	height: 50px;/*縦幅*/
	margin: 0 auto;/*中心寄せ*/
}

h3 img{
	display: block;/*ブロックレベル要素に*/
	margin: 0 auto;/*中心寄せ*/
	height: 48px;/*縦幅*/
}

/*h1の周りの余白と幅*/

section h1{
	margin: 42px 0 50px 0;/*外側余白*/
}

article h1{
	margin: 42px 0 70px 0;/*外側余白*/
	width: 1000px;/*横幅*/
}


/**sectionごとの区切り線**/

section{
	border-bottom: solid 1px #6BB778; /*区切り線 実線 細さ指定 色指定*/
}

/*footer上の区切り線を消す*/

section:last-of-type{
	border-bottom: none; /*section最後の下線を消す*/
}


/****トップページの押すとへこむボタンの設定****/

/*1個めのボタン*/

#btn{
	margin: auto; /*中心揃え*/
	width: 255px; /*横幅*/
	height: 45px; /*縦幅*/
	border: solid 1px black; /*外側の線*/
	margin-top: 60px; /*上外側余白*/
	margin-bottom: 80px; /*下外側余白*/
	line-height: 50px; /*縦ぞろえ*/
	background-color: #3E964D; /*背景色*/
	border-radius: 1em; /*角丸に*/
	position: relative; /*動く幅の元になる位置*/
    top: 0;/*上部からの位置*/
    transition: 0.4s ease; /*アニメーション*/
}

/*aタグのリンク範囲をボックスいっぱいに広げる*/

#btn a{
	display: block;/*ブロックレベル要素に*/
	position: absolute;
	top: 0;/*上部からの位置*/
	left: 0;/*左からの位置*/
	width: 100%;/*横幅*/
	height: 100%;/*縦幅*/
}

/*カーソルを乗せると動いて、明るく色が変わる*/

#btn:hover{
	background-color: #99D2A3; /*背景色*/
	top: 0.4em; /*ちょっと上に動く*/
}


/*******リストスタイル指定********/

/*内側余白を０に*/
ul{
	padding: 0;
}

/*グローバルナビと、取引先リンクの設定*/
ul li{
	list-style: none;/*先頭の点をなくす*/
	margin: 3px 0;/*外側余白の設定*/
}



/***********flexbox関係*********/

/**横に並び、レスポンシブでは縦並びになる**/

.flex-container{
	display: -webkit-box;/*未対応ブラウザ対策*/
  	display: -ms-flexbox;/*未対応ブラウザ対策*/
  	display: flex;/*flexboxに*/
  	padding: 0; /*内側余白を０に*/
}

/**********
グローバルメニュー設定
***********/

.flex-container_menu{
	display: -webkit-box;/*未対応ブラウザ対策*/
  	display: -ms-flexbox;/*未対応ブラウザ対策*/
  	display: flex;/*flexboxに*/
  	padding: 0; /*内側余白を０に*/
}


/**横に並び、レスポンシブでは縦並びになる**/

.flex-container_menu li{
	width: 200px; /*横幅*/
	line-height: 40px; /*縦ぞろえ*/
	position: relative; /*動く幅の元になる位置*/
    top: 0; /*アニメーション開始位置の指定*/
	transition-property: all; /*アニメーション（全てが変化する）*/
	transition-duration: 0.4s; /*アニメーション（変化にかかる時間）*/
	transition-timing-function: ease; /*アニメーション（変化のタイミング、進行の指定）*/
	transition-delay: 0; /*アニメーション（変化がいつ始まるか）*/
    font-size: 1.5em; /*文字大きさ*/
    font-family: "shirokuma"; /*フォント指定*/
    letter-spacing: -5px; /*文字の間隔*/
}

/*そのページにいることを知らせる*/

.current{
	background-color: #99D2A3;/*そのページにいることを知らせるグローバルメニューの背景色*/
	border-radius: 0.7em; /*角丸に*/
}

/*グローバルメニューの各部門ごとのページにいることを知らせる背景色、最優先！*/

.current_01{
	background-color: #6BB778!important;/*そのページにいることを知らせるグローバルメニューの背景色最優先！*/
	border-radius: 0.7em; /*角丸に*/
}

/*乗せると動いて、色がつく*/

.flex-container_menu > li:hover{
	top:-0.2em; /*0.2emぶん上に*/
    background:	#99D2A3; /*色を変える*/
    border-radius: 0.7em; /*角丸に*/
}

/*グローバルメニューの文字*/

.flex-container_menu li a{
	color: black; /*文字色の指定*/
	text-align: center; /*テキストなどのセンター寄せ*/
}


/**アコーディオンメニュー(各部門について)**/

/*動く幅の元になる位置*/

.dropmenu li{
	position: relative;/*absoluteの基になる指定*/
}

/*動く位置の指定*/

.dropmenu li ul{
	position: absolute; /*relativeを基本として動くものの指定*/
	z-index: 9999; /*重なった時に前に来る（値が大きい）*/
}

#fade-in2 li ul{
  opacity: 0; /*完全に透明に*/
  top: 50%; /*「各部門について」の文字に半分かかった（50％）位置からアニメーションが始まる*/
  visibility: hidden; /*要素を隠す*/
  transition: .5s; /*アニメーション速度*/
}

#fade-in2 li:hover ul{
  top: 100%; /*「各部門について」の文字にから完全に離れた（100％）位置でアニメーションが終わる*/
  visibility: visible; /*要素を表示する*/
  opacity: 1; /*完全に不透明、表示に*/
}

#fade-in2 li ul li{
	background-color: #99D2A3;/*背景色*/
	border-radius: 0.4em; /*角丸に*/
}

#fade-in2 li ul li a{
	font-size: 0.7em;/*文字の大きさ*/
	letter-spacing: 0em; /*文字の間隔*/
}



/****************
トップページ
****************/


/****最新情報****/

/*newsと販売会情報を左から右へ、上から下へ、の順番に配置。レスポンシブでは縦並びに。*/

.flex-container_top{
	display: flex;/*左から右へ水平方向に配置*/
	display: -webkit-box;/*未対応ブラウザ対策*/
  	display: -ms-flexbox;/*未対応ブラウザ対策*/
}

/*topページの最新情報の幅*/

section .flex-container_top{
	width: 1000px;/*横幅*/
}

/***topページ各news、販売会情報***/

/*外側余白調整*/

section .top_information{
	margin: 0;/*全体の外側余白を0に*/
}

.flex-container_top h2{
	margin: 0;/*h2の外側余白を0に*/
}

/*各NEWS、販売会情報タイトル*/

.flex-container_top ul h2{
	text-align: center;  /*文字の中心揃え*/
}

/*それぞれの左揃え（バラバラだったので）*/

.flex-container_top ul li{
	text-align: left; /*文字を左寄せに*/
	width: 480px;/*横幅*/
}

/*news、販売会情報の各幅*/

.flex-container_top .top_news:first-child{
	padding: 0px 0px 10px 0px; /*外側余白*/
}

.flex-container_top .top_news{
	width: 500px; /*横幅*/
	padding: 0px 10px 20px 30px; /*外側余白*/
}

/*NEWSと販売会情報の中のリンク文字色を青に*/
.RegularEevents tbody tr a{
	color: blue;/*文字を青色に*/
}
.netshop a{
	color: blue;/*文字を青色に*/
}

/***NEWS***/

/*更新履歴ボックス*/
.kousin {
	overflow: auto;/*はみ出た部分をスクロールで見れるようにする*/
	position: relative; /*IEでスクロールができるようにする*/
	width: 490px;/*横幅*/
	height: 260px;/*縦幅*/
	padding: 5px;/*内側余白*/
	border: 1px dashed #3E964D;/*太さ指定 破線 色指定*/
	margin: 0px 0px 15px 0px;/*外側余白*/
}

/*右から左のflexboxに。レスポンシブでも並びはそのまま*/
.kousin li{
	display: flex;/*flexboxに*/
	flex-direction: row;/*左から右に*/
  	-webkit-box-orient: horizontal;/*未対応ブラウザ対策*/
  	-webkit-box-direction: normal;/*未対応ブラウザ対策*/
    -ms-flex-direction: row;/*未対応ブラウザ対策*/
}

/**newsの装飾など**/

/*右余白（数字と文字の間隔を離す）*/

section ul li time{
	line-height: 27px;/*行の高さ指定*/
	margin-right: 10px; /*外側余白*/
}

.flex-container_top .top_news ul li{
	width: auto;/*横幅*/
	margin: 0;/*外側余白を0に*/
}

/*更新履歴の年月日*/
.kousin time{
	width: 160px;/*横幅*/
	line-height: 1.8em;/*大きさ指定*/
}

/*更新履歴のimgの大きさ*/
.kousin img{
	width: 20px;/*横幅*/
	height: 20px;/*縦幅*/
	display: inline;/*インライン要素に*/
	text-align: left;/*左揃えに*/
}

/*更新履歴の内容*/
.top_news .kousin span{
	width: 320px;/*横幅*/
	text-align: left;/*左揃えに*/
}



/***販売会情報***/

/**表の装飾**/

/*表の大枠*/
.RegularEevents{
	width: 430px;/*表の横幅*/
	border-style: none;/*枠線を消す*/
	margin: 0 auto;/*中央寄せ*/
}

/**表の内容**/

/*文字の指定*/
.RegularEevents tbody tr td{
	height: 10px;/*縦の幅*/
	text-align: left;/*文字を左揃えに*/
	border-style: none;/*枠線を消す*/
	border-bottom: 1px dotted #3E964D;/*下側に線を入れる*/
}

.RegularEevents tbody tr .RegularEevents_Annotation{
	border-bottom: none;
}

/*timeタグの外側余白*/
.RegularEevents tbody tr td time{
	display: block;
	margin: 5px 0;
}



/****かたくりの里、商品紹介（.flex-container2は、shopでも使用）****/

/*flexbox指定(左から右へ、上から下へ焼き菓子のお店部分で指定)その他スペース指定**/

/*flexboxに。左から右へ、上から下へ、の順番に配置*/
.flex-container2{
	width: 1000px;/*横幅*/
	display: flex;/*flexboxに*/
	display: -ms-flexbox;/*未対応ブラウザ対策*/
	flex-wrap: wrap;/*左から右へ、上から下へ、の順番に配置*/
	-ms-flex-wrap: wrap;/*左から右へ、上から下へ、の順番に。未対応ブラウザ対策*/
}


/****かたくりの里とは****/

/*レスポンシブ時は左揃えになる*/
.guide_txt{
	line-height: 2em; /*縦の幅*/
}

/****部門紹介****/

/*各部門紹介article*/

.flex-container article{
	margin-bottom: 30px;/*下余白*/
}

/**figure関係**/

.flex-container article figure{
	margin: 0;/*marginをリセット*/
}

.flex-container article figure:hover{
	opacity: 0.7; /*上に乗ると少し透明に*/
}

/*画像、説明文の幅*/

section article{
	width: 330px; /*横幅*/
}


/*トップページのリンク情報*/

/*リンクの文字*/
.top_link h1{
	margin: 42px 0 30px 0;/*左右余白*/
}

/*バナーの横幅*/
.top_link article{
	width: 500px; /*横幅*/
}



/****フッター情報****/

/*footerで上下に幅を持たせて見やすく*/

footer{
	border-top: solid 1px #6BB778; /*footerの上に線を 実線 細さ指定 色指定*/
	margin: 20px 0; /*上下外側余白*/
}

footer p{
	text-align: center;/*文字を真ん中に*/
}




/********ローディングアニメーション********/

.page-loader {
  position: fixed;
  z-index: 10001;/*重なりを1番前に*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white; /*ローディング画面の背景色*/
}

/**アニメーション**/

.spinner {
  width: 60px;/*アニメーションの大きさ指定*/
  height: 60px;/*アニメーションの大きさ指定*/
  position: relative;
  margin: 320px auto;/*アニメーションの位置指定*/
}



/*****************
aboutページ
******************/

/*文章の幅、余白*/

.flex-container div{
	width: 500px; /*横幅*/
	height: 330px; /*縦幅*/
	padding: 0 33px; /*内側上下余白*/
	background-color: white; /*背景色を白に*/
}

/*文章と画像の幅*/

#about article{
 	width: 1000px;/*横幅*/
}

/*imgをブロックレベル要素にし、謎の空白をなくす*/

#about article img{
	display: block;/*ブロックレベル要素に*/
}

/**文字関係**/

/*pタグ文字の左揃え、行の高さ、上余白*/
.flex-container div p{
	text-align: left; /*左揃え*/
	line-height: 26px; /*行の高さを指定*/
	padding-top: 15px; /*上内側余白*/
}

/*addressタグ文字の左揃え、行の高さ*/
.flex-container div address{
	text-align: left; /*テキストなどの左揃え*/
	line-height: 26px; /*行の高さを指定*/
}


/**aboutページ、asideリンク紹介**/

aside h2{
	margin-top: 10px;/*上余白*/
}

/*会社名の文字を太字に、余白*/

aside ul p{
	font-weight: bold; /*太字に*/
	margin-top: 30px; /*上外側余白*/
}

/*余白*/
aside{
	padding-bottom: 20px; /*下内側余白*/
}

/*最後の要素だけ上外側余白を広く*/
aside p:last-child{
	margin-top: 60px;/*上外側余白*/
}



/*****************
各部門共通
***************/

/*文章ｐタグの余白*/

.txt-space{
	margin-top: 35px; /*外側上余白*/
}

/*各部門の区切り*/

.Bumon{
	padding:20px 0 35px 0; /*上下内側余白*/
	border-bottom: solid 1px #6BB778; /*下線 実線 細さ指定 色指定*/
}

.Bumon:last-child{
	padding:20px 0 35px 0; /*上下内側余白*/
	border-bottom: none; /*下線をなくす*/
}

/*各部門の説明*/

.Bumon h2{
	margin-top: 40px; /*上余白*/
}

/*作業紹介*/

.flex-container .work{
	background-color: transparent; /*背景を透明に*/
	height: auto; /*縦中心に（指定の上書き時のみ有効）*/
	padding: 0;/*内側余白を0に*/
}

.flex-container .work p{
	text-align: center; /*テキストなどの中心揃え*/
	padding-top: 0px; /*上内側余白 */
}


/*様子説明の文字と画像の幅*/

#departmenta article{
 	width: 1000px; /*横幅*/
}

/*imgをブロックレベル要素にし、謎の空白をなくす*/

#departmenta article img{
	display: block; /*ブロックレベル要素へ変える*/
}


/*表の下にある下線をなくす*/

#departmenta{
	border-bottom: none; /*下線を消す*/
}


/**tableについて**/

/*table幅と中心寄せ*/

.table{
	width: 980px; /*横幅*/
	margin: 0 auto; /*横幅の中心に*/
}

/*table装飾*/

table{
	border-collapse: collapse; /*線を一重線に*/
	width: 980px; /*横幅*/
	border: solid 1px #6BB778; /*表全体を線で囲う*/
}

table th, table td {
 	border: dotted 1px #6BB778; /*点線 太さ 色指定*/
	line-height: 1.4em; /*行の高さを指定*/
}

table th{
	background: #C5E7CB; /*背景色*/
}

.tb_header{
	font-weight: bold; /*太字に*/
	line-height: 1.8em; /*行の高さを指定*/
}

td{
	height: 150px; /*縦幅*/
}


/**製菓部門の外部リンク**/

.confectionery_link {
	margin-top: 35px;/*上外側余白*/
}

.confectionery_link p a{
	color: blue;/*文字を青色に*/
}


/*******************
受注・屋外作業ページ
*********************/

/**時間表（テーブル）の幅など**/

/*2番目の幅を広く*/
.tbl_plans_lightwork tr th:nth-child(2),.tbl_plans_lightwork tr td:nth-child(2){
    width: 170px;/*横幅*/
}

/*4番目の幅を広く*/
.tbl_plans_lightwork tr th:nth-child(4),.tbl_plans_lightwork tr td:nth-child(4){
    width: 170px;/*横幅*/
}

/*5番目の幅を少し広く*/
.tbl_plans_lightwork tr th:nth-child(5),.tbl_plans_lightwork tr td:nth-child(5){
    width: 100px;/*横幅*/
}

/*6番目の幅を広く*/
.tbl_plans_lightwork tr th:nth-child(6),.tbl_plans_lightwork tr td:nth-child(6){
    width: 170px;/*横幅*/
}

/*8番目の幅を広く*/
.tbl_plans_lightwork tr th:nth-child(8),.tbl_plans_lightwork tr td:nth-child(8){
    width: 170px;/*横幅*/
}





/***********
生活介護ページ
*************/

#Lifecare article{
 	width: 1000px;/*横幅*/
}

/*imgをブロックレベル要素にし、謎の空白をなくす*/

#Lifecare article img{
	display: block;/*ブロックレベル要素に*/
}


/*文章の幅、余白*/

#Lifecare .flex-container div{
	width: 500px; /*横幅*/
	height: 370px;/*縦幅*/
	padding: 0 33px; /*内側上下余白*/
	background-color: white; /*背景色を白に*/
	border-radius: 120px;/*角丸に*/
}


/**文字関係**/

/*生活介護最初のpタグ文字の上余白*/
#Lifecare .flex-container div p:first-child{
	padding-top: 55px; /*上内側余白*/
}

/*pタグ文字の左揃え、行の高さ、上余白*/
#Lifecare .flex-container div p{
	text-align: left; /*左揃え*/
	line-height: 26px; /*行の高さを指定*/
	padding-top: 10px; /*上内側余白*/
}

/*addressタグ文字の左揃え、行の高さ*/
.flex-container div address{
	text-align: left; /*テキストなどの左揃え*/
	line-height: 25px; /*行の高さを指定/
	/*display: block;ブロックレベル要素に*/
}


/*****************
shopページ
******************/

/*shopのタイトル余白*/

.katakuri_shop h1{
	margin: 40px 0 35px 0;/*外側余白*/
}

/*shop説明部分*/

.guide_txt2{
	line-height: 2em; /*行の高さを指定*/
}

.guide_txt2:nth-of-type(2){
	margin-bottom: 25px; /*上から2番目の文章の、下側余白*/
}

/*shopの注釈*/

.font_red{
	color: red;
	margin-bottom: 30px;
}


/*商品取り置きの説明*/

.guide_txt3{
	width: 500px;/*横幅*/
	margin: 0 auto;/*中心寄せ*/
	border: dashed 1.5px #6BB778;/*破線 太さ指定 色指定*/
	margin-bottom: 45px; /*下側余白*/
}

.guide_txt3 p{
	line-height: 2em; /*行の高さを指定*/
	margin-bottom: 0px; /*下側余白*/
}

.guide_txt3 address{
	line-height: 2.5em;/*行の高さを指定*/
}


/*パンや餃子の画像*/

#shop_about{
	margin-bottom: 40px;/*下外側余白*/
}

#shop_about img{
	width: 330px;/*横幅*/
	height: 250px;/*縦幅*/
}


/****商品紹介****/

.cookie_spacer{
	margin-bottom: 50px;/*下外側余白*/
}

/*相対位置指定（商品紹介画像）*/
.ProductVisual{
	position: relative;/* 相対位置 */
	width: 1000px;/*横幅*/
	height: 562px;/*縦幅*/
}

/*商品紹介画像に重ねるものの指定*/
.ProductVisualText{
	position: absolute;/* 絶対位置 */
	top: 0px;/*重ねる位置の指定*/
	width: 300px;/*横幅*/
	height: 562px;/*縦幅*/
	background-color: rgba(255,255,255,0.7);/* 背景色のRGB表記。最後の「0.7」はopacity（透明度）*/
}

/*商品紹介画像タイトル*/
.ProductVisualText .Product2{
	font-size: 25px;/*フォントの大きさ*/
	margin-top: 32px;/*上側余白*/
	font-family: "shirokuma";/*フォント指定*/
}

/*商品紹介画像の上の文章*/
.ProductVisualText p{
	margin: 33px 10px;/*外側余白*/
}

/*それぞれの商品*/
.flex-container2 div{
	margin: 0 auto;/*中央寄せ*/
	padding-top: 10px;/*内側上余白*/
}

/*それぞれの商品のサイズ*/
.flex-container2 div img{
	width: 180px;/*横幅*/
	height: 170px;/*縦幅*/
}

/**県央福祉会ショップへのリンク部分**/
.shop_kenou_link{
	width: 1000px;
	margin-bottom: 50px;
}


/**ネパリ・バザーロ**/

/*商品紹介画像タイトル*/
.ProductVisualText .Product3{
	font-size: 25px;/*フォントの大きさ*/
	margin-top: 80px;/*上側余白*/
	font-family: "shirokuma";/*フォント指定*/
	}


/*ネパリさんへのリンク*/
.LinkBlue{
	color: blue;/*文字を青色に*/
}


/****************
焼き菓子のお店店舗情報
かたくりの里アクセス
****************/

/**焼き菓子のお店articleの下線**/
.katakuri_shop{
	border-bottom: solid 1px #6BB778;/*下線 実線 1px 色指定*/
}

/****map関係****/

/*flexbox*/

.map{
 	display: flex;/*左から右へ水平方向に並べる*/
	display: -webkit-box;/*古いブラウザへの対応*/
  	display: -ms-flexbox;/*古いブラウザへの対応*/
}

/*マップ左側の案内文*/

.map-left{
	width: 400px;/*横幅*/
	/*左と上外側余白*/
	margin-left: 70px;
    margin-top: 10px;
}

.map-left address{
	margin: 20px 0;/*外側余白を20pxに*/
	text-align: left;/*テキストを左揃えに*/
}

.map-left time{
	display: block;/*インライン要素をブロックレベル要素に*/
 	text-align: left;/*テキストを左揃えに*/
}

.map-left p{
	text-align: left;/*テキストを左揃えに*/
}

/*マップ右側の画像*/

.map-right{
	width: 500px;/*マップ右側の横幅*/
	margin-top: 20px;/*外側上余白*/
}

.map-right img{
	width: 380px;/*画像の横幅*/
	height: 280px;/*画像の高さ*/
}

/**********
アクセスページ
**********/

/*マップなどの幅・下線など*/

.access_center{
	width: 1000px;/*アクセスページのマップなど全体の幅*/
	padding-bottom: 20px;/*下内側余白*/
	border-bottom: 1px solid #6BB778;/*下線・実線・色指定*/
}

.access_center:last-child{
	border-bottom: none;/*最後の下側実線を無しに*/
}

	/*************
	農協ページ
	*************/
	.noukyo_top{
		line-height: 44px;	
}

	.noukyo_txt{
		max-width: 800px;
		margin: 50px auto;
		text-align: left;
		font-size: 18px;
}


/************************
レスポンシブここから
*************************/

/*タブレットのウインドウサイズ（1024PX）以下の場合の指定*/
@media screen and (max-width: 600px) {

	p{
		margin: 0 12px;/*左右外側余白*/
	}

	/***ページサイズ,背景を白に***/
	#page{
		width: 100%; /*全体の大きさ*/
		margin: 0 auto; /*全体の中心寄せ*/
		overflow: hidden;
	}

	.guide_txt{
		text-align: left;/*左寄せ*/
	}

	section article {
    width: 100%;/*横幅*/
	}

	article h1{
	margin: 42px 0 70px 0;/*外側余白*/
	width: 100%;/*横幅*/
	}


	img{
		width: auto;/*イメージの横幅*/
    	max-width: 100%;/*横幅*/
	}

	h1 img{
		height: auto;/*既存height指定を打ち消す（上書き）*/
	}

	.confectionery_link h2 img{
		height: auto;/*縦ぞろえをautoに*/
	}

	/*リンクとリンクの上下余白*/
	.confectionery_link p{
		margin: 15px 0;/*上下外側余白*/
	}

	#page footer p {
		text-align: center;/*中央寄せ*/
	}

	/***flexbox***/

	.flex-container{
  		display: flex;/*flexboxに*/
 		-webkit-box-orient: vertical;/*上から下への順番に配置ベンダープレフィクス*/
		-webkit-box-direction: normal;/*上から下への順番に配置ベンダープレフィクス*/
 		-ms-flex-direction: column;/*上から下への順番に配置ベンダープレフィクス*/
        flex-direction: column;/*上から下への順番に配置ベンダープレフィクス*/
  		padding: 0; /*内側余白を０に*/
	}


	.flex-container_menu{
  		display: flex;/*flexboxに*/
 		-webkit-box-orient: vertical;/*上から下への順番に配置ベンダープレフィクス*/
		-webkit-box-direction: normal;/*上から下への順番に配置ベンダープレフィクス*/
 		-ms-flex-direction: column;/*上から下への順番に配置ベンダープレフィクス*/
        flex-direction: column;/*上から下への順番に配置ベンダープレフィクス*/
  		padding: 0; /*内側余白を０に*/
	}

	/*flexboxにする*/
	.flex-container2{
   		flex-wrap: wrap;/*左から右へ、上から下へ、の順番に配置*/
		display: flex;/*flexboxに*/
		display: -webkit-box;/*flexboxのベンダープレフィックス*/
		display: -ms-flexbox;/*flexboxのベンダープレフィックス*/
		-ms-flex-wrap: wrap;/*左から右へ、上から下へ、の順番に配置ベンダープレフィクス*/
		width: 100%;/*横幅を100％に*/
	}

	/****グローバルメニュー****/

	.flex-container_menu li{
		width: 100%; /*横幅*/
		line-height: 40px; /*縦ぞろえ*/
    	font-size: 2.3em; /*文字大きさ*/
    	height: 40px;/*縦幅*/
	}

	.dropmenu{
		height: 240px;/*縦幅*/
	}

	.dropmenu ul li{
		font-size: 1.4em;/*各部門の文字大きさ*/
		height: 90px;/*縦幅*/
		line-height: 80px; /*縦ぞろえ*/
	}

	.dropmenu ul li:nth-child(2){
		height: 90px;/*縦幅*/
		line-height: 40px; /*縦ぞろえ*/
	}

	/*****************
	トップページ
	******************/


	/*topページの販売会情報*/

	.RegularEevents tbody{
   	 	width: 100%;/*横幅*/
	}

	/**topページのnewsのボックスの幅**/

	/*更新履歴ボックス*/
	.kousin {
		/*overflow: auto;*/
		width: 100%;/*横幅*/
	}


	/*topページのflexbox*/

	.flex-container_top{
		display: flex;/*flexbnoxに*/
		flex-direction: column;/*上から下へ垂直方向に配置*/
		display: -webkit-box;/*未対応ブラウザ対策*/
  		display: -ms-flexbox;/*未対応ブラウザ対策*/
  		-webkit-box-orient: vertical;/*未対応ブラウザ対策*/
  		-webkit-box-direction: normal;/*未対応ブラウザ対策*/
     	-ms-flex-direction: column;/*未対応ブラウザ対策*/
	}

	section .flex-container_top{
		width: 100%;/*横幅*/
	}

	/*文字の中央寄せ*/

	.flex-container_top .kousin li time{
		margin: 0 10px;/*上下0左右外側余白10px*/
	}

	.flex-container_top .kousin li span{
		margin: 0 10px;/*上下0左右外側余白10px*/
	}

	/*部門紹介の文字を中央寄せに*/
	div article .center{
		text-align: center;
	}


	/*flexbox指定(左から右へ、上から下へ焼き菓子のお店部分で指定)その他スペース指定**/
	.flex-container2 .space{
		margin: 0 auto;/*左右中央寄せ*/
	}


	/*バナーの横幅*/
	.top_link article{
		width: 100%; /*横幅*/
	}


	/*****************************
	トップページ、焼き菓子のお店ページ商品紹介
	*****************************/



	/**topページ各news、events**/

	/*news、eventsの各幅*/

	.flex-container_top .top_news{
		width: 100%; /*横幅*/
		padding: 0 0 20px 0;/*内側余白*/
	}

	/*それぞれの左揃え（バラバラだったので）*/

	.flex-container_top ul li{
		text-align: left; /*文字を左寄せに*/
		width: 100%;/*横幅*/
	}

	/*表の大枠*/

	.RegularEevents{
		width: 100%;/*表の横幅*/
	}

	/*販売会情報文字の左右に空きを*/

	.RegularEevents tbody tr time{
		padding: 0 12px;/*内側左右余白*/
	}

	.top_news .RegularEevents tbody tr .top_Eevents_link{
		padding: 4px 12px;/*内側左右余白*/
	}

	.top_news ul li .top_news_link{
		padding: 0 12px;/*内側左右余白*/
	}

	/*商品紹介テキスト左寄せ*/

	.top_gift p{
    	text-align: left;/*文字を左寄せに*/
    }

    /*ボタンの文字を中央に*/
    #btn a{
    position: absolute;/*基準の位置から動かす*/
    top: 0;
    text-align: center;/*文字を中央寄せに*/
    width: 100%;
    height: 100%;
	}

	/******aboutページ*******/

	/*divの余白*/

	.flex-container div{
		width: 100%; /*横幅*/
		height: 170px; /*縦幅*/
		padding: 0 10px; /*内側上下余白*/
		background-color: transparent; /*背景色を東名に*/
	}

	/*２番目の長い文章のdiv幅*/

	.about_txt2 div{
		height: 360px; /*縦幅*/
	}

	/*文字と画像の幅*/

	#about article{
 		width: 100%;/*横幅*/
	}

	/*pタグ文字の左揃え、間隔、上余白*/
	.flex-container div p{
		line-height: 30px; /*縦の間隔*/
	}

	/*イメージを幅いっぱいに*/
	#about img{
		width: auto;
    	height: auto;
    	max-width: 100%;
    	max-height: 100%;
	}

	/*取引先リンク上部にスペースを*/
	.about_link{
		margin-top: 90px;
	}

	/*電話番号の数字の左右に空きを*/
	.flex-container address{
		margin: 0 12px;/*外側余白左右12px*/
	}

	/*取引先リンクの左右に空きを*/
	.about_link ul li{
		margin: 0 12px;/*外側余白左右12px*/
	}


	/***各部門の紹介***/

	/**文字の左揃え**/
	.Bumon p{
		text-align: left;/*テキストを左揃えに*/
	}

	.flex-container .work p{
		text-align: left;/*テキストを左揃えに*/
	}

	/*文字と画像の幅*/
	#departmenta article{
 		width: 100%; /*横幅*/
	}


	/**tableについて**/

	/*table幅と中心寄せ*/
	.table{
		width: 100%; /*横幅*/
		margin: 0 auto; /*横幅の中心に*/
	}

	/*table装飾をレスポンシブに*/
	table{
		border-collapse: collapse; /*線を一重線に*/
		width: 100%; /*横幅*/
		border: solid 1px #6BB778; /*表全体を線で囲う*/
	}

	thead{
		display: block;/*ブロックレベル要素に*/
    	float: left;/*縦幅*/
    	width: 30%;/*横幅*/
	}

	tbody{
		display: block;/*ブロックレベル要素に*/
    	float: left;/*floatで左に*/
   	 	width: 70%;/*横幅*/
	}

	/***********
	製菓部門
	************/


	/**製菓部門テーブル**/
	.tbl_plans thead tr{
		width: 100%;/*横幅*/
	}

	.tbl_plans tr{
		display: block;/*ブロックレベル要素に*/
    	float: left;/*floatで左に*/
		width: 100%;/*横幅*/
	}

	.tbl_plans tr th,.tbl_plans tr td{
		display: block;/*ブロックレベル要素に*/
    	height: 40px;/*縦幅*/
    	line-height: 40px;/*文字の縦幅中央ぞろえ*/
	}

	/*2番目の幅を広く*/
	.tbl_plans tr th:nth-child(2),.tbl_plans tr td:nth-child(2){
		display: block;/*ブロックレベル要素に*/
    	height: 220px;/*縦幅*/
	}


	/*4番目の幅を広く*/
	.tbl_plans tr th:nth-child(4),.tbl_plans tr td:nth-child(4){
		display: block;/*ブロックレベル要素に*/
    	height: 200px;/*縦幅*/
	}


	/**軽作業部門テーブル**/
	.tbl_plans_lightwork tr{
		display: block;/*ブロックレベル要素に*/
    	float: left;/*floatで左に*/
	}

	.tbl_plans_lightwork tr th,.tbl_plans_lightwork  tr td{
		display: block;/*ブロックレベル要素に*/
    	height: 40px;/*縦幅*/
    	line-height: 40px;/*文字の縦幅中央ぞろえ*/
	}

	.tbl_plans_lightwork tr{
		width: 100%;/*横幅*/
	}

	/*2番目の幅を広く*/

	.tbl_plans_lightwork tr th:nth-child(2),.tbl_plans_lightwork tr td:nth-child(2){
		display: block;/*ブロックレベル要素に*/
    	height: 90px;/*縦幅*/
    	line-height: 90px;/*文字の縦幅中央ぞろえ*/
    	width: auto;/*横幅を自動に揃える*/
	}

	/*4番目の幅を広く*/

	.tbl_plans_lightwork tr th:nth-child(4),.tbl_plans_lightwork tr td:nth-child(4){
		display: block;/*ブロックレベル要素に*/
    	height: 90px;/*縦幅*/
    	line-height: 90px;/*文字の縦幅中央ぞろえ*/
    	width: auto;/*横幅を自動に揃える*/
	}

	/*5番目の幅を少し広く*/

	.tbl_plans_lightwork tr th:nth-child(5),.tbl_plans_lightwork tr td:nth-child(5){
		display: block;/*ブロックレベル要素に*/
    	height: 60px;/*縦幅*/
    	line-height: 60px;/*文字の縦幅中央ぞろえ*/
    	width: auto;/*横幅を自動に揃える*/
	}

	/*6番目の幅を広く*/

	.tbl_plans_lightwork tr th:nth-child(6),.tbl_plans_lightwork tr td:nth-child(6){
		display: block;/*ブロックレベル要素に*/
    	height: 90px;/*縦幅*/
    	line-height: 90px;/*文字の縦幅中央ぞろえ*/
    	width: auto;/*横幅を自動に揃える*/
	}

	/*8番目の幅を広く*/

	.tbl_plans_lightwork tr th:nth-child(8),.tbl_plans_lightwork tr td:nth-child(8){
		display: block;/*ブロックレベル要素に*/
    	height: 90px;/*縦幅*/
    	line-height: 90px;/*文字の縦幅中央ぞろえ*/
    	width: auto;/*横幅を自動に揃える*/
	}



	/***********生活介護事業ページ***********/

	/*divの余白*/

	#Lifecare .flex-container div{
		width: 100%; /*横幅*/
		height: 350px; /*縦幅*/
		padding: 0 10px; /*内側上下余白*/
		background-color: transparent; /*背景色を東名に*/
	}

	/*２番目の長い文章のdiv幅*/

	.Lifecare_txt2 div{
		height: 360px; /*縦幅*/
	}

	/*文字と画像の幅*/

	#Lifecare article{
 		width: 100%;/*横幅*/
	}

	/*pタグ文字の左揃え、間隔、上余白*/
	#Lifecare .flex-container div p{
		line-height: 30px; /*縦の間隔*/
	}

	/*イメージを幅いっぱいに*/
	#Lifecare img{
		width: auto;
    	height: auto;
    	max-width: 100%;
    	max-height: 100%;
	}


	/***焼き菓子のお店ページ***/

	/**商品紹介**/

	/*flexboxにする*/
	.flex-container2{
		width: 100%;/*横幅を100％に*/
		display: flex;/*flexboxに*/
		flex-direction: column;/*上から下へ垂直方向に配置*/
		display: -webkit-box;/*flexboxのベンダープレフィックス*/
		display: -ms-flexbox;/*flexboxのベンダープレフィックス*/
  		-webkit-box-orient: vertical;/*未対応ブラウザ対策*/
  		-webkit-box-direction: normal;/*未対応ブラウザ対策*/
     	-ms-flex-direction: column;/*未対応ブラウザ対策*/
	}

	/*とりおきについて*/

	.guide_txt3{
		width: 95%;/*横幅を95％に*/
		border: 1px dotted #6BB778;/*太さ指定 点線 色指定*/
	}

	/*文字の左揃え*/

	.guide_txt2{
		text-align: left;/*文章を左寄せに*/
	}

	/*焼き菓子のお店販売品の中央寄せ*/
	#shop_about img {
		margin: 0 auto;
	}


	/*相対位置指定（商品紹介画像）*/
	.ProductVisual{
		/* position: relative;相対位置 */
		width: 100%;/*横幅*/
		height: 630px;/*縦幅*/
		background-color: white;
	}


	div .ProductVisualText{
		width: 100%;/*画像の横幅をいっぱいに*/
	}

	/*スマートフォン表示でかたくりクッキーに下線をつけ間をあける*/

	#smartphone{
		padding-bottom: 40px;
		border-bottom: solid 1px #6BB778; /*区切り線 実線 細さ指定 色指定*/
	}

	/*スマートフォン表示のsectionの下線を消す*/
	.sm_kasen_non{
		border: none;
	}


	/**県央福祉会ショップへのリンク部分**/
	.shop_kenou_link{
		width: 100%;
		margin-bottom: 50px;
	}


	/*かたくりのフェアトレードクッキーｈ1幅*/

	.flex-container2 div img{
		width: auto;
    	height: auto;
    	max-width: 50%;
    	max-height: 50%;
	}

	/*焼き菓子のお店ページマップ*/
	aside iframe{
		width: 100%;/*横幅*/
	}


	/****map関係****/

	/*flexbox*/

	.map{
 		display: flex;/*左から右へ水平方向に並べる*/
		display: -webkit-box;/*古いブラウザへの対応*/
  		display: -ms-flexbox;/*古いブラウザへの対応*/
  		-webkit-box-orient: vertical;/*未対応ブラウザ対策*/
  		-webkit-box-direction: normal;/*未対応ブラウザ対策*/
     	-ms-flex-direction: column;/*未対応ブラウザ対策*/
        flex-direction: column;/*上から下へ垂直方向に配置*/
	}

	/*マップ左側の案内文*/

	.map-left{
		width: 100%;/*幅*/
    	margin-left: 0px;/*外側左余白リセット*/
    	padding-left: 12px;/*内側左余白*/
    	padding-right: 12px;/*内側右余白*/
    	margin-top: 0px;/*外側上余白リセット*/
	}

	/*マップ右側*/

	.map-right{
	width: 100%;/*マップ右側の横幅*/
	margin-top: 20px;/*外側上余白*/
	}

	.map-right img{
		width: 100%;/*画像の横幅を画面いっぱいに*/
		height: auto;/*画像の縦幅を横幅に合わせる*/
	}

	/*************
	アクセスページ
	*************/

	/*地図の横幅を画面いっぱいに*/
	.access_center,.access_center iframe {
		width: 100%;
	}

}

	/*************
	農協ページ
	*************/

	.noukyo_txt{
		width: 100%;
		line-height: 36px;
}