/* CSS Document */
/* ===============  main */
@media screen and (max-width: 780px) {
  .fv {
    background: none;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .fv:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../../images/sp/gls_fv_sp.jpg) center no-repeat;
    background-size: cover;
  }
}

@media screen and (max-width: 780px) and (orientation: portrait) {
  .fv h1 {
    width: 35%;
    width: 38%;
    position: absolute;
    left: 56.5%;
    top: 45%;
  }
}

@media screen and (max-width: 780px) {
  .slide_conts.parts_1 {
    height: 100vh;
  }
  .slider_wrap {
    height: 100vh;
  }
  .slide_inner {
    height: 100%;
  }
  .slide_conts {
    height: 100vh !important;
  }
  .slide_conts .bg.parts_1 {
    background: url(../../images/sp/slide_sp_01.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
  }
  .slide_conts .bg.parts_2 {
    background: url(../../images/sp/slide_sp_02.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
  }
  .slide_conts .bg.parts_3 {
    background: url(../../images/sp/slide_sp_03.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
  }
  .slide_ep {
    width: 90%;
    margin: 0 5%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    padding: 0 5%;
    height: initial;
  }
  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
    width: 28px;
    height: 28px;
    top: 50%;
  }
  button.slick-next.slick-arrow {
    right: 3%;
  }
  button.slick-prev.slick-arrow {
    left: 3%;
  }
  h4.slide_title.eng {
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 0.5em;
  }
  .jp_txt {
    font-size: 0.92em;
    line-height: 1.68;
  }
  .eng_min_txt {
    line-height: 1.68;
    font-size: 0.8em;
  }
  .topconts_under {
    position: relative;
    z-index: 100;
    background: #fffcf2;
    z-index: 100;
    margin: 0;
    padding: 0 0;
    width: 100%;
    overflow: hidden;
  }
  .photomv {
    width: 62%;
    margin: 0;
    z-index: 0;
  }
  .conts_item {
    width: 50%;
    margin: -14% 0 0 45%;
  }
  .conts_item.food_item img {
    width: 110%;
    margin:  0 0 0 -9%;
  }
  .conts_item.food_item {
    margin: -20px 0 0 23%;
    width: 75%;
  }
  .slide_all {
    z-index: 100;
  }
  .border {
    position: relative;
    height: 50px;
  }
  .flex_01 .border {
    width: calc(90%);
    left: 20%;
  }
  .smoothie_con .border {
    width: calc(70%);
    left: 35%;
  }
 
  .flex_02 .border {
    width: calc(80%);
    left: -20%;
    margin-top: -10%;
  }
  .top_cat .title {
    color: #262626;
    transform: translate(0);
    margin: 5% 6% 0;
  }
  .top_cat.flex_02 .title {
    transform: translate(0);
  }
  .top_cat .title h3 {
    font-size: 2.6em;
    line-height: 1;
    letter-spacing: 5px;
  }
  .top_cat .title .min {
    font-size: 1em;
    letter-spacing: 1.8px;
    margin: 1.5% 0;
  }
  .top_cat .note {
    width: auto;
    margin: 3% 6%;
  }
  .food_con .border {
    margin-top: -9%;
    left: 14%;
  }
 
  .top_cat.flex_02 .conts_item {width: 75%; margin: -14% 0 0 4%;}
  .top_cat.flex_02 .conts_item.food_item{width: 52%;}
  .top_cat.flex_02 .conts_item.coffee{width: 46%;}
  .top_cat.flex_02 .conts_item.food_item {width: 65%;}
  .top_cat.flex_02 .photomv {width: 66%; margin: 0 0 0 35%;}
  .top_cat.flex_02 .border {width: calc(100%); right: 20%; left: inherit;}
  .top_cat.flex_02 .note {width: auto; margin: 3% 6%;}
  .top_cat {margin: 0 0 16%;}

  .top_cat.flex_02.coffee_con .border {
    width: calc(80%);

  }
  .juice_con .conts_item img{
    width: 95%;
    margin-left: 0;
  }



  .store {
    width: 90%;
    margin: 20% auto 0;
    padding-top: 10%;
  }
  .store .shopview.photomv {
    width: 90%;
    margin-right: 65px;
    margin: 0 auto;
  }
  .store h3 {
    font-size: 2.6em;
    letter-spacing: 5px;
    margin: 0 0 3%;
  }
  .store h4.logo { width: 50%; margin: 6% auto 5%;}
  .top_cat.food_con .title { transform: inherit;}
  .topatt {
    width: 90%;
    margin: -6% auto -3%;
    text-align: right;
  }

}

@media screen and (max-width: 820px) and (min-width: 340px) and (orientation: portrait) {
  .jp_txt {
    font-size: 1.08em;
    margin: 7% 0 6%;
    line-height: 1.8;
  }
  .eng_min_txt {
    line-height: 2.2;
    font-size: 0.86em;
  }
}