@charset "utf-8";

*{
  margin: 0;
  padding: 0;
}
html { font-size: 62.5%;
}

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 220px;
  height: auto;
  transition: all 1s;
  background-color: #333;
  z-index: 9999;
  /* display: flex;
  align-items: center;
  justify-content: center; */
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

/* ▼▼▼ページ内リンクスクロール位置調整▼▼▼ */

#story, #products, #news{
  display: block;
    padding-top: 120px;
    margin-top: -120px;
}
#concept{
  display: block;
    padding-top: 10px;
}
/* ▲▲▲ページ内リンクスクロール位置調整▲▲▲ */

strong {
  font-style: normal;
  font-size: inherit;
  font-weight: 400;
}
em {
   font-style: normal;
   font-size: inherit;
}
/* font-family: 'Noto Serif JP', serif;
font-family: 'Iowan Old Style'; */

@font-face {
  font-family: 'Iowan Old Style';
  src: url('../font/bitstream_iowan_old_style_bt.woff') format('woff'),
    url('../font/bitstream_iowan_old_style_bt.eot') format('eot');
}
/* <!-- ▼▼▼▼▼▼▼ SP用ハンバーガー▼▼▼▼▼▼▼ --> */
.btn{
  display: none;
}
.menu{
	display: none;
}
/* PCでは非表示にしておく */
/* .menu {
  width: 70%;
  height: 100vh;
  margin-left: auto; */
  /* メニューを縦に */
  /* display: flex;
  flex-direction: column;
  color: #fff;
  transition: .3s;
} */

.top_bar{
  width: 100%;
  /* height: 104px; */
  background: white;
  position: fixed;
  z-index: 500;
  opacity: 0.9;
  /* margin-top: -24px; */
}
header nav{
  /* background-color: pink; */
  /* height: 96px; */
  width: calc(50% - 176px / 2);
}
header nav ul{
  display: flex;
  height: 100%;
  align-items: center;

}
header nav ul li{
  width: 33.3%;
  /* background-color: blue; */
  text-align: center;
  align-items: center;
  font-family: 'Iowan Old Style';
  font-size: 1.6rem;
  list-style: none;
}
.privacy_yose{
  /* text-align: right;
  padding-right: 16px; */
}
header nav ul li a:hover{
/* transition: 0.5s; */
color: #887655;
/* opacity: 0.6; */
}
header nav ul li a{
text-decoration: none;
font-size: inherit;
color: black;
}

.nav_left{
  padding-right: 15%;
}
.nav_right{
  padding-left: 15%;
}
h1{
  width:176px;
}
/* .h1_sp{
  display: none;
} */
.top_nav{
  display: flex;
  width: 90%;
  /* background-color: skyblue; */
  margin: 0 auto;
  margin-top: 8px;
}

/* ▼▼▼▼▼▼▼▼slick▼▼▼▼▼▼▼ */
/* 縦並びを解決 */
.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}
/* 縦並びを解決 */


.slider{
    margin: 0px auto;
    width: 100%;
    height:  85vh;
		overflow: hidden; /* 画像がはみ出ないようにする */
    /* z-index: 1; */
    /* margin-top: 96px; */
}

/* slickスライドをズームにした */
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1); /* 拡大率 */
  }
}
.add-animation {
  animation: fadezoom 5s 0s forwards;
}
/* slickスライドををズームにした */

.slider img{
    width:100%;
    height:  85vh;
    object-fit: cover;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: blue;
}
/* ▲▲▲▲▲slick▲▲▲▲▲▲▲ */

