/*==================================================
TOP
==================================================*/
  .TOP {
    width: 100%; /* 幅を100%に設定 */
    height: 100svh; /* 高さをビューポート高さに設定 */
    position: relative; /* 要素の位置を相対位置に設定 */
    background-image: url("../img/SPtop.jpg"); /* 背景画像を設定 */
    background-size: cover; /* 背景画像を要素全体にフィットさせる */
    background-position: bottom; /* 背景画像の位置を中央に設定 */
    object-fit: cover; /* 画像を要素全体にフィットさせる */
  }
  /* トップロゴのスタイル設定 */
.TOPlogo {
    width: 50%; /* 幅を30%に設定 */
    position: absolute; /* 絶対位置に設定 */
    top: 50%; /* 上から50%の位置に設定 */
    left: 50%; /* 左から50%の位置に設定 */
    transform: translate(-50%, -50%); /* 要素を中央に配置 */
    margin: auto;
  }
.WhiteLogo {
  width: 50%; 
  height: auto;
  margin: auto;
  padding-top: 5svh;
}


  @media screen and (min-width:451px)and (max-width:960px) {
    .TOPlogo {
      width: 20%; /* 幅を30%に設定 */
    }
  }
  @media screen and (min-width:961px) {
    .TOPlogo {
      width: 10%; /* 幅を30%に設定 */
    }
  }


/*==================================================
About
==================================================*/
.About {
  width: 100%; /* 幅を100%に設定 */
  height: 100%; /* 高さをビューポート高さに設定 */
  position: relative; /* 要素の位置を相対位置に設定 */
  background-image: url("../img/aboutback.jpg"); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を要素全体にフィットさせる */
  background-position: bottom; /* 背景画像の位置を中央に設定 */
  object-fit: cover; /* 画像を要素全体にフィットさせる */
}
.About::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  opacity: 0.9;
}


/*==================================================
List
==================================================*/
.ListFlexBox {
  width: 100%;
  height: auto;
  display: flex;
}
.ListFlexBox div {
  width: calc(100%/2);
  text-align: center;
}
.LFBText {
  display:flex;
  flex-flow: column;
  justify-content: space-between;
}
.LFBText p {
  font-size: 0.8;
  padding: 0 10px;
}
.reverse {
  flex-direction: row-reverse;
}


