@charset "UTF-8";
/* ========================================
  Arrow Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Number} $border - Border
  @param {Color} $color - Color
  ex: @include arrow.arrow(upward, 20px, 20px, 2px, #333);
======================================== */
/* ========================================
  Aspect Ratio Mixin
  @param {Number} $width - Width
  @param {Number} $height - Height
  ex: @include aspect-ratio.aspect-ratio(16, 9);
======================================== */
/* ========================================
  Hover Mixin
  ex: @include hover.hover() {...}
======================================== */
/* ========================================
  Leading Trim Mixin
  @param {Number} $line-height - Line Height
  Note: You can use get-line-height function.
  ex: @include leading-trim.leading-trim(1.6);
======================================== */
/* ========================================
  Breakpoint Variables
  Note: These breakpoints are refered from Bootstrap.
  https://getbootstrap.com/docs/5.0/layout/breakpoints/
  ex: $breakpoints
======================================== */
/* ========================================
  Media Query Mixin
  @param {String} $breakpoint - Class infix like 'sm', 'md'
  Note: Check out a breakpoints file if you want to modify breakpoints.
  ex: @include media-query(md) {...}
======================================== */
/* ========================================
  Triangle Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Color} $color - Color
  ex: @include triangle.triangle(upward, 20px, 20px, #333);
======================================== */
/* ========================================
  Underline Mixin
  @param {Color} $color - Color
  @param {Number} $height - Height
  ex: @include underline.underline(#ff6B00, 10px);
======================================== */
/* ========================================
  Visibility Hidden Mixin
  ex: @include visibility-hidden.visibility-hidden();
======================================== */
/* ========================================
  Strip-unit Function
  @param {Number} $number - Number to remove unit
  @return {Number} - Unitless number
  note: You can use this function in other functions and mixins.
  ex: strip-unit(100px); -> 100
======================================== */
/* ========================================
  Get Line Hight Function
  @param {Number} $font-size - Font size with px
  @param {Number} $line-feed - Line feed with no-unit
  @return {Number} $line-height - Line hight
  ex: get-line-height(16); -> 1.5
======================================== */
/* ========================================
  Font Size Variables
======================================== */
/* ========================================
  Get Rem Function
  @param {Number} $font-size - Number to convert px to rem
  @param {Number} $root-font-size - Number to divite target value by root's font size
  @return {Number} $rem - Number with rem unit
  ex: get-rem(16px); -> 1rem
======================================== */
/* ========================================
  Get Vw Function
  @param {Number} $px - Number to convert px to vw
  @param {Number} $viewport - Viewport size
  @return {Number} $vw - Number with vw unit
  ex: get-vw(30px); -> 8vw
======================================== */
/* ========================================
  Z-index Function
======================================== */
/* ========================================
  Color Variables
======================================== */
/* ========================================
  Font Variables
======================================== */
/* ========================================
  Transition Variables
======================================== */
/* ========================================
  Content Width Variables
======================================== */
.p-home-float {
  position: fixed; /* 要素を画面に固定 */
  bottom: 0; /* 画面の下端から0pxの位置 */
  left: 0; /* 画面の左端から0pxの位置 */
  visibility: hidden;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition-property: visibility, opacity;
  z-index: 10;
  width: 260px;
  height: 100px;
}
@media screen and (min-width: 768px) {
  .p-home-float {
    width: 332px;
    height: 130px;
  }
}
html.scrolled .p-home-float {
  transition-delay: 0.3s;
  visibility: visible;
  opacity: 1;
}

html.scrolled .p-home-float.is-hidden {
  transition-delay: 0.3s; /* バナーが消えるまでの遅延時間 */
  visibility: hidden;
  opacity: 0;
}

.p-home-float__link {
  position: relative;
  display: block;
  transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .p-home-float__link:hover {
    opacity: 0.7;
  }
}
.p-home-float__link:focus {
  opacity: 0.7;
}

