@charset "utf-8";
/* **************************************************

CSS Information
File Name : kyoyonomori.css
Style Info: 教養の森 固有のスタイル指定
Date: 2017-01-09
Update: 2023-07-13　食農のCSSを元に作成
	
************************************************** */
/* --------------------------------------------------
	共通ヘッダー
-------------------------------------------------- */	
#globalHeader {
  padding: 10px 0;
}

#globalHeader .subHeader {
    margin: 5px 0 8px;
}

#globalHeader #siteID {
	padding: 0;
}

#globalHeader #siteID img {
	width: 320px;
	height: auto;
}

#headerSearch,
#btnTargetNavi {
	display: none !important;
}

#globalHeader .headerNavi {
	width: 580px !important;
}

/*	Responsive Settings
-------------------------------------------------- */	
@media screen and (min-width:320px) and (max-width:640px) {

	#globalHeader {
		position: relative;
		padding: 10px 0 0;
	}
	
	#globalHeader .subHeader {
		margin-bottom: 10px;
	}

	#globalHeader #siteID {
		max-width: 300px;
		margin: 0 auto;
		padding: 0 0 15px;
	}	

	#globalHeader #headerSearch {
		width: 100%;
		margin-right: -80px;
	}
	
	#globalHeader #headerSearch form {
		width: auto;
		margin-right: 80px;
	}
	
	#globalHeader .headerNavi {
		width: 100% !important;
	}
	
}

	
/* --------------------------------------------------
	共通フッター
-------------------------------------------------- */	
#globalFooter .footerAddress dt img {
	width: 294px;
}


/* --------------------------------------------------
	サイドテキストバナー
-------------------------------------------------- */
.sideTextBanner li .block {
  font-size: 1.3rem !important;
  line-height: 1.3;
}

.sideTextBanner li .block .bannerTitle {
  padding-left: 8px;
}

.sideTextBanner li .block .bannerTitle span {
	padding-right: 0;
}


/* --------------------------------------------------
	スマートフォン用サイドメジャー ナビ
-------------------------------------------------- */
#sideMajorNavi {
	margin-top: 20px;
}


/* --------------------------------------------------
	汎用Class
-------------------------------------------------- */	
.pcOnly {
	display: block !important;
}

.spOnly {
	display: none !important;
}

/*	Responsive Settings
-------------------------------------------------- */	
@media screen and (min-width:320px) and (max-width:640px) {
	
	.pcOnly {
		display: none !important;
	}
	
	.spOnly {
		display: block !important;
	}
	
	.body .btn a {
		padding-right: 30px;
		padding-left: 30px;
	}
	
}


/* --------------------------------------------------
	.categoryListExt - カテゴリーリスト（全幅）
-------------------------------------------------- */
.categoryListExt li {
	width: 700px !important;
}

/* --------------------------------------------------
	トップページ
-------------------------------------------------- */
#intro {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 30px;
}
/*	メインビジュアル
-------------------------------------------------- */	
#mainVisual {
	text-align: center;
}

#mainVisual .inner {
	width: 1020px;
}

/*	お知らせ
-------------------------------------------------- */
.column2 .tabList .tabs span a {
	width: 250px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

dt.attrNotice::before {
    display: inline-block;
    content: "お知らせ";
    width: 150px;
    margin-right: 10px;
    padding: 3px 0;
    background-color: #96825a;
    color: #fff;
    text-align: center;
}

dt.attrEvent::before {
    display: inline-block;
    content: "イベント";
    width: 80px;
    margin-right: 10px;
    padding: 3px 0;
    background-color: #7d7d7d;
    color: #fff;
    text-align: center;
}

/*	Responsive Settings
-------------------------------------------------- */	
@media screen and (min-width:320px) and (max-width:640px) {
	
	.tabList .tabs span {
		width: 33.333% !important;
	}
	
	.tabList .tabs span a {
		width: 100% !important;
	}
	
	.tabList .tabs span:first-child a {
		width: 100% !important;		
	}
	
	.tabList .tabs span:nth-child(3) a {
		border-bottom: 1px solid #ddd !important;
	}	
	
}