/*==================================================
Commodity
==================================================*/
.Commodity {
  position: relative;
}
.CommdityTopText {
  width: 70%;
  height: auto;
  padding: 50px 0;
}
.rightPosition {
  margin: 0 0 0 auto;
}
.SliderBlock {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.LeftVege {
  width: 100%;
  position: absolute;
  top:0;
  left: -30%;
}
.RightVege {
  position: absolute;
  top: auto;
  left: auto;
  right: -125%;
  bottom: -7%;
  width: 200%;
}
.sliderText {
  color: #476337;
  font-size: 1.1rem;
}
/*======================= スライダーのためのcss ==========================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:95%;
  height: auto;
  margin:0 auto;
}
.slider li {
  width: auto;
  height: 35svh;
}
.slider img {
  width:auto;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:100%;
}

.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*ドットナビゲーションの設定*/

.slick-dots {
text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
height: 20px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border: solid 0.5px #00742e;
  border-radius:50%;
  background:#f9f9f9;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#00742e;/*ドットボタンの現在地表示の色*/
}


/*==================================================
Menu
==================================================*/
.subTitle  {
  width: auto;
  height: 7svh;
  padding-bottom: 25px;
}
.subTitle img {
  width: auto;
  height: 100%;
}

.Menu .rightPosition img {
  display: block;
}
.Menu p.centertText {
  padding: 50px 0;
}

/*======= ドリンクスライダーのためのcss ================*/
.DrinkSlider {
  width: auto;
  height: 30svh;
}
.DrinkSlider li {
  width:auto;/*スライダー内の画像を横幅100%に*/
  height:100%;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.DrinkSlider .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}

.DrinkSlider02 {
  width: auto;
  height: 30svh;
}
.DrinkSlider02 li {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:100%;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.DrinkSlider02 .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}

/*==================================================
ドリンクスライダー flex調整
==================================================*/
@media screen and (min-width:750px)and (max-width:1499px) {
  .TOP {
    background-image: url("../img/TABtop.jpg"); /* 背景画像を設定 */
  }
  .DrinkSlider,.DrinkSlider02 {
    width: 80%;
    height: auto;
    display: flex;
    margin: auto;
  }
}


/*==================================================*/
.FoodBackground {
  width: 100%; /* 幅を100%に設定 */
  height: auto; /* 高さをビューポート高さに設定 */
  position: relative; /* 要素の位置を相対位置に設定 */
  background-image: url("../img/FoodBackground.png"); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を要素全体にフィットさせる */
  background-position: bottom; /* 背景画像の位置を中央に設定 */
  object-fit: cover; /* 画像を要素全体にフィットさせる */
}
.FoodBackground .adjustment p {
  z-index: 0;
}
.FoodBlock {
  padding: 20svh 0;
  position: relative;
}
.LeftFood {
  transform: rotate( -10deg );
  width: auto;
  height: auto;
  position: absolute;
  top:4svh;
  left: -25%;
  z-index: 1;
}
.LeftFood img {
  width: auto;
  height: 25svh;
}
.RightFood {
  width: 100%;
  height: 25svh;
  overflow: hidden;
  position: absolute;
  top:auto;
  bottom: -2svh;
  z-index: 1;
}
.RightFood img {
  width: auto;
  height: 100%;
  margin-left: auto;
  margin-right: -10%;
  display: block;

}

.FoodBlock p {
  color: #51633C;
  font-size: 0.8rem;
  padding: 50px 30px;
  border: solid 1px #51633C;
  /* 左上 | 右上 | 右下 | 左下 */
  border-radius: 20px;
  z-index: -1;
}


/*==================================================
info
==================================================*/
.info .adjustment {
  text-align: center;
}
.info  h4 {
  line-height: 2.5;
}

/*==================================================
フッター前　画像
==================================================*/
.endImg {
  background-image: url("../img/in02.jpg"); /* 背景画像を設定 */
  background-position: right bottom; /* 背景画像の位置を中央に設定 */
}




/*==================================================
タブレット画面
==================================================*/
@media screen and (min-width:450px)and (max-width:959px) {
 /* ========================= ABOUT ========================= */
  .AboutWidth .adjustment {
    width: 40%;
    height: auto;
  }
  /* ========================= LIST ========================= */
  .ListFlexBox {
  width: 70%;
  height: auto;
  margin: auto;
  display: flex;
}

  /* ========================= COMMODITY ========================= */
  .Commodity {
    position: relative;
  }
  .rightPosition {
    margin-right: 0;
  }
  .COMMODITYflex {
    width: 50%;
  }
  .CommdityTopText {
    width: 50%;
  }
  .SliderBlock {
    width: 100%;
    overflow: hidden;
    margin: auto;
  }
  .SliderBlock .topBigSpace {
    padding-top: 50px;
  }
  .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:80%;
    height: auto;
    margin:0 auto;
    display: flex;
    gap: 20px;
  }
  .slider li {
   width: auto;
   height: auto;
  }
  .slick-dots {
    margin:50px 0 0 0;
    height: 5svh;
  }

    .LeftVege {
    width: 50%;
    position: absolute;
    top: 0%;
    left: -10%;
    z-index: -1;
  }
  .LeftVege img {
    width: 100%;
    height: auto;
  }
  .RightVege {
    position: absolute;
    top: auto;
    left: auto;
    right: -30%;
    bottom: 10%;
    width: 70%;
  }
  .RightVege img {
    width: 100%;
  }

  

/* ========================= MENU ========================= */
/* DRINK */
    .DrinkSlider,.DrinkSlider02 {
    width: 60%;
    gap: 10px;
  }
/* FOOD */
  .PCmenuSubTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
  }
  .PCmenuSubTitle .rightPosition {
     margin: 0 0 0 0;
  }
/* FOOD */
.FoodBackground {
  overflow: hidden;
}
  .FoodBlock {
    height: auto;
    padding-top: 0px;
  }
  .FoodBlock .adjustment {
    width: 60%;
  }
  .FoodBlock p {
    font-size: 1rem;
    padding: 100px 50px;
    border-radius: 30px 30px 0 30px;
    z-index: -1;
  }

  .LeftFood {
    transform: rotate( -10deg );
    width: auto;
    height: 20svh;
    position: absolute;
    top:auto;
    left: auto;
    right: 0;
    bottom: 7svh;
    z-index: 1;
  }
  .LeftFood img {
    width: auto;
    height: 100%;
  }

  .RightFood {
    width: auto;
    height: 20svh;
    overflow: hidden;
    position: absolute;
    top:auto;
    bottom: 7svh;
  }
  .RightFood img {
    width: auto;
    height: 100%;
    margin-left: -5%;
    margin-right: auto;
    display: block;
  }