.slider_flex{
  display: flex;
  /* background-color: skyblue; */
  padding-top: 104px;
}
header{
  /* height: 100vh; */
}
.slider_center{
  width:90%;
}
.slider_left{
  /* background-color: orange; */
  width: 5%;
  position: relative;

}
.slider_left p{
writing-mode: vertical-rl;
/* margin: 0 auto; */
/* bottom: 50; */
position: absolute;
  /* right: 30%;
  bottom: 200px;
  left: 60%; */
  margin: auto;
  font-family: 'Iowan Old Style';
  font-size: 1.6rem;
  border-width: thin;
  /* background-color: red; */
}
.scroll{
  position: absolute;
  bottom: 200px;
  width: 70%;
  font-family: 'Iowan Old Style'; */
}
.sen{
  border-right: solid 1px black;
  height: 300px;
  position: absolute;
  bottom: -100px;
  width: 50%;

}
.slider_right{
  /* background-color: red; */
  width: 5%;
  position: relative;
  writing-mode: vertical-rl;

}
.slider_right p{
  width: 27px;
  height:  27px;
  position: absolute;
  top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.shoplist{
  width: 240px;
  height: 50px;
  background-color: #B19A6F;
  border-radius: 4px;
  position: absolute;
  right: 16px;
  bottom: 108px;
}
.shoplist a{
  text-decoration: none;
  font-size: 2.4rem;
  font-family: 'Iowan Old Style';
  color: white;
  /* letter-spacing: 0.1em; */
  margin: 0 auto;
  text-align: center;
  display: block;
}
.shoplist p{
  line-height: 50px;
  margin: 0 auto;
}
.shoplist img{
margin-left: 46px;
vertical-align: sub;
}
.shoplist:hover{
opacity: 0.7;
transition: 0.2s;
}

.onlineshop{
  width: 240px;
  height: 50px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  right: 16px;
  bottom: 48px;
}
.onlineshop a{
  text-decoration: none;
  font-size: 2.4rem;
  font-family: 'Iowan Old Style';
  color: black;
  margin: 0 auto;
  text-align: center;
  display: block;
}
.onlineshop p{
  line-height: 50px;
  margin: 0 auto;
}
.onlineshop a:hover{
opacity: 0.5;
transition: 0.2s;
}
.onlineshop:hover{
opacity: 0.8;
transition: 0.2s;
}
.onlineshop img{
/* background-color: green; */
margin-left: 16px;
vertical-align: sub;
}
.slider_center{
  position: relative;
}

body{
  background-image: url(../images/background.jpg);
  background-size: cover;
  background-position: 0 800px;
  background-attachment: fixed;
  background-position: bottom;

}

body::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 140%;
  background: linear-gradient(white 70%, transparent 100%);
  /* transition: 1.5s; */
  z-index: -1;
}
/* body.active::before{
  transform: translateY(-100%);
} */


header{
  background-color: #fff;

}
#story{
  max-width: 1000px;
  /* background-color: grey; */
  margin: 0 auto;
  margin-top: 24px;
  text-align: center;
}
h2{
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 5.2rem;
  /* background-color: pink; */
  margin-bottom: 56px;
  text-align: center;
  letter-spacing: 0.1rem;

}
#story p{
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8rem;
  line-height: 4.68rem;
  /* background-color: blue; */
  letter-spacing: 0.1rem;
}
#story img{
  width: 100%;
  margin-bottom: -5px;
}
.flex3retsu{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 120px;
}
.flex3retsu p{
  width: 32.5%;
}
#concept h2{
  text-align: center;
  margin-top: 168px;
  margin-bottom: 168px;
  line-height: 3;
}
.sp_concept_1{
  display: none;
}
.migiyose{
  width: 90%;
  margin: 0 0 0 auto;
  background-image: url(../images/concept_1.jpg);
  background-size: cover;
  background-position: right;
  padding: 88px 0;
  background-color: white;
}
.sp_return{
  display: none;
}
h3{
  font-size: 3.2rem;
  line-height: 5.2rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  margin-bottom: 40px;
}
.migiyose p{
  line-height: 4.68rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8rem;
}
.migiyose_text_p{
  width: 90%;
  /* background: blue; */
}
.link_botan{
  margin-top: 40px;
  background-color: white;
  width: 293px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  letter-spacing: 0.2rem;
}
.link_botan p a{
  font-size: 1.8rem;
  text-decoration: none;
  color: #000;
  line-height: 5rem;
  display: block;

}
.link_botan:hover{
opacity: 0.7;
transition: 0.2s;
}
.link_botan p a:hover{
opacity: 0.6;
transition: 0.2s;
}

