/*____________________________________________
RESET CSS by Eric Meyer
____________________________________________*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
	padding:0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
a {
    text-decoration:none;
}
 
a:hover,a.selected{
    text-decoration:none;
}

/* END RESET */
body {
	margin: 0;
	height: 100%;
	line-height: 1.9em;
	font-size: 1.09em;
	color: #555;
	font-weight: 400;
	 font-family: "Zen Maru Gothic", sans-serif;
}
.text_hidden { display:block; overflow: hidden; text-indent:-9999px; } /* 画像置き換えの一括指定 */
.image_hidden { display:none!important; } /* ギャラリーの画像隠し */
hr { height: 1px; background:#ccc; border:0; margin: 1em 0;} /* 水平線の指定 */
.mar_0 { margin: 0!important; } /* マージンの指定の無効化 */
.small { font-size: 0.8em;}
div.breadcrumbs { font-size: 0.6em; border-bottom: none; padding: 0.6em 0.3em 0.6em 2em; background:#efefef; line-height:1.3rem;}
header#common {
	position: relative;
	margin:0;
	padding: 0;
	width: 100%;
	height:calc(100svh - 9svh);
	z-index:3;
}

header#common.page.csa { height:380px!important; background-position:50% 0; }
/* LOGO AREA */
header#common h1 {
	position: relative;
	margin:0 auto 0;
	top: 40px;
	left:0;
	width: 120px;
	height: 90px;
	z-index:5;
}

header#common.page.csa h1 { left:10px;}

header#common h1 a {
	display: block;
	width: 120px;
	height: 90px;
}
header#common.page h1 {
	margin:0 auto 0;
	top: 30px;
	width: 90px;
	height:60px;
}
header#common.page h1 a {
	display: block;
	width: 90px;
	height:60px;
}
header#common.page h1#siteName img {  width: 90px; height:60px;　}

a {
	-webkit-transition: 0.15s ease-in-out;
	   -moz-transition: 0.15s ease-in-out;
	     -o-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/*========= ナビゲーションのためのCSS ===============*/
.mainblur{
	filter: blur(8px);
}
header#common nav#gNav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -999;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	right:0;
    /*動き*/
		width:100%;
	height: 0vh
	border-radius:0;
	background:rgba(72,56,35,0.9);/*背景を少し透過させる*/
}

header#common.page nav#gNav {position: fixed; top:0; margin:auto; right:0;　}
header#common.page.csa nav#gNav {position: fixed; top:0; margin:auto; right:0; background:rgba(72,56,35,0.9);}

/*アクティブクラスがついたら透過なしにして最前面へ*/
header#common nav#gNav.panelactive{
	opacity: 1;
	z-index:999;
		width:100%;
    height: 100vh;/*ナビの高さ*/
	border-radius:0;
}

/*ナビゲーション*/
header#common nav#gNav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:30%;
    left:53%;
    transform: translate(-50%,-50%);
}

header#common nav#gNav.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

header#common nav#gNav ul li{
	display:list-item;
	list-style: none;
    text-align: center; 
}

header#common nav#gNav ul li a{
	color: #fff;
	text-decoration: none;
	padding:35px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size:1.35rem;
	font-weight: 800;
}
header#common nav#gNav ul li a:visited { color:#fff; }
header#common nav#gNav ul li a:hover { opacity:0.8: }

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 40px;
    height:40px;
	background:#fff;
	border-radius: 15px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 10px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 50%;
  }

.openbtn span:nth-of-type(1) {
	top:11px;	
}

.openbtn span:nth-of-type(2) {
	top:19px;
}

.openbtn span:nth-of-type(3) {
	top:27px;
}

.openbtn.active span:nth-of-type(1) {
    top: 12px;
    left: 8px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 24px;
    left: 8px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
}


div.bdr { border:none; }
/*__________________________________________________________________
CONTAINER
__________________________________________________________________*/
article.page {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width:100%;
	min-width:auto;
}
div#container {
	float: none;
	padding: 0 2em;
	max-width:none;
}

section#Contents {
	float: left;
	width: auto;
	margin: 3% 1.5rem 0;
	min-width:auto;
}
section#Contents.message,section#Contents.company,section#Contents.questions,section#Contents.shoplist,section#Contents.about_yugimurafarm,section#Contents.access,section#Contents.news,section#Contents.blog,section#Contents.event,section#Contents.marche,section#Contents.media,section#Contents.agriculture { width:auto!important; }