/* ========================= INFO ========================= */
  .INFOflex {
    width: 60%;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .displayBlock {
    display: block;
  }

}







/*==================================================
パソコン画面
==================================================*/
@media screen and (min-width:960px)and (max-width:1499px) {

  /* ========================= TOP ========================= */
  .TOPflex {
    width: 100%;
  }
  /* ========================= ABOUT ========================= */
  .AboutWidth .adjustment {
    width: 30%;
    height: auto;
  }
  /* ========================= LIST ========================= */
  .LISTflex {
    width: 80%;
    height: auto;
    margin:auto;
    display: flex;
    flex-wrap: wrap
  }
  .ListFlexBox {
    width: calc(100%/2 - 50px);
    margin: 0px 25px;
  }
  .reverse {
    flex-direction: row;
  }
  .LFBText {
    height: 100%;
  }

  /* ========================= COMMODITY ========================= */
  .Commodity {
    position: relative;
  }
  .rightPosition {
    margin: 0 0 0 0;
  }
  .COMMODITYflex {
    display: flex;
    justify-content: space-between;
  }
  .CommdityTopText {
    width: 25%;
    height: auto;
    padding: 50px 0;
  }

  .LeftVege {
    width: 50%;
    position: absolute;
    top: 0%;
    left: -10%;
    z-index: -1;
  }
  .LeftVege img {
    width: 100%;
    height: auto;
  }
  .RightVege {
    position: absolute;
    top: auto;
    left: auto;
    right: -20%;
    bottom: 10%;
    width: 60%;
  }
  .RightVege img {
    width: 100%;
  }

  .SliderBlock {
    width: 100%;
    overflow: hidden;
    margin: auto;
  }
  .SliderBlock .topBigSpace {
    padding-top: 50px;
  }
  .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:70%;
    height: auto;
    margin:0 auto;
    display: flex;
    gap: 20px;
  }
  .slider li {
   width: auto;
   height: auto;
  }
  .slick-dots {
    margin:50px 0 0 0;
    height: 5svh;
  }
  

/* ========================= MENU ========================= */
/* DRINK */
    .DrinkSlider,.DrinkSlider02 {
    width: 50%;
    gap: 20px;
  }
/* FOOD */
  .PCmenuSubTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
  }
  .PCmenuSubTitle img {
    padding-right: 50px;
  }
  .FoodBlock {
    padding-top: 0px;
  }
  .FoodBlock .adjustment {
    width: 50%;
  }
  .FoodBlock p {
    font-size: 1rem;
    padding: 100px 100px;
    border-radius: 30px 30px 0 30px;
    z-index: -1;
  }
  .LeftFood {
    transform: rotate( -10deg );
    width: auto;
    height: auto;
    top:auto;
    left: auto;
    right: 5%;
    bottom: 10svh;
  }
  .LeftFood img {
    width: auto;
    height: 100%;
    margin-left: 0;
  }

  .RightFood {
  width: 20%;
  height: auto;
  overflow: hidden;
  position: absolute;
  top:auto;
  left: 10%;
  bottom: 10svh;
  }
  .RightFood img {
    width: auto;
    height: 100%;
    margin-left: 0;
    margin-right: auto;
    display: block;
  }

/* ========================= INFO ========================= */
  .INFOflex {
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .INFOflex div {
    width: calc(100%/2 - 60px);
    padding: 0 30px;
  }
  .displayBlock {
    display: block;
  }
  .INFOflex .bottomSpace {
    padding-bottom: 0px;
  }
  .adjustmentMap {
    height: 30svh;
  }
}






