@charset 'utf-8';

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  color: #333;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  vertical-align: middle;
}

/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
  line-height: 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/


.inner_max {
  margin: 0 auto;
  max-width: 1440px;
  width: 90%;
}

.inner {
  margin: 0 auto;
  max-width: 1000px;
  width: 90%;
}

.flex {
  display: flex;
}

.flex_center {
  justify-content: center;
}

.flex_between {
  justify-content: space-between;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_around {
  justify-content: space-around;
}

.ttl {
  position: relative;
  padding-top: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
  color: #333;
  line-height: 1;
  z-index: 2;
}

.ttl_line {
  text-align: center;
  margin-top: -20px;
}

.sub_ttl{
  display: inline-block;
  border-bottom: solid 2px #f19424;
  line-height: 1.2;
  font-size: 4rem;
  font-weight: bold;
}

.txt_center {
  text-align: center;
}

.font_siz_l {
  font-size: 4rem;
}

.font_siz_m {
  font-size: 2.5rem;
}
.font_siz_ml{
  font-size: 2rem;
}
.font_siz_s {
  font-size: 1.6rem;

}
.font_siz_margin_m{
  margin-bottom: -10px;
}
.font_siz_margin_s{
  margin-bottom: -5px;
}
.line{
  padding-top: 50px;
  margin: 0 auto;
  max-width: 75%;
  border-bottom: solid 1px #333;
  margin-bottom: 50px;
}
.line_lft{
  border-left: solid 1px #333;
}
.pading_w{
  padding: 0 20px;
}

.margin_btm_l{
  margin-bottom: 100px;
}

.margin_btm_m{
  margin-bottom: 50px;
}
.margin_btm_s{
  margin-bottom: 30px;
}
.border_wrap{
  border: solid 2px #fff;
  width: 200px;
}
.line_lft_b{
  border-left: solid 1px #fff;
}
/* .line_height{
  line-height:
} */

.topping_ttl{
  width: 110px;
  background-color: #fff;
/*  background-image: url(../image/menu/menu_bg.jpg);*/
  position: relative;
  z-index: 1;
  margin-top: -45px;
}
.topping_wrap{
  width: 250px;
  height: 650px;
  border: solid 2px #333;
  padding: 20px;
  margin-top: 20px;

/*  margin-top: -35px;*/
}
.width_s{
  width: 250px;
}
.width_m{
  width: 300px;
}
.width_l{
  width: 450px;
}
.black_sheet{
  background-color: #222;
  color: #fff;
  padding: 50px 0;
}
.linhei{
  line-height: 1;
}
.padbtm{
  padding-bottom: 10px;
}
.other_drink_pt {
  padding: 50px 0 100px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/*ーーーーーーーーーーーーーーーーーーーjQuery*/
.fadein {
  opacity: 0;
  transition: all 800ms;
  transform: translate(0, 50px);
}
.fadein2 {
  opacity: 0;
  transition: all 1800ms;
  transform: translate(0, 50px);
}
.fadein3 {
  opacity: 0;
  transition: all 300ms;
  transform: translateX(-180px);
}

.fadein.scrollin,
.fadein2.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein3.scrollin {
  opacity: 1;
  transform: translateX(0px);
}





/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーRESPONSIVE
--------------------------------------------------*/
@media screen and (min-width:1440px) {


}

@media screen and (max-width:950px) {
  .topping_wrap{
    height: 650px;
  }

  .font_siz_l {
    font-size: 3.8rem;
  }

  .font_siz_m {
    font-size: 2.5rem;
  }
  .font_siz_ml{
    font-size: 2rem;
  }
  .font_siz_s {
    font-size: 1.6rem;
  }
}

@media screen and (max-width:666px) {
.flex_none {
  display: block;
}
  p{
    text-align: center;
  }
  .line_lft,
  .line_lft_b{
    border-left: solid 1px rgba(51, 51, 51, 0)
  }
  .topping_wrap,
  .border_wrap{
    margin: 0 auto;
  }
  .topping_wrap{
    height: 550px;
  }
  .width_m,
  .width_l{
    width: 100%;
  }

  .topping_ttl{
    margin: 0 auto;
    width: 110px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    margin-top: -45px;
  }
  .topping_menu{
    padding-top: 20px;
  }
  .topping_wrap{
    height: 610px
  }
}

@media screen and (max-width:560px) {
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/
  .ttl {
    font-size: 3.3rem;
    padding-top: 80px;
  }
  p{
    text-align: center;
  }
  .line_lft,
  .line_lft_b{
    border-left: solid 1px rgba(51, 51, 51, 0)
  }
  .topping_wrap,
  .border_wrap{
    margin: 0 auto;
  }
  .topping_wrap{
    height: 500px;
  }

  .topping_ttl{
    margin: 0 auto;
    width: 110px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    margin-top: -45px;
}
  .topping_menu{
    padding-top: 20px;
  }

  .font_siz_l {
    font-size: 3.5rem;
  }

  .font_siz_m {
    font-size: 2rem;
  }
  .font_siz_ml{
    font-size: 1.6rem;
  }
  .font_siz_s {
    font-size: 1.2rem;
  }
}