div.center { max-width:auto; margin: 5% 1em 0; }

/* SECTION */
section header h1 { font-weight: 500; font-size:  1em;}
section#EventInfo,section#OnlineShop,section#Visit,section#bnr {
	position: relative;
	width: 100%;
	margin: 8% auto 0;
	padding:0;
}

section#bnr { display:block!important; margin: 8% 0 5%;}
section#bnr p { width:85%; margin: 0 auto;}
img.bnr_off { display:none;}

section#bnr_set { display:none; }
section#bnr.top { display:block; }

/* お知らせ News */

section#news_list.top div.news_inner {
	width:90vw; font-size:0.95em;
	ul li { padding: 1em 0; line-height:1.4em; }
	ul li time { display:block; border-right:0px; color:#888;font-size:0.8em; }
	
}


section#news { position:relative; display: block; padding: 0.5rem; border-bottom: 1px solid #ccc; z-index:1; background:#fff; height: 8svh;}
section#news hgroup {  position:absolute; top: -44px; left: 0; z-index:10;} 
section#news div.bx-wrapper { display:block; margin: 0;}
section#news ul li span.meta-day { display:block; padding-right:1rem; font-size:0.75rem; line-height:1.2;}
section#news ul li { width:auto!important; line-height:1.3;}

section.page.news ul.news { display:flex; width:100%;flex-wrap: wrap;justify-content: space-between; margin: 3rem 0 0;}
section.page.news ul.news li { margin: 0 0 1rem; padding: 0 0 2rem; width: 100%;}
section.page.news ul.news li p.thumb { margin: 0 0 0.5em; width:100%; height:200px; overflow:hidden;object-fit:cover; border-radius:15px; background:#efefef;}


section#EventInfo hgroup {
	width: 300px;
	margin: 0 auto 2em;
	text-align: center;
}
section#EventInfo hgroup h1,section#EventInfo hgroup h2 {
	display: inline-block;
	padding: 10px 0;
	margin: 0;
	width: 300px;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	vertical-align: baseline;
	border: 3px solid #483823;
	color: #483823;
}
section#EventInfo hgroup h2,section#Info hgroup h2,section#Blog hgroup h2 {
	width: 100%;
	font-size: 0.8em;
	font-weight: 300;
	margin-top: 1%;
	padding: 0;
	border:none;
	text-align: center;
}

div.EveList_box h3 { display: block; font-size: 1.1em; font-weight: 500;margin: 0 1em 0 0.8em; }

div.EveList_box {
	position: relative;
	float: left;
	width: auto;
	height: auto;
	min-height: 430px;
	margin: 0 2em 3em;
	padding: 0;
	background: #ecebe9;
}

div.EveList_box p { margin: 0 0 2em; font-size:0.95em; }
div.EveList_box p.thumb img { width: 100%; height: auto!important; }
div.EveList_box p.thumb { width: 100%!important; background: #999; }
section#EventInfo p.Link_more a,section#OnlineShop p.Link_more a,section#Visit p.Link_more a {
	position: relative;
	clear: both;
	display:block;
	top: 0;
	right:0;
	padding: 1em 0;
	line-height: 1.3em;
	border-top:1px solid #483823;
	border-bottom:1px solid #483823;
	width:100%; 
	text-align: center;
}

div.EveList_box p.discription,div.EveList_box p.cat_apply {
	margin: 10px 20px;
	text-align: justify;
	font-weight: 300;
}
div.EveList_box p.discription { margin-bottom:5em; }