.out_botan{
  margin-top: 8px;
  background-color: #B19A6F;
  width: 293px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  letter-spacing: 0.1rem;
}
/* .out_botan p{
display: block;
} */
.out_botan p a{
  text-decoration: none;
  color: #fff;
  font-size: 1.8rem;
  display: block;
}
.out_botan a:hover{
opacity: 0.9;
transition: 0.2s;
}
.out_botan:hover {
  opacity: 0.7;
  transition: 0.2s;
}
.textbox{
  /* background-color: blue; */
  width: 46%;
  margin: 0 0 0 auto;
  padding-right: 32px;
}
.link_botan img{
  margin-left: 16px;
}
.out_botan img{
  margin-left: 16px;
}
.sp_concept_3{
  display: none;
}
.hidariyose{
  /* width: 90%; */
  background-image: url(../images/concept_3.jpg);
  background-size: cover;
  background-position: right ;
  padding: 88px 0;
  margin: 96px 0;
}
.hidariyose p{
  font-size: 1.8rem;
  line-height: 4.68rem;
  font-family: 'Noto Serif JP', serif;
}
.textbox_left{
  width: 50%;
  margin-left: 11%;
}
.sp_concept_2{
  display: none;
}

.migiyose2{
  width: 90%;
  margin: 0 0 0 auto;
  background-image: url(../images/concept_2.jpg);
  background-size: cover;
  background-position: right;
  padding: 88px 0;
  margin-bottom: 96px;
}
.migiyose2 p{
  font-size: 1.8rem;
  line-height: 4.68rem;
  font-family: 'Noto Serif JP', serif;
}
.texyle_p{
	margin-bottom: 44px;
}


#products h2{
  margin: 64px 0;
}

.products_tea {
position: relative;
overflow: hidden;
max-width: 1000px;
height: 320px;
margin: 0 auto;
margin-bottom: 8px;
}
.products_tea:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../images/products_tea.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.products_tea:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.products_tea a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff;
font-size: 3.4rem;
font-family: 'Iowan Old Style';
letter-spacing: 0.5rem;
}




.products_goods{
position: relative;
overflow: hidden;
max-width: 1000px;
height: 320px;
margin: 0 auto;
}
.products_goods:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../images/product_goods_.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.products_goods:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.products_goods a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #000;
font-size: 3.4rem;
font-family: 'Iowan Old Style';
letter-spacing: 0.2rem;
}





.background_white{
  background-color: #fff;
}