button.p-home-float__close-btn {
  position: absolute;
  z-index: 11;
  top: 11px;
  right: 11px;
  width: 10px;
  aspect-ratio: 1;
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  button.p-home-float__close-btn {
    top: 15px;
    right: 15px;
    width: 15px;
    aspect-ratio: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  button.p-home-float__close-btn:hover {
    opacity: 0.7;
  }
}
button.p-home-float__close-btn:focus {
  opacity: 0.7;
}

/* Scroll */

.Top_Vid{width: -webkit-fill-available;height: -webkit-fill-available;object-fit: fill;}

:root {
  --color-secondary: #ffe8b1;
  --color-primary:#F2BB1A;
  --color-dark: #231815;
  --color-white: #fff;
  --Font_1: "source-han-sans-japanese", sans-serif !important;
  --Font_2: "Hepta Slab", serif !important;
  --Font_3: "Antonio", sans-serif !important;
}
.BG_pri {background-color:var(--color-primary);transition: .3s;}.C_pri {color: var(--color-primary);transition: .3s;}
.Bg_secon {background-color: var(--color-secondary);transition: .3s;}.C_secon {color: var(--color-secondary);transition: .3s;}
.BG_dark {background-color: var(--color-dark);transition: .3s;}.C_dark {color: var(--color-dark);transition: .3s;}
.Bg_white {background-color: var(--color-white);transition: .3s;}.C_white {color: var(--color-white);transition: .3s;}

p,span,a,b,h1,h2,h3,h4,h5{
  font-family: var(--Font_1);
  font-weight: 300;
}
.Font_brand,.Font_profile{
  font-family: var(--Font_2);
  font-weight: 800;
  font-size: 6rem;
}
.Font_brand2{
  font-family: var(--Font_3);
  font-weight: 600;
  font-size: 4rem;
}
.Font_title,.Font_title4{
  font-family: var(--Font_2);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 3;
  text-decoration: underline;
  text-underline-offset: 1.3rem;
  -webkit-text-decoration: underline;
  margin: 0;
  text-align: left;
}
.Font_title2{font-size: 2.5rem;font-weight: 600;text-decoration: none;}
.Font_big,.Font_big4{
  font-family: var(--Font_1);
  font-weight: 800;
  font-size: 3.5rem;
  padding-bottom: 2.5rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}
.Font_text,.Font_text4,.Font_text_s{
  font-family: var(--Font_1);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7;
  text-align: left;
}
.Font_profile{font-size: 6.5rem;line-height: 1.2;color: #DDBA50;padding-top: .5rem;}
.Font_profile_brand{font-size: 2.5rem;line-height: 1.2;color: #DDBA50;}
.Font_profile_brand1{font-size: 1.3rem;line-height: 2;text-align: center;color: #DDBA50;font-weight: 300;}

.Font_text_s{font-size: 1rem;}.Font_text_s1{font-weight: 700;}.Font_text_s2{font-size: 1rem;padding-bottom: .5rem;}
.Font_title4,.Font_big4,.Font_text4{
  text-align: center;
}

.Font_Product_Bee{font-size: 1.5rem;}
.Font_Product_type{font-size: 3rem;line-height: 1;}
.Font_Product_gram{font-size: 2.5rem;line-height: 2;}
.Font_Product_price{font-size: 4rem;}
.Font_Product_price2{font-size: 2.5rem;}

.Font_brand_location{font-size: 2rem;}
.Font_brand_location_1{font-size: 1.3rem;}
.Font_location{padding-top: 5rem;-webkit-text-stroke-width: 2px;font-family: var(--Font_2);
  -webkit-text-stroke-color: var(--color-primary);color: #00000000;}
.location_img{width: 53%;margin-left: 0;margin-right: 0;}

.Font_footer_brand{text-align: center;font-size: 2rem;color: #fff;line-height: 1.3;}
.Font_footer_brand1{text-align: center;font-size: 1.3rem;color: #fff;line-height: 1.3;}

@media only screen and (max-width: 1023px) {
  .Font_title4,.Font_big4,.Font_text4{text-align: left !important;}
  .Font_brand,.Font_profile{font-size: 4rem;}
  .Font_brand2,.Font_title,.Font_title2,.Font_title4,.Font_big,.Font_big4{font-size: 2rem;}
  .Font_big,.Font_big4{padding-bottom: 1.5rem;}
  .Font_profile{font-size: 2rem;text-align: center;line-height: 3;
    text-decoration: underline;text-underline-offset: 1.3rem;
    -webkit-text-decoration: underline;-webkit-text-decoration-thickness: 1px;}
    
  .Font_text_s1,.Font_text_s2{font-size: 2rem;}
  .Font_text,.Font_text_s{font-size: 1.4rem;}
  
  .Font_Product_Bee{font-size: 1.5rem;}
  .Font_Product_type{font-size: 2.5rem;line-height: 1;}
  .Font_Product_gram{font-size: 2rem;line-height: 2;}
  .Font_Product_price{font-size: 3rem;}
  .Font_Product_price2{font-size: 2rem;}
  .Font_brand_location{font-size: 1.5rem;}
  .Font_brand_location_1{font-size: 1rem;}
  .Font_location{font-size: 2rem;padding-top: 2rem;}
  
.Font_profile_brand{font-size: 1.3rem;line-height: 1.2;text-align: center;color: #DDBA50;}
.Font_profile_brand1{font-size: .8rem;line-height: 2;text-align: center;color: #DDBA50;font-weight: 300;}
.Font_profile{padding-top: .1rem;}
.Font_footer_brand{font-size: 3rem;}
.Font_footer_brand1{font-size: 1.5rem;}
.Font_footerm_pad{padding-bottom: 1rem;}

}


.Font_1{
  font-family: "source-han-sans-japanese", sans-serif !important;
  font-weight: 800;
  font-size: 3.5rem;
  padding-bottom: 2.5rem;
  line-height: 1.6;
  margin: 0;
}

.Font_2{
  font-family: "source-han-sans-japanese", sans-serif !important;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7;
}
.Font_2+.Font_2{}

.Font_16{font-size: 16px;}
.Font_1em{font-size: 1rem;}.Font_1em5{font-size: 1.5rem;}
.Font_2em{font-size: 2rem;}.Font_2em5{font-size: 2.5rem;}
.Font_3em{font-size: 3rem;}
.Font_4em{font-size: 4rem;}
.Font_5em{font-size: 5rem;}
.Font_8em{font-size: 8rem;}

.Font_l{text-align: left;}.Font_r{text-align: right;}
.Font_u{text-decoration: underline;
text-underline-offset: .8rem;}
.Font_300{font-weight: 300;}

.Font_ex1{padding-right: 1rem;}
.Font_ex1+.Font_ex1{padding-left: 1rem;border-left: #000 solid 1px;}

.Font_ex2{padding: 0rem 1rem;border: solid 1px #000;}
.Font_ex2+.Font_ex2{padding: 0 1.3rem;border-left: none;}

@media (orientation: landscape) {.Mobile{display: none !important;}}
@media (orientation: portrait) {.PC{display: none !important;}.Mobi_pad{padding-top: 3rem;}}



.gallery{width: -webkit-fill-available;padding-top: 1rem;padding-bottom: 3rem;
  background-color: #222;
  display: flex;flex-wrap: wrap;justify-content: center;
  margin-left: auto;margin-right: auto;
  position: sticky;z-index: 1000;
}
.gallery div{width: 31%;padding-left: 1rem;padding-right: 1rem;overflow: hidden;}
.gallery img{width: 100%;object-fit: cover;height: auto;padding-top: 2rem;transition: .3s;}
.Gal_1{aspect-ratio: 1/1;}
.Gal_2{aspect-ratio: 600/350;}
.Gal_3{aspect-ratio: 600/850;}

@media only screen and (max-width: 1023px){
  .gallery div{width: 30%;padding-left: 0.5rem;padding-right: 0.5rem;}
  .gallery img{padding-top: 1rem;}
  .gallery{padding-top: inherit;padding-bottom: 1rem;}
  .gallery_fix{margin-bottom: -1rem;}
}

.gallery_fix{margin-bottom: -2rem;}

.Flex,.Flex2,.Flex_3{display: flex;align-items: center;justify-content: center;}
.Flex_end{justify-content: flex-end;}
.Flex_start{justify-content: flex-start;}
.Flex_b{align-items: flex-end;}
.Flex_top_center,.Flex_product{display: flex;flex-direction: column;align-items: center;justify-content: flex-start;}
.Flex_top_left{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;padding-left: 3rem;}
.Flex_left_left{display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;padding-top: 3rem;}
.Flex_left{display: flex;flex-direction: row;justify-content: flex-end;align-items: center;}
.Flex_farmer{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;}
.Flex_center{display: flex;flex-direction: column;align-items: center;justify-content: flex-start;}

.Flex_footer{display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;}
.Flex_footer1{display: flex;width: -webkit-fill-available;}
.Flex_footer2{display: flex;flex-direction: column;width: -webkit-fill-available;justify-content: space-around;}
.Flex_contact{display: flex;}
.Flex_contact div{width: -webkit-fill-available;display: flex;align-items: center;justify-content: end;}
.Flex_contact div a{text-decoration: none;color: #fff;font-size: 1.3rem;font-family: var(--Font_2);width: auto;height: fit-content;font-weight: 600;text-align: end;}
.Flex_contact div a img{aspect-ratio: 1/1;width: 3rem;}
.Flex_contact2{display: flex;justify-content: flex-end;}

.Font_address,.Font_phone,.Font_copy p{
  color: #fff;
  font-size: 1rem;
  font-family: var(--Font_2);
  width: auto;
  font-weight: 300;
  text-align: end;
  text-decoration: none;
}
.Font_copy{width: 33.33%;}
.Font_phone{padding-left: 1rem;}

@media only screen and (max-width: 1023px) {
  .Flex_top_center{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;}
  .Flex_left,.Flex_left_left{flex-direction: column;}
  .Flex_farmer{justify-content: flex-start;}
  .Flex_top_left{padding-left: 0;}
  .Flex_left_m{display: flex;flex-direction: row;justify-content: flex-end;padding-top: 2rem;}
  .Flex_footer{flex-direction: column;align-items: flex-end;justify-content: center;}
  .Flex_footer1{width: unset;}
  .Flex_footer2{}
  .sns{width: 5rem;}
  .sns img{width: 5rem;}
  .Flex_footerm{display: contents;width: 100%;}

  .Flex_footerm p,.Flex_footerm a{
    color: #fff;
    font-size: 1rem;
    font-family: var(--Font_2);
    width: auto;
    font-weight: 300;
    text-align: end;
    text-decoration: none;line-height: 2;}
  .Flex_footerm_link{font-size: 1.5rem !important;font-weight: 600 !important;}
  .Flex_footer1{padding-bottom: 3rem;}
}
.Box_20{width: 20%;}
.Box_25{width: 25%;}
.Box_30{width: 30%;}
.Box_35{width: 35%;}
.Box_40{width: 40%;}
.Box_45{width: 45%;}
.Box_50{width: 50%;}
.Box_55{width: 55%;}
.Box_60{width: 60%;}
.Box_65{width: 65%;}
.Box_75{width: 75%;}
.Box_profile1{width: -webkit-fill-available;}
.Box_profile2{width: 102%;}
.fill{width: -webkit-fill-available;}

.pad_x_2{padding-left: 2rem;padding-right: 2rem;}
.pad_x_3{padding-left: 3rem;padding-right: 3rem;}
.pad_x_5{padding-left: 14rem;padding-right: 14rem;}
.pad_b_5{padding-bottom: 5rem;}
.pad_b_10{padding-bottom: 20rem;}
.item_vid{
  width: 100%;
  height: auto;
  aspect-ratio: 5/4;
  object-fit: cover;
  position: relative;
  border-radius: 10px;
}
.Box_Photo img{object-fit: cover;width: 100%;height: 100%;}
.Box_Photo+.Box_Photo{padding-left: 1rem;}

.Box_Photo2{width: 100%;aspect-ratio: 3/1.1;}
.Box_Photo2 img{object-fit: cover;width: 80%;height: 100%;}
.Box_Photo2+.Box_Photo2{padding-top: 5rem;}

@media only screen and (max-width: 1023px) {
  .Flex{
  flex-direction: column;}
  .Box_45,.Box_55,.Box_65,.Box_75{width: auto;}
  .pad_m{padding-bottom: 1rem;}
  .Box_Photo{width: auto;}
  .Flex2{flex-wrap: wrap;}
  .Box_Photo2+.Box_Photo2{padding-top: 1rem;}
  .Flex_3{align-items: unset;justify-content: unset;}
  .pad_x_5{padding-left: 3rem;padding-right: 3rem;}
  .pad_b_10{padding-bottom: 5rem;}
  .fill_m{width: 100%;}
  .Mobile_l{text-align: left;}
}

@keyframes ani_left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  10% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
@keyframes ani_right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  10% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes ani_up {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }

  10% {
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes ani_down {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  10% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes ani_bee {
  0% {
    scale: 0;
    opacity: 0;
  }

  10% {
    scale: 0;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}
@keyframes drop_shadow2 {
  0% {
    filter: none;
    transform: translateX(15px);
    transform: translateY(10px);
  }

  60% {
    filter: none;
    transform: translateX(15px);
    transform: translateY(10px);
  }

  100% {
    filter: drop-shadow(15px 10px 4px rgba(0, 0, 0, 0.1));
    transform: translateX(0px);
    transform: translateY(0px);
  }
}

.shadow img{
  filter: drop-shadow(3rem 2rem 5rem rgba(0, 0, 0, 0.2));
}
.drop_shadow2{
  filter: drop-shadow(15px 10px 4px rgba(0, 0, 0, 0.1));
  mask-image: none;
  -webkit-mask-image: none;
}
.drop_shadow3{
}
.shadow2{
  mask-image: none;
  -webkit-mask-image: none;
}
@media only screen and (max-width: 1023px) {
  @keyframes drop_shadow2 {
    0% {
      filter: none;
      transform: translateX(15px);
      transform: translateY(10px);
    }
  
    60% {
      filter: none;
      transform: translateX(15px);
      transform: translateY(10px);
    }
  
    100% {
      filter: drop-shadow(15px 10px 4px rgba(0, 0, 0, 0.1));
      transform: translateX(0px);
      transform: translateY(0px);
    }
  }
  .drop_shadow2{
    filter: drop-shadow(15px 10px 4px rgba(0, 0, 0, 0.1));
    mask-image: none;
    -webkit-mask-image: none;
  }
  
@keyframes ani_up {
  0% {
    transform: translateY(300px);
    opacity: 0;
  }

  10% {
    transform: translateY(300px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
}

.ani_left,.ani_right,.ani_up,.ani_big,.ani_down {
  animation-duration: 2s;
}
.drop_shadow2 {
  animation-duration: 3s;
}

.ani_08{animation-duration: 0.8s;}
.ani_16{animation-duration: 1.6s;}
.ani_24{animation-duration: 2.4s;}
.ani_32{animation-duration: 3.2s;}
.ani_40{animation-duration: 4s;}

.ani_left.visibled {
  animation-name: ani_left;
}
.ani_right.visibled {
  animation-name: ani_right;
}
.ani_up.visibled {
  animation-name: ani_up;
}
.ani_down.visibled {
  animation-name: ani_down;
}
.drop_shadow2.visibled {
  animation-name: drop_shadow2;
}
.ani_bee.visibled {
  animation-name: ani_bee;
}



.bg_end{
  background: url(../image/BG_Float6.jpg) no-repeat center bottom;
  background-size: max(1920px,100%) auto;
  background-size: 100%;
  padding-bottom: 15rem;
}
.pad_end{padding-top: 6rem;}
.pad_story_m{padding-top: 8rem;}

@media only screen and (min-width: 1400px) {
  .bg_end{
    background: url(../image/BG_Float6m3.jpg) no-repeat center bottom;
    padding-bottom: 14rem;
    background-size: 100%;
  }
  .pad_end{padding-top: 6rem;}
  .pad_x_2{padding-left: 4rem;padding-right: 4rem;}
}
@media only screen and (min-width: 1600px) {
  .bg_end{
    background: url(../image/BG_Float6m6.jpg) no-repeat center bottom;
    background-size: 100%;
  }
}
@media only screen and (max-width: 1200px) {
  .bg_end{
    background: url(../image/BG_Float6m2.jpg) no-repeat center bottom;
    padding-bottom: 14rem;
    background-size: 100%;
  }
  .pad_end{padding-top: 6rem;}
  .pad_x_2{padding-left: 4rem;padding-right: 4rem;}
}
@media only screen and (max-width: 1023px) {
  .bg_end{
    background: url(../image/BG_Float6m.jpg) no-repeat center bottom;
    padding-bottom: 10rem;
    background-size: 100%;
  }
  .pad_end{padding-top: 3rem;}
  .pad_x_2,.pad_x_3{padding-left: 0rem;padding-right: 0rem;}
  .pad_story_m,.pad_story_m4{padding-top: 10rem;}
}

.buy{
  padding: 0.7rem 2.3rem;
  border-radius: 300px;
  border: #fff solid 1.5px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition-duration: .7s;
  font-weight: 300;
  font-size: 1.3rem;
}
.buy:hover{
  border: var(--color-primary) solid 1.5px;
  background-color: #fff;
  color: #000;
}