div.EveList_box p.meta-apply { position:absolute; top: 165px; right: -1.5em; margin:0 1.5em 0; padding: 0 1em; height: 2.5em; font-weight: 500; text-decoration: none; background: #ecebe9;  }


div.EveList_box p.cat_apply {
	position: absolute;
	width: auto;
	top: 0;
	left: auto;
	right: 0;
	margin: 0 0;
	padding: 0 1em 0;
	height: 2.5em;
	font-size: 0.8em;
	font-weight: 500;
	border-bottom: none;
	text-align: center;
	background: #fff;
	opacity: 0.9;
	filter: alpha(opacity=90);
}

div.EveList_box p.show_info {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.8em 0;
	font-size: 0.9em;
	font-weight: 400;
	width: 100%;
	text-align: center;
	background:#483823;
	color: #fff;
}

section#Instagram div#sb_instagram { width:90%!important;}
section#Instagram { border-bottom:1px solid #ccc; padding: 0 0 2em;}

section.page { padding: 0 0 4%; }
section.page p { text-align: justify; margin:1rem 0;  }
section.page div.Introduction p { text-align: center; margin:2rem auto; font-size:0.9em;  }
section.page ul { margin: 1em 1em 2em; }
section.page hr { margin: 3em 0 2em; background: #493924; height: 1px;border:none; }
section.page h1 {
	display:inline-block;
	margin: 3em 0 1em 0;
	padding: 0.4% 2%;
	font-weight: 500;
	font-size:  1em;
	text-align: left;
	vertical-align: baseline;
	border: 3px solid #483823;
	color: #483823;
}

section#OnlineShop h1,section#Visit h1 { text-align:center; margin:0 1em; padding:0; font-size:1.1em; font-weight: 500;}


section.page h2,section.page h3 { font-weight: 800; font-size: 1.3em; color: #483823; margin: 1.5rem 0;}
section.page h3 { font-size:  1.1em; }

article.page.csa { margin: -165px auto 0; }
article.page.csa h2.title { font-size: 1.5em; margin-bottom: 2.5em; line-height:1.4em;}

section.page table { margin: 2em 0 1em; width: auto; font-size: 0.9em; }
section.page table.outline th { width: 40%; }
section.page table td { padding: 1.5% 0; line-height: 1.7em; }
section.page table th { text-align: left; width: 25%; }

section.page div.wp-block-columns { gap: 0 0;}

section div.bnrarea { display: block; margin: 2em 0; }
section div.bnrarea a { float: left; display: inline-block; width: 86%; height: auto; margin:0 7% 1em; padding:0; line-height:1em; }
section div.bnrarea img { margin: 0; width: 100%; height: auto;}

div.EveList_box p span { margin: 0 1em 0 0; font-weight :300; }
section#Info,section#Blog { float: none; width:auto; }
section#Info { margin: 0 1em 2em; }
section#Blog { margin: 0 1em 0; }

div.center { max-width: 100%; margin: 0; }

section#Info hgroup h1,section#Blog hgroup h1 {
	margin: 1em auto 0;
	padding: 10px 15px;
	width: 245px;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	border: 3px solid #483823;
	color: #483823;
}
section#Info hgroup h2,section#Blog hgroup h2 {
	margin: 1% auto 5%;
	width: 245px;
	text-align: center;
}
section#Info p,section#Blog p {
	margin: 0 auto 1em;
	padding: 0 auto 1em;
	border-bottom: 1px solid #483823;
	font-weight: 300;
}
	

section#Info p span,section#Blog p span {
	display:block;
	width:7.5em;
	clear: both;
	font-size:0.8em;
	margin: 0 0 0.3em;
	color:#888;
	border-bottom: 1px dotted #888;
	
}

section#Info p.Link_more,section#Blog p.Link_more {
	text-align: right;
	border:none;
	font-size:0.9em;
}

/* 読み物 */

div.page {
	section#Contents div.New_article ul { margin: 1em 0;}
	section#Contents div.New_article ul li { width:100%; margin: 0 0 1em;}
	section#Contents div.New_article ul li:first-child { margin: 0 0 1em; }
	section#Contents div.New_article ul li figure {height:240px; margin-bottom:0.5em;}
	section#Contents div.New_article ul li p {
		margin: 0 0 2em;
		line-height:1.3em;
	}
	section#Contents div.New_article ul li time {
		display:inline;
		font-size:0.8em;
}

section#Contents div.New_article ul li div.meta div.tag { position:absolute; top:0; right:0; font-size:0.6em; }

}



/* BLOG */
div.post hr { margin: 1em; background: #493924; border: none;}

/* 野菜図鑑 */
section#Contents.dictionary {　max-width: auto; width:auto; margin: 0 1.5rem 0; min-width:auto;}
section#Contents div.child-page-box { position: relative; float: left; margin:0 0.5em 0.7em; width: 45%;}
section#Contents div.child-page-box-title a {
	position: absolute; 
	display: block;
	bottom: 7px;
	right: 0;
	padding: 0.2em;
	width: 9em;
	font-weight: 500;
	text-align: center;
	background: #483823;
	color: #fff;
	z-index:2;
}
section#Contents div.child-page-box img { position: relative; width:100%; height:auto; z-index:1;}