.date_event{
  display: flex;
  margin: 0 auto;
  width: 50%;
  border-bottom: 1px solid #ccc;

}
.date_event p{
  line-height: 2.3rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  margin-top: 10px;
  margin-bottom: 10px;
  /* background-color: blue; */
  /* width: 100%; */
}
.date{
  width: 30%;
  /* background-color: skyblue; */
  letter-spacing: 0.1rem;
}
.event{
  width: 70%;
  /* background-color: blue; */
  letter-spacing: 0.1rem;
}
#news{
  margin: 192px 0;
}
.onlineshop_footer{
  background-color: #B19A6F;
  width: 400px;
  height: 60px;
  text-align: center;
  border-radius: 4px;
  letter-spacing: 0.1rem;
margin: 0 auto;
display: block;
  }
  .onlineshop_footer p{
    display: block;
  }
  .onlineshop_footer p a{
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 1.8rem;
  }
  .onlineshop_footer p a img{
vertical-align: -9px;
  }

  .onlineshop_footer a:hover{
opacity: 0.9;
transition: 0.2s;
  }
  .onlineshop_footer:hover{
opacity: 0.7;
transition: 0.2s;
  }
  .shop_footer{
    letter-spacing: 0.2rem;
    font-family: 'Iowan Old Style';
    margin: 0 auto;
    /* display: flex;
    justify-content: center; */
    line-height: 6rem;
    /* color: white; */
  }
  .shop_footer img{
    margin-left: 8px;
}
.mail{
  border: solid 1px #000;
  width: 400px;
  height: 60px;
  text-align: center;
  border-radius: 4px;
margin: 8px auto;
  }
  .mail_{
    letter-spacing: 0.2rem;
    font-family: 'Noto Serif JP', serif;
    margin: 0 auto;
    display: flex;
    align-items: center;
    line-height: 6rem;
    display: block;
  }
  .mail_ img{
    margin-left: 16px;
    vertical-align: -8px;
}
.mail_ a{
  font-size: 1.8rem;
  text-decoration: none;
  color: #000;
  display: block;
}
.mail_ a:hover{
  background-color: #D8CEB9;
  color: #fff;
  border-radius: 4px;
  transition: 0.2s;
}
.mail:hover{
  border: solid 1px #D8CEB9;
  transition: 0.2s;
}
.mail_ a:hover img{
  filter: brightness(0.7) invert(1);
  display: inline-block;
  transition: 0.2s;
}
.footer_botan{
  padding-bottom: 96px;
  margin-bottom: 96px;
}
footer p{
  text-align: center;
}
.footer_icon{
  margin: 128px 0;
}
small{
  font-size: 1.3rem;
  display: inline-block;
  margin: 0 auto;
}
footer{
  text-align: center;
margin-bottom: 16px;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.1rem;
}

/* ここからteaのcssスタート_pc */

.slider_center{
  position: relative;
}
.tea_top_sp{
  display: none;
}

