@charset "utf-8";


/* HEADER sticky　------------------------*/
header{
	position: sticky;
	display : flex;
  flex-wrap : wrap;
  justify-content:space-between;
	align-items: center;
  top: 0;
	z-index: 99;
	background:url(../images/bg_head-bottom.png) repeat-x bottom center;
	padding: 0 2rem 0.5rem 2rem;
}

header h1{
	margin: 0.5rem 0 0 0;

}
header h1 a{
	display: flex;
	margin: 0 0 0.5rem 0;
}

header p .credit-his{
	margin: 0 0 0 0;
}

@media screen and (max-width: 767px) {
	header{
		padding: 0 0 10px 0;
		display: block;
	}
	header h1{
		margin: 0 0 0 10px;
		width:76%;
		line-height: 1.6rem;
	}
	header h1 a{
	display:block;
	margin: 0 0 0 0;
	}
		header h1 a .tm_his{
			width:12%;
	}
	header h1 a .tm_ty{
		width:50%;
}
}

/* FOOTER sticky　------------------------*/

footer{
	padding: 0.5rem 0 0 0;
}
footer .container{
	margin-bottom: 1rem;
}
footer p{
	margin-bottom: 0.2rem;
}

footer .copyright{
	background: #463214;
	color:#fff;
	font-size: 70%;
	text-align: center;
	padding: 1rem 0 0.5rem 0;
}
footer .copyright p a{
	color:#fff;
	text-decoration: none;
}


/*----------------------------------*/
/* ナビ 共通 （SNS）-------------*/
/*----------------------------------*/

/* SNS LINK ＋ form　*/
.Nav ul.sns-link li a:before {
	content:none;
}
.Nav ul.sns-link{
	display: flex;
	flex-wrap : wrap;
	list-style: none;
	margin:0;
	padding:0;
}
.Nav ul.sns-link li{
	width:1.5rem;
	overflow: inherit;
}
.Nav ul.sns-link li i{
	color:#453115;
}

/* SNS　*/
@media screen and (max-width: 1070px) {
	.Nav ul.sns_icon{
		display:flex;
		list-style:none;
		margin: 0 auto 0 auto;
	}
	.Nav ul.sns_icon li{
		margin:5% 5% 0 0 !important;
	}
	.Nav ul.sns-link{
		display: none;
	}
	.Nav ul.sns-link.open{
		display: flex;
	}

	.Nav ul.sns-link li i{
		font-size:2.2rem;
		color:#453115;
	}
}

/* footer */
footer ul.sns-link{
	display: inline-flex;
	flex-wrap : wrap;
	list-style: none;
	margin:0 auto 0 auto;
	padding:0;
	width:auto;
}
footer ul.sns-link li{
	margin: 0 0.5rem auto;
}
footer ul.sns-link li i{
	color:#453115;
	font-size:2rem;
}

/*--------------------------------------------*/
/* 野菜画像LOOPスライダー ----------------*/
/*--------------------------------------------*/

/* LOOP　-------------------------*/
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
  /*border: solid 5px #ccc;  囲み線 - 変更可・削除可 */
  margin: 0 auto; /* Box外の余白 - 変更可 */
}

/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
  display: none;
}
.slider-check:checked ~ .loop-box > .loop {
  animation-play-state: paused;
}
.slider-label {
  display: block;
  cursor: pointer;
  color: #fff; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;
}
.slider-label::before {
  content: "\025a0  STOP"; /* 停止テキスト - 変更可 */
  }
.slider-check:checked ~ div > .slider-label::before {
  content: "\025b6  MOVE"; /* 再生テキスト - 変更可 */
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.loop-box, .loop-box ul {
  height: 240px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex;
  justify-content: space-between;
  list-style: none;
  max-width: 10000%;
  min-width: 100%;
  width: calc(200px * 1 * 7); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 90s linear infinite; /* アニメーション設定 - 変更可 */
}

.loop-box ul.loop2{
	margin-left: 3px;
}

.loop-box li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: calc((100% / 7) - 3px); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}
.loop-box ul.loop2 {
  animation-name: loop2;
}

@keyframes loop1 {
  0% {transform: translateX(0); }
  49.99999% {transform: translateX(-100%); }
  50% {transform: translateX(100%); }
}
@keyframes loop2 {
  0% {transform: translateX(100%); }
  100%{transform: translateX(-100%); }
}



/* 新ナビテスト --------------------------------*/

.Nav {
	display: flex;
}


@media screen and (max-width: 1070px) {
  .Nav {
  position: relative;
  border-top:none;
		top:0;
  }
}
.Nav .navbtn {
  display: none;
}

@media screen and (max-width: 1070px) {
	 .Nav .navbtn {
    display: block;
    position: absolute;
    top: -50px;
    right: 10px;
  }

  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color:#fff;
  }
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:10px;
    content:"";
    width: 24px;
    height: 3px;
    background-color: #666;
   transition: .2s;
  }
  .Nav .navbtn a.open::before {
    top:19px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:10px;
    left:10px;
    content:"";
    width: 24px;
    height: 3px;
    background-color: #666;
    transition: .2s;
  }
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  }

	 .Nav .navbtn a.open {
		list-style: none;
  }

  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:10px;
    content:"";
    width: 24px;
    height: 3px;
    background-color: #666;
  }
  .Nav .navbtn a.open span::after {
    display: none;
  }
}


.Nav ul.close {
  display: none;
  border-top: solid 1px #F5F4F0;
}
.Nav > ul {
  margin: 0 auto;
  max-width: 1070px;
	padding-left: 0;
}

.Nav > ul:last-child{
	max-width: auto;
}

.Nav > ul:last-child li{
	margin-right: 0.5rem;
}

.Nav > ul > li {
  position: relative;
  display: inline-block;
	margin-right: 1.2rem;
}
.Nav > ul > li a:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	margin-right: 0.2em;
	color: #4aac35;
	font-size: 90%;
}
.Nav > ul > li a:hover {
	color: #4aac35;
	text-decoration: none;
	transition: .3s ease-in-out;
}

.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  color: #333;
  background-color:none;
  z-index: 2;
	padding-bottom: 0.3rem;
}
.Nav > ul > li.parent > a {
  padding-right:25px;
}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 60%;
    right: 8px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #4aac35;
    border-right: solid 2px #4aac35;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.Nav > ul > li.parent > .submenu {
	list-style: none;
	margin-left:0;
	padding-left:0;
	padding-bottom: 0.5rem;
	width:120%;
  }

.Nav > ul > li.parent > .submenu.open:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	text-align: center;
	display: block;
	color: #fcea52;
	font-size: 150%;
}
.Nav > ul > li.parent > .submenu li{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.Nav > ul > li a.close {
    display: block;
    position: relative;
    text-decoration: none;
    color: #333;
    background-color:inherit;
    z-index: 2;
}

  .Nav > ul > li.parent.open > a{
    color: #FFF;
  }
  .Nav > ul > li.parent.open > a::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* child -- hover */
.Nav > ul > li.parent .open li:hover{
	background: #fcea52;
	color: #4aac35;
}

.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.Nav > ul > li a:hover::after {
 -webkit-transform: scale(1);
  transform: scale(1);
	border-bottom: 3px solid #fcea52;
}

/* 2階層め */
.Nav > ul > li > ul {
  display: none;
  position: absolute;
  left: 0;
  width: auto;
 background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

.Nav > ul > li > ul li {
  white-space: nowrap;
}

.Nav > ul > li > ul li a {
  position: relative;
	padding: 3% 0 3% 5%;
}

@media screen and (max-width: 1070px) {
	.Nav {
		display: block;
		background-image: url("../images/logo_square.png") ,url("../images/bg_beige-head.png");
		background-position: bottom right,top center;
		background-size: 40%,cover;
		background-repeat: no-repeat,repeat;
		height: 100%;
		width:100%;
	}

  .Nav > ul {
    display: none;
/* position: absolute;
    top: 0;
    left: 0;
    right: 0;*/
		position: inherit;
		margin: 0.5rem auto 1rem auto;
		padding: 1rem 1rem 1rem 1rem;
		height: 100%;
		z-index: 9;
  }

  .Nav > ul > li {
    display: block;
		padding: 0.5rem 1rem;
		background: none;
  }
	.Nav > ul > li a,
	.Nav > ul > li a.close{
		border-bottom: 0px solid #fff;
	}

	.Nav > ul > li.parent.open > a::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

	 .Nav > ul > li.parent.open {
    border-bottom: none;
  }

  .Nav > ul > li.parent.open > a {
    color: #FFF;
  }

	.Nav > ul > li.parent > .submenu.open:before{
	content:none;
}

	.Nav > ul > li.parent > .submenu{
		width:90%;
	}

  .Nav > ul > li > ul {
		background: none;
    position: static;
  }
/* .Nav > ul > li > ul li a {
	border-bottom: solid 1px #dddddd;
	background-color: #EEE;
}
.Nav > ul > li > ul li a:hover {
	background-color: #FFF;
  }
	*/
}