/* MESSAGE */
section.page div#msg { height: auto; }
section.page div#msg h2 { margin-top: 1em; }

/* MEMBER */
section.page p.face {
	display: block;
	float:none;
	width: 100%;
	margin: 0 0 1em;
	text-align: center;

}
section.page p.face img {
	width: 50%!important;
	margin: 0 auto 1em;
}
section.page dl {
	float:left;
	margin:0 1em;
	max-width: 100%;
}
section.page div.profile { margin: 3em 0; }
section.page dl dt {
	display:block;
	font-size: 1.2em;
	font-weight: 500;
	margin-bottom: 1em;
	text-align:center;
}

section.page dl dd { margin:0 0 1em; text-align:center; }
section.page div.profile p { float:left; }

/* SIDE BAR*/

section#sidebar {
	float: left;
	width:100%;
	font-size:0.95em;
	font-weight: 400;
}
section#sidebar h3 {
	display:block;
}
section#sidebar p {
	margin: 4em 0 0;
	padding: 0.3em 1em;
	background: #483823;
	color: #fff;
}

section#sidebar ul {
	margin:1em;
}

section#sidebar ul li {
	float: left;
	width: 46%;
	margin: 0.4em;
	padding: 0.2em 0;
	font-size: 0.95em;
	border: 1px solid #483823;
	text-align:center;
}
section#sidebar ul li a {
	display:inline-block;
	float: left;
	width: 100%;
}

/*INSTAGRAM*/

section#Contents div.entry-content ul.instagram li {
    width: 45%;
	height:190px;
	overflow:hidden; 

  }

section#Contents div.entry-content ul.instagram li img {
    width: 100%;
  }

/*直売所バナー トップ*/
section#Bnrarea { display:block; }
section#Bnrarea p { width:80%; margin: 0 auto; }
section#Bnrarea a img { width:100%; }


/*__________________________________________________________________
GALLARY
___________________________________________________________________*/

.gallery-columns-1 .gallery-item {
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item {
    width: 49%;
    margin-right: 1%;
}
.gallery-columns-3 .gallery-item {
    width: 26%;
    margin-right: 2%;
}
.gallery-columns-4 .gallery-item {
    width: 24%;
    margin-right: 1%;
}

/*__________________________________________________________________
FOOTER
__________________________________________________________________*/
footer nav#footNav a { color: #483823;}

footer {
	position:relative;
	top: 0;
	width:100%;
	height:auto;
	margin: 1em 0 0;
	background: url(images/common/footer_bg.jpg) no-repeat;
	background-size: cover;
	color: #fff;
	font-size: 0.9em;

	div#logo h1 img { width:70px; }
	p#address { position: absolute; top: 45px; left:85px;}
	div#logo nav { padding:0 0; }
}
footer div.center { display: block; padding: 30px 0 0; }
div#function { float:none; width: 100%; margin: 0 auto; text-align:center; }
div#function nav { margin:0; padding: 0; width: 100%; height:3em; }
div#function nav ul { padding:0; margin:0;}
div#function nav ul li { float: left; width: 50%; padding:0; height: auto; line-height: 3em;}
div#function nav ul li a { display:inline-block; width: 100%; padding:0; line-height: 3em;}
div#function nav ul li a:hover { background: #ccc; color: #fff;}
div#function footer h1 { display: inline; width: 120px;}
footer nav#footNav { margin:0; width: 100%; }
footer nav#footNav ul { margin: 0 0 2em; padding: 0;width:100%; }
footer nav#footNav ul li {
	padding: 0;
	float: none;
	width: 100%;
	height: auto;
	text-align: center;
}
footer nav#footNav ul li a { display:block; width: 100%; height: auto; line-height: 2em;  color:#fff; font-size:0.9em; }
footer nav#footNav ul li.sns_m { float: none; display:none; }

footer div.social {
	position:relative; top:auto; right: auto; width: 100%; text-align:center;
	font-size:0.9em;
	p {width:auto;}
	a {width:auto;}
	ul li { padding: 0.3em 1em; }
	ul.icon { width:55px;}
	ul.icon li { padding:0; }
}