/*==================================================
パソコン大画面
==================================================*/
@media screen and (min-width:1500px) {

  /* ========================= TOP ========================= */
  .TOPflex {
    width: 97%;
    display: flex;
  }
  .TOP {
    width: 70%; /* 幅を100%に設定 */
    height: 93svh; /* 高さをビューポート高さに設定 */
    background-image: url("../img/PCtop.jpg"); /* 背景画像を設定 */
  }

  /* ========================= ABOUT ========================= */
    .About {
    width: 30%; 
    height: 93svh; /* 高さをビューポート高さに設定 */
    position: relative; /* 要素の位置を相対位置に設定 */
  }
  .AboutWidth {
    width: 100%;
    position: absolute;
    top: 50%; /* 上から50%の位置に設定 */
    left: 50%; /* 左から50%の位置に設定 */
    transform: translate(-50%, -50%); /* 要素を中央に配置 */
  }
  .AboutWidth .adjustment {
    width: 70%;
  }
  .AboutWidth .adjustment .EachItem {
    padding: 0 0 100px 0;
  }
  

  /* ========================= LIST ========================= */
  .LISTflex {
    width: 50%;
    height: auto;
    margin:auto;
    display: flex;
    flex-wrap: wrap
  }
  .ListFlexBox {
    width: calc(100%/2 - 50px);
    margin: 0px 25px;
  }
  .reverse {
    flex-direction: row;
  }
  .LFBText {
    height: 100%;
  }

  /* ========================= COMMODITY ========================= */
  .Commodity {
    position: relative;
  }
  .rightPosition {
    margin: 0 0 0 0;
  }
  .COMMODITYflex {
    width: 60%;
    display: flex;
    justify-content: space-between;
  }
  .CommdityTopText {
    width: 25%;
    height: auto;
    padding: 50px 0;
  }
  .PCLeftVege {
    width: 50%;
    position: absolute;
    top: 10%;
    left: -10%;
    z-index: -1;
  }
  .PCLeftVege img {
    width: 80%;
    height: auto;
  }
  .RightVege {
    position: absolute;
    top: auto;
    left: auto;
    right: -10%;
    bottom: 10%;
    width: 50%;
  }
  .RightVege img {
    width: 80%;
    height: auto;
  }

  .SliderBlock {
    width: 100%;
    overflow: hidden;
    margin: auto;
  }
  .SliderBlock .topBigSpace {
    padding-top: 50px;
  }
  .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:60%;
    height: auto;
    margin:0 auto;
    display: flex;
    gap: 20px;
  }
  .slider li {
   width: auto;
   height: auto;
  }
  .slick-dots {
    margin:50px 0 0 0;
    height: 5svh;
  }
  

/* ========================= MENU ========================= */
/* DRINK */
    .DrinkSlider,.DrinkSlider02 {
    width: 50%;
    height: auto;
    display: flex;
    margin: auto;
    gap: 30px;
  }
  .slick-list {
    width: 60%;
    overflow: visible;
    margin: auto;
  }
  .sliderText {
  color: #476337;
  font-size: 1.5rem;
}

/* FOOD */
  .PCmenuSubTitle {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 200px 0 100px 0;
  }
  .PCmenuSubTitle img {
    padding-right: 50px;
  }
  .Menu .rightPosition img {
    margin-left: 0;
    display: block;
  }
  .FoodBlock {
    padding-top: 0px;
  }
  .FoodBlock .adjustment {
    width: 35%;
  }
  .FoodBlock p {
    font-size: 1.3rem;
    padding: 100px;
    border-radius: 30px 30px 0 30px;
    z-index: -1;
  }
  .LeftFood {
    width: auto;
    height: 20svh;
    transform: rotate( -10deg );
    top:auto;
    left: auto;
    right: 20%;
    bottom: 5svh;
  }
  .LeftFood img {
    width: auto;
    height: 100%;
    margin-left: 0;
  }

  .RightFood {
  width: auto;
  height: 20svh;
  overflow: hidden;
  position: absolute;
  top:auto;
  left: 25%;
  bottom: 5svh;
  }
  .RightFood img {
    width: auto;
    height: 100%;
    margin-left: 0;
    margin-right: auto;
    display: block;
  }

/* ========================= INFO ========================= */
  .INFOflex {
    width: 60%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .INFOflex div {
    width: calc(100%/2 - 60px);
    padding: 0 30px;
  }
  .INFOflex .bottomSpace {
    padding-bottom: 0px;
  }
  .displayBlock {
    display: block;
  }

}