.tea_apeal{
  position: absolute;
  top: 160px ;
  left: 10%;
  max-width: 1300px;
}
.tea_h1{
  font-size: 5.6rem;
  font-family: 'Iowan Old Style';
  width: inherit;
}
.gold{
  color: #B19A6F;
}
.tea_h2{
  text-align: left;
  margin-bottom: inherit;
}
.recommend{
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.recommend h2{
  margin-top: 176px;
  margin-bottom: 72px;
}
.title_abc{
  font-family: 'Iowan Old Style';
  letter-spacing: 0;
}
.t1{
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.t1 p img{
  margin-right: 24px;
}
.t2{
  width: 53%;
  height: 20%;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 1.4rem;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.1rem;
  margin-top: 35px;
  line-height: 1.8;
  padding: 24px;
  text-align: justify;
text-justify: inter-ideograph;
}
.title_line{
  border: 1px solid #000;
  border-right: none;
  border-left: none;
  margin-bottom: 16px;
  line-height: 48px;
}
.small{
  font-size: 1.3rem;
  margin-top: 16px;
}
.tea_flex1{
  display: flex;
  justify-content: center;
}
.spec{
  /* background-color: pink; */
  width: 80%;
  position: absolute;
  bottom: 48px;
  left: 60%;
  transform: translateX(-60%);
  letter-spacing: 0.1rem;
  /* line-height: 1.8; */
}
.img_center{
  text-align: center;
}
.tea_box, .tea_pack{
  width: 50%;
  height: 500px;
  margin: 0 8px;
  border-radius: 8px;
  border: 2px solid #B19A6F;
  font-size: 1.6rem;
  font-family: 'Noto Serif JP', serif;
  position: relative;
}
.tea_box{
  padding-top: 84px;
}
.tea_pack{
  padding-top: 24px;
}
.onlineshop_footer{
  margin-top: 88px;
}
.howto{
  background-color: rgba(201, 166, 160, 0.2);
  padding-top: 64px;
}
.h2r{
  display: none;
}
.howto h3{
  font-size: 2.4rem;
  text-align: center;
}
.howto img{
  border-radius: 3%
}
.howto ol li{
  font-size: 1.8rem;
  font-family: 'Noto Serif JP', serif;
  list-style: none;
  letter-spacing: 0.1rem;
  text-align: justify;
text-justify: inter-ideograph;
}
.howto_hot ol li p{
width: 90%;
}
.howto_ice ol li p{
width: 90%;
}
.hot_ice{
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  max-width: 850px;
}
.icedimage{
  width: 100%;
}
.howto_hot{
  width: 50%;
  margin-right: 16px;
}
.hotimage{
  width: 100%;
}
.howto_ice{
  width: 50%;
  margin-left: 16px;
}
.howto_hot ol, .howto_ice ol{
margin-top: 32px;
margin-bottom: 64px;
}
ol li{
  display: flex;
  align-items: flex-start;
  line-height: 1.8;
  margin-bottom: 16px;
}
ol li img{
margin-right: 8px;
padding-top: 2.5px;
}
ol{
  width: 95%;
  margin: 0 auto;
}
.nav_left {
  scroll-behavior: auto;
}



/* ここからgoodsのcssスタート_pc */

.goods_flex1{
  display: flex;
  justify-content: center;
}
.goods_flex1 img{
	width: 85%;
	margin-top: 48px;
}
/* .spec{
  width: 80%;
  position: absolute;
  bottom: 48px;
  left: 53%;
  letter-spacing: 0.1rem;
} */

.poach_pink, .poach_white, .poach_black{
  width: 33%;
  height: 500px;
  margin: 0 8px;
  border-radius: 8px;
  border: 2px solid #B19A6F;
  font-size: 1.6rem;
  font-family: 'Noto Serif JP', serif;
  position: relative;
}
@media only screen and (max-width : 1180px) {
  body::before{
    background: none;
  }
  body{
    background-image: none;
  }
  .slider_left{
    opacity: 0;
  }

}
/* タブレットを縦にしたとき */
@media only screen and (max-width : 1000px) {

.slider{
  height: 400px;
}
.slider img{
height: 400px;
width: 100%;
}

}
@media only screen and (max-width : 1024px) {

  html { font-size: 55.5%;
  }
  .flex3retsu{
  width: 90%;
  margin: 0 auto;
  margin-top: 72px;
  }


  .flex3retsu p{
  width: 49.5%;
  }
  /* .flex3retsu p img{
width: 90%;
  } */
  body::before{
    height: 130%;
  }
  #story{
    margin-top: 0;
  }
  .migiyose{
/* background-position: -200px; */
width: 100%;
}
  .migiyose2{
    background-position: left;
    width: 100%;
}
.textbox_left {
margin-left: 8%;
}
.textbox{
  margin-right: 5%;
  padding-right: 0;
}
h1 h2 h3{
  font-size: 28px;
}
.migiyose p, .migiyose2 p, .hidariyose p{
  line-height: 2;
}
.migiyose p a, .migiyose2 p a, .hidariyose p a{
  line-height: 5.5rem;
}
.shop_footer{
  line-height: 7rem;
}
.footer_logo{
	width: 200px;
}

/* ▼▼▼▼▼▼▼▼ここからteaのcss▼▼▼▼▼▼▼▼ */
.tea_h1{
  font-size: 4.5rem;
  margin-top: -16px;
}
.tea_h2{
  font-size: 2.1rem;
  line-height: 4.3rem;
  /* text-align: center; */
}
.tea_apeal{
  width: 85%;
}
.t1 img{
  display: none;
}
.t1 p{
  /* margin-left: 50px; */
}
.t2 p{
  font-size: 1.6rem;
  line-height: 1.8;
}
.small{
  display: none;
}
.brnone{
  display: none;
}
.t2{
  padding: 16px;
}
.tea_flex1 img{
	width: 100%;
}


/* ▼▼▼▼▼▼▼▼ここからgoodsのcss▼▼▼▼▼▼▼▼ */

.poach_pink, .poach_white, .poach_black{
	height: 400px;
}

@media only screen and (max-width:768px) {


.migiyose{
background-position: -400px;
}
#story {
    padding-top: 90px;
}
}
@media only screen and (max-width:599px) {

  .btn{
    display: block;
  }

	.menu-list, .menu-list_box02, .menu-list_box01{
		width: 60%;
		height: 60px;
		/* メニューテキスト位置をリスト内中心に */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22px;
		color: #fff;
	}
	.menu-list a{
		color: #FFF;
	}
	.menu-list_box01{
	background-color: #B19A6F;
	color: #FFF;
	border-radius: 12px;
	height:48px;
	line-height: 48px;
  margin-top: 32px;
	}
  .menu-list_box01 a{
color: white;
}
	.menu-list_box02{
	background-color: #FFF;
	color: #000;
	border-radius: 12px;
	height:48px;
	line-height: 48px;
  margin-top: 8px;
  margin-bottom: 40px;
	}
	.menu-list_box02 img, .menu-list_box01 img{
	vertical-align: -9px;
	margin-left: 8px;
	}

	.menu {
		/* メニューの位置マイナス指定で画面外に */
		position: fixed;
		right: -100%;
		width: 100%;
		height: 100vh;
		/* メニューを縦に */
		display: flex;
		flex-direction: column;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.9);
		transition: .2s;
		z-index: 10000;
		/* background: pink; */
		padding: 72px 0;

	}
	.menu-list_box02, ..menu-list_box01{
		margin: 40px 0;
	}
	.btn {
		/* ボタンの配置位置  */
		position: fixed;
		top: 12px;
		right: 16px;
		/* ボタンの大きさ  */
		width: 30px;
		height: 48px;
		/* 最前面に */
		z-index: 10001;
		/* background-color: red; /* わかりやすいように */
	}
	/***** 真ん中のバーガー線 *****/
	.btn-line {
		display: block;
		position: relative;  /* バーガー線の位置基準として設定 */
		width: 100%;  /* 線の長さと高さ */
		height: 1px;
		background-color: #000;  /* バーガー線の色 */
		transition: .2s;
	}
	/****** 上下のバーガー線 *****/
	.btn-line::before,
	.btn-line::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		right: 0;
		background-color: #000;
		transition: .5s;
	}
	.btn-line::before {
		/* 上の線の位置 */
		transform: translateY(-12px);
	}
	.btn-line::after {
		/* 下の線の位置 */
		transform: translateY(12px);
	}
	.menu.open {
		right: 0;
	}
	/***** メニューオープン時 *****/
	.btn-line.open {
		background-color: transparent;  	/* 真ん中の線を透明に */
	}
	.btn-line.open::before ,
	.btn-line.open::after {
		content: "";
		background-color: #333;  /* 上下の線の色を変える */
		transition: .2s;

	}
	.btn-line.open::before {
		transform: rotate(45deg);  /* 上の線を傾ける */
	}
	.btn-line.open::after {
		transform: rotate(-45deg);  /* 下の線を傾ける */
	}


	/* <!-- ▲▲▲▲▲▲▲ SP用ハンバーガー▲▲▲▲▲▲▲ --> */
 .top_bar
{
  z-index: 2;
}

  h1{
    margin-top: 4px;
  }
.nav_left{
  display: none;
}
.nav_right{
  display: none;
}
.slider_left, .slider_right{
display: none;
}
.slider_center{
  width:100%;
  /* margin-top: -100px; */

}
.slider li a img{
  display: block;
  /* margin-left: -90px; */
}
.slider img
{
  margin-left: -40px;
}


/* // 最新のsafari用 */
_::-webkit-full-page-media, _:future, :root .slider li a img{
	/* margin-left: -80px; */
}
/* // 古いsafari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome,
	.slider li a img {
		/* margin-left: -80px; */
	}
}

.slider_flex{
  padding-top: 68px;
}
.onlineshop, .shoplist{
  display: none;
}
.slider{
height: 40vh;
overflow: hidden;
}
.slider img{
  height: 40vh;
  width: 100%;
  margin: 0 auto;
}



#story{
  display: block;
    padding-top: 80px;
    margin-top: -46px;
}

/* #story{
  margin-top: 0;
  padding-top: 24px;
} */
h2{
  font-size: 21.312px;
  line-height: 1.6;
  margin-bottom: 40px;
}
#concept h2{
  margin: 56px 0;
}
h3{
  font-size: 21.312px;
  line-height: 1.6;
}
#story p{
  line-height: 2em;
}
.sp_concept_1{
  display: block;
}
.sp_concept_1 img{
  width: 100%;
}
.migiyose{
  background: none;
  padding: 24px 0;
  margin-bottom: 24px;
  width: 100%
}
.migiyose p{
  font-size: 1.7rem;
}
.sp_concept_1 img{
  height: 230px;
object-fit: cover;
}
.textbox, .textbox_left{
  width: 92%;
  margin: 0 auto;
  padding-right: 0;
  text-align: center;
}
.link_botan, .out_botan {
  margin: 0 auto;
}
.link_botan{
  background: #F0ECE6;
  margin-bottom: 8px;
  width: 70%;
}
.out_botan{
  width: 70%;
}
.out_botan p a{
  line-height: 5.2rem;
}
.migiyose p, .hidariyose p, .migiyose2 p{
  margin-bottom: 40px;
}
.hidariyose{
  background: none;
}
.hidariyose p{
  font-size: 1.7rem;
}

h3{
  margin-bottom: 16px;
}
.sp_concept_3{
display: block;
}
.sp_concept_3 img{
  width: 100%;
}
.migiyose2{
  background: none;
  width: 100%;
}
.migiyose2 p{
  font-size: 1.7rem;
}

.sp_return{
  display: block;
}
.migiyose_text_p{
  width: 100%;
}
.sp_concept_2{
display: block;
}
.sp_concept_2 img{
  width: 100%;
}
.hidariyose{
  padding: 48px 0;
  margin: 0;
  padding: 24px 0;
  margin-bottom: 24px;
}
/* .textbox_left br{
display: none;
} */
/* .hidariyose p{
margin-bottom: 40px;
} */
.migiyose2{
  padding: 40px 0;
  padding: 24px 0;
}
#products{
  padding-top: 8px;
}
.products_tea, .products_goods{
  pointer-events: none
}
.products_tea{
  margin-bottom: 0;
  position: relative;
}
.products_tea::after{
  filter: brightness(50%);
}
.products_goods::after{
  filter: opacity(80%);
}
.products_tea a, .products_goods a{
  display: none;
}
.sp_products_tea, .sp_products_goods{
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* -webkit- transform: translateY(-50%) translateX(-50%); */
  text-align: center;
  letter-spacing: 0.1rem;
  width: 55%;
  /* background: pink; */
}
.products_teat, .products_goodst{
    top: 0;
    font-size: 2.8rem;
    font-family: 'Iowan Old Style';
}
.products_teat{
  letter-spacing: 0.6rem;
}
.products_teap, .products_goodsp{
    top: 10px;
    z-index: 9999;
    font-size: 1.4rem;
    font-family: 'Noto Serif JP', serif;
    margin-top : 16px;
    margin-bottom : 24px;
    overflow-wrap: normal;
}
.products_teal, .products_goodsl{
    top: 100px;
    z-index: 9999;
    background-color: #fff;
    color:#000;
    width: 100%;
    height:50px;
    line-height: 50px;
    pointer-events: auto;
}
.products_teal a, .products_goodsl a{
color: #000;
display: block;
font-size: 1.6rem;
font-family: 'Noto Serif JP', serif;
pointer-events: inherit;
letter-spacing: 0.1rem;
}
.products_tea a{
  /* letter-spacing: 0.1rem; */
}
.products_goodst, .products_goodsp{
  color: #000;
}
#news{
  margin-bottom: 88px;
  padding-top: 120px;
  margin-top: -36px;
}
.date_event{
  width: 92%;
}
.onlineshop_footer{
  width: 70%;
}
.mail{
  width: 70%;
}
.mail_{
  line-height: 6.4rem;
}
.footer_logo{
  width: 200px;
}
.footer_icon{
  margin: 68px ;
}
.footer_botan{
  margin-bottom: 0;
}
/* ▼▼▼▼▼▼▼ここからteaのcss▼▼▼▼▼▼▼ */
.tea_apeal{
  width: 100%;
  position: inherit;
  display: block;
}
.slider_flex{
  display: block;
}
.tea_top_pc{
  display: none;
}
.tea_top_sp{
  display: block;
  width: 100%;
}
h1{
  text-align: center;
  position: relative;
  color: #555;
}
.tea_h1{
  font-size: 3.8rem;
  margin-top: 0;
}
.tea_h2{
  position: absolute;
  top: 110px;
  text-align: center;
  left: 50%;
transform: translateX(-50%);
width: 95%;
/* font-size: 21.312px; */
line-height: 3.6rem;
letter-spacing: 0.2rem;
}
.brnone{
  display: block;
}
.t2{
  width: 92%;
  padding: 0;
  margin: 0 auto;
}
.title_line{
  margin-top: 24px;
border: none;
}
.title_line::before{
content: "■";
}
.t2 p{
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  text-align: justify;
text-justify: inter-ideograph;
}
.recommend h2{
  margin-top: 64px;
  margin-bottom: 40px;
}
.tea_flex1{
  display: block;
}
.tea_box, .tea_pack{
  width: 100%;
  margin: 0;
}
.tea_box img, .tea_pack img{
  width: 100%
}

.tea_box{
  padding-top: 64px;
  margin-bottom: 8px;
}
.spec{
  font-size: 15px;
  line-height: 1.8;
	/* left: 10%; */
  width: 90%;
}
.onlineshop_footer{
  margin-top: 40px;
}

.hot_ice{
  display: block;
}
.howto_hot, .howto_ice{
  width: 100%;
  margin-left: 0;
}
.howto{
  padding-bottom: 1px;
}
ol{
  width:  100%;
  margin: 0 auto;
  text-align: justify;
text-justify: inter-ideograph;
}

/* ▼▼▼▼▼▼▼▼ここからgoodsのcss▼▼▼▼▼▼▼▼ */
.slider_center img{
	object-fit: cover;
	/* object-position: right; */
}
.goods_top_pc{
	display: block;
}
.goods_flex1{
	display: block;
}
.poach_pink, .poach_white, .poach_black{
	width: 100%;
	height: 450px;
	margin: 0;
}
.poach_white{
	margin: 8px 0;
}
.goods_flex1 img{
width: 80%;
margin-top: 18px;
}
.goods_h2{
width: 95%;
letter-spacing: 0.2rem;
margin-bottom: 0;
}
}
@media only screen and (max-width:321px) {
h2,h3{
  font-size: 22px;
}
.h2r{
  display: block;
}
.tea_box, .tea_pack{
height: 460px;
}
.menu-list, .menu-list_box{
  /* padding: 6px; */
}
.menu-list_box{
  height:  40px;
}
.slider img
{
  /* margin-left: -60px; */
}
}
/* sp横画面 */
@media only screen and (max-height:414px) {
  .slider{
    height: 70vh;
  }
  .slider img{
    height: 70vh;
    width: 100%;
    margin-left: 0;
  }

.tea_h1{
  margin-top: -24px;
  font-size: 28px;
}
.tea_h2{
  line-height: 1.4;
}
.t2 p{
  font-size: 15px;
  line-height: 1.6;
}
.t2{
  width: 60%;
  margin-top: 16px;
}
.title_line{
  margin-bottom: 8px;
}
}
/* 320px横画面 */
@media only screen and (max-height:321px) {
.slider{
  height: 70vh;
}
.slider img{
  height: 70vh;
  width: 100%;
  margin-left: 0;
}
.menu{
  padding: 0;
}
.menu-list{
  font-size: 18px;
  height: 45px;
}
.menu-list_box{
  margin: 0;
  height: 32px;
  font-size: 18px;
  width: 40%;
}
.menu-list_box img{
width: 24px;
vertical-align: -4px;
}
.menu-list img{
  width: 24px;
}
.tea_flex1 img{
  width: 70%;

}
.goods_flex1 img{
width: 60%;
/* margin-top: 18px; */
}

}