/* SECTION - PROFILE */
section#profile,section#thumbnail,section#contact {
	position: relative;
	width:80%;
	margin: 0 auto 5em;
	font-weight: 300;
	text-align:justify;
}
section#thumbnail { margin: 160px auto 0;}
section#contact { margin: 140px auto 0;}
section#thumbnail ul,section#design ul  { width: 100%; margin: 5em auto 0 -2em;}
section#thumbnail ul li { display: inline-block;  width: 30%; min-width:200px;  padding : 0; margin: 0 auto 2em; text-align:center; vertical-align:middle;}
section#thumbnail.photo ul li { display: inline-block;  width: 30%; min-width:200px;  padding : 0; margin: 0 0 5em 0; text-align:center; vertical-align:middle;}
section#thumbnail img.thumb { width: 200px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); } /* 画像の影指定 */
section#thumbnail img.thumb_a4-maki { width: 95px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); } /* 画像の影指定 */
section#thumbnail img.thumb_b5 { width: 180px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); } /* 画像の影指定 */
section#thumbnail img.thumb_a5 { width: 100px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); } /* 画像の影指定 */
section#profile h2 { margin: 1.5em 0 1em; font-weight: 500; font-size:1.1em; }
section#profile p { padding: 0.5em 0; }
section#contact * {text-align: center; }
ul.sns_btn {
	position: absolute;
	top: 110px;
	right:0;
}
ul.sns_btn li {
	float: left;
	margin: 0 10px 0 0;
}


/*META SLIDER*/
div.metaslider-1152,div.metaslider-2860 {
	position: absolute;
	width: auto;
	height: 180px!important;
	min-height: 120px!important;
	max-height: 180px!important;
	overflow:hidden;
	top:0;
	margin: 0!important;
	padding: 0;
	z-index:1;
}

div.metaslider-11143 {
		position: absolute;
	width: 100%;
	height:100svh;
	overflow:hidden;
	top:0;
	margin: 0!important;
	padding: 0;
	z-index:1;
}

div.metaslider-2860 {
	height: 120px!important;
	min-height: 120px!important;
	max-height: 120px!important;
}

div.metaslider ul li { max-height: 180px!important; display:block; overflow:hidden!important; }
div#metaslider_1152 img { width: 100%!important; min-height:180px!important;}
div#metaslider_2860 img { width: 100%; min-height:180px!important;}
div#metaslider_11143 ul li { max-height: 100svh!important; }

div#metaslider_11143 img{height:100svh; width:auto; }
div.metaslider-1152 div.caption-wrap {
	bottom: 0.5rem;
	right: 1rem;
	top: 125px;
	color: #fff;
	font-size: 0.7rem;
}
div.metaslider-1152 div.caption-wrap span {
	font-size: 1.4rem;
	font-weight: 600;
}


div.metaslider-11143 div.caption-wrap {
	position:absolute;
	bottom: 10svh;
	left:auto;
	right: 0.5em;
	color: #fff;
	background:none;
	font-size: 0.8rem;
	width:auto;
	opacity:1.0;
	line-height:1.5em;
}
div.metaslider-11143 div.caption-wrap span {
	display:block;
	font-size: 1.4rem;
	font-weight: 600;
}



/* MAIL FORM */
.ninja-forms-form-wrap { margin: 0 1em 0;}
div.mw_wp_form table th { width:13em;}
div.mw_wp_form table td { padding:0.8em 0;}
textarea.mailform { width: 18em; height: 10em; }
input.mailform { width: 18em; }
input.yasai_form { width: 13em; }
section.page table { width:auto; }
section.page table.sales th { width: 11em!important;}
section.page table.sales td { width: 15.5em; padding-left: 0.5em;}
section.page table.list tr th{ width: 9em!important;}


/*イベント企画申込みフォーム*/

table.event_form th { width: 30%!important; }
.event_form,.event_form_btn,.event_form_short { width: 15em; line-height: 1.3em;}
.event_form_btn { border:none; width: auto;}
.event_form_short { width: 3em;}
table.event_form input { font-size:1em; }
textarea.event_form { width: 15em!important; font-size: 1.2em; height: 10em;}
table.event_form { border:0; width:auto; }

table.event_form td span.caption { color: #999; font-size: 0.9em;}