@charset "UTF-8";

/* すべてのページに適用される設定 */
html {
    font-size: 16px;
    font-family: serif;
}
*{
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    color: #586365;
    position: relative;
}
main {
    width: 100%;
}


/* すべてのページに適用 - ヘッダー -  */
nav a:link {
  color: #37AB9D;
  text-decoration: none;
}
nav a:visited {
  color: #37AB9D;
  text-decoration: none;
}
nav a:hover {
  color: #9aded6;
  text-decoration: none;
}
nav a:active {
  color: #9aded6;
  text-decoration: none;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgb(255, 255, 255, .5);
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.nav ul {
    list-style-type: none;
    display: flex;
    justify-content: right;
    gap: 50px;
    padding: 68px 30px 0 0;
    font-size: 16px;
}
nav li {
  letter-spacing: 0.2em;
}
.header_logo {
    padding: 15px 30px;
}


/* すべてのページに適用 - ヒーロー - */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;/*高さを全画面にあわせる*/
} 

.video_area {
  position: absolute;
  z-index: -1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
.video_container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  bject-fit : cover;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  min-height: 100%;
  min-width: 100%;
}
.video_area {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
/*見出し設定*/
.hero_logo {
  position: relative;
  top: -70%;
  text-align: center;
  z-index: 100;
}



/* .hero {
    position: relative;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 100vh;
}
.video_container {
  }
  .hero_logo {
    position: absolute;
    align-items: center;
}
  .video-wrap {
    overflow: hidden;
    background: url(img/top.mp4) no-repeat center center/cover;
  } 
  
  video {
    min-width: 100%;
    min-height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);
  } */
  
  /*画面サイズが変わっても常に動画の中央が表示されるようにする*/
  /*動画よりも画面が横に長くなるとき用*/
  /* @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
    video {
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  } */
  
  /*動画よりも画面が縦に長くなるとき用*/
  /* @media (max-aspect-ratio: 16/9) {
    video {
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
  } */


/* .hero_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* padding: 10px 0 10px 20px; */
/* } */


.scrolldown1 {
    position:absolute;
    left:50%;
    bottom:10px;
      /*全体の高さ*/
    height:50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
position: absolute;
left:-15px;
top: -15px;
  /*テキストの形状*/
color: #b0b0b0;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 40px;
	background: #b0b0b0;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.9s ease-in-out infinite;
	opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


/* すべてのページに適用 - メイン - */
main, footer {
  position: relative;
  top: 100px;
}
main {
  position: relative;
}
h1 {
  text-align: center;
  font-size: 30px;
  padding-top: 100px;
  letter-spacing: 0.2em;
  line-height: 2.0em;
}
h2 {
  text-align: center;
  font-size: 35px;
  padding: 200px 0 120px 0;
  letter-spacing: 0.2em;
}
.h2 {
  padding-top: 150px;
}
.image {
  text-align: center;
  padding-top: 70px;
}
.owners_voice {
  display: flex;
  justify-content: center;
}
.Owners_Voice {
  position: relative;
  padding-bottom: 200px;
}
.Owners_Voice h2 {
  padding-top: 100px;
}
.owners_voice h3 {
  padding : 180px 120px 0 0;
  letter-spacing: 0.2em;
  line-height: 2.0em;
  text-align: end;
}
.voice {
  display: flex;
  justify-content: center;
}
.voice h3 {
  letter-spacing: 0.2em;
  line-height: 2.0em;
  padding-top: 80px;
}
.voice h3 span {
  padding-left: 410px;
}
.voice img {
  padding-right: 120px;
}
.fluid1, .fluid2 {
  width:30vh;/*横幅*/
  height: 30vh;/*縦幅*/
  background:#37AB9D;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
.fluids {
  display: flex;
  justify-content: space-between;
}
.fluid1 {
    position: absolute;
    top: 2700px;
    left: 20px;
    z-index: 1;
}
.fluid2 {
  position: absolute;
  top: 3300px;
  right: 15px;
  z-index: 1;
}

.Farmers_Voice {
  position: relative;
  background-color: #37AB9D;
  padding-bottom: 150px;
}
.menus {
  display: flex;
  justify-content: center;
  gap: 80px;
}
.menus img {
  padding-bottom: 40px;
}
.price1 {
  display: flex;
  justify-content: center;
  gap: 200px;
  font-size: 20px;
  text-align: center;
  line-height: 35px;
}
.price1 span {
  font-size: 17px;
}
.price1 .drink1 {
  padding-left: 50px;
}
.price1 .drink2 {
  padding-left: 50px;
}
.price1 .drink3 {
  padding-right: 20px;
}
.price2 {
  display: flex;
  justify-content: center;
  gap: 290px;
  font-size: 20px;
  text-align: center;
  line-height: 35px;
}
.price2 span {
  font-size: 17px;
}
.price h3 {
  line-height: 30px;
}
.price h3 span {
  font-size: 18px;
}
.BOOKING_button {
  text-align: center;
  padding-top: 90px;
}
.Recruit_button {
  text-align: center;
  padding-top: 70px;
}
.Shopping_button {
  /* text-align: center; */
  padding-top: 70px;
  position: absolute;
  bottom: 20px;
  right: 230px;
}
.button1 {
	text-align: center;
	width: 100px;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #586365;
	background: #586365;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.button1:hover {
  color: #586365;
  background: #fff;
}
.button2 {
	text-align: center;
	width: 100px;
	padding: 1rem 4rem;
	font-weight: bold;
  font-size: 20px;
	color: #37AB9D;
	transition: 0.5s;
  position: absolute;
  bottom: 50px;
  left: 550px;
} 
a.button2:hover {
  color: #9aded6;
}
.button3 {
	text-align: center;
	width: 100px;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #FFC042;
	background: #FFC042;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.button3:hover {
    color: #FFC042;
    background: #fff;
  }
.access h2 {
  padding-bottom: 50px;
}
.access h3 {
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 1.8em;
}
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 70%; /* 比率を4:3に固定 */
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.map-wrap {
  max-width: 50%; /* ここに横幅を指定 */
  margin: 0 auto;
  padding: 50px;
}

/* すべてのページに適用 - フッター - */
footer {
    background-color: #586365;
    position: relative;
    margin-top: 170px;
} 
.footer_logo {
  padding: 30px 0 0 35px;
}
.gotop {
    position: absolute;
    top: -120px;
    right: 90px;
}
.icon {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-bottom: 60px;
}
.copyright {
    text-align: center;
    color: #fff;
    padding-bottom: 10px;
    font-size: 12px;
}


/* モバイル対応 */
@media (max-width: 767px) {

}