@charset "UTF-8";
* {
  box-sizing: border-box;
}

html,
body {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
  color: #021b44;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

a {
  color: #021b44;
  text-decoration: none;
}

h1 {
  text-align: center;
  font-size: 3rem;
}

h3 {
  margin: 4rem 0;
  padding: 10px 0 0;
  text-align: center;
  /*font-family: "EB Garamond", serif;*/
  font-family: roboto,sans-serif;
  font-weight: 500;
  font-size: 5rem;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.wrap {
  overflow: hidden;
}

.box-btl img.btlimg {
  text-align: center;
  width: 8%;
}

.btn_border,
.limitedBlock_btn,
.lineupBlock_btn,
.breweryBlock_btn,
.onlinestoreBlock_btn,
.storeBlock_btn {
  display: block;
  position: relative;
  border: 1px solid #021b44;
  padding: 20px;
  font-size: 22px;
  text-align: center;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all  1.5s ease;
}

.btn_border:hover,
.limitedBlock_btn:hover,
.lineupBlock_btn:hover,
.breweryBlock_btn:hover,
.onlinestoreBlock_btn:hover,
.storeBlock_btn:hover {
  display: block;
  position: relative;
  border: 1px solid #021b44;
  padding: 20px;
  font-size: 22px;
  text-align: center;
  background-color: #e1dcc5;
}


.btn_border .material-icons,
.limitedBlock_btn .material-icons,
.lineupBlock_btn .material-icons,
.breweryBlock_btn .material-icons,
.onlinestoreBlock_btn .material-icons,
.storeBlock_btn .material-icons {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 30px;
}

.sp {
  display: none !important;
}

.pc {
  display: block !important;
}

@media only screen and (max-width: 750px) {
  img {
    max-width: 100%;
  }
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

@media (max-width: 640px) {
  .btn_border .material-icons,
  .limitedBlock_btn .material-icons,
  .lineupBlock_btn .material-icons,
  .breweryBlock_btn .material-icons,
  .onlinestoreBlock_btn .material-icons,
  .storeBlock_btn .material-icons {
    right: 10px;
  }
}

@media (max-width: 640px) {
  .btn_border,
  .limitedBlock_btn,
  .lineupBlock_btn,
  .breweryBlock_btn,
  .onlinestoreBlock_btn,
  .storeBlock_btn {
    font-size: 1.8rem;
    padding: 10px;
  }

  .btn_border:hover,
  .limitedBlock_btn:hover,
  .lineupBlock_btn:hover,
  .breweryBlock_btn:hover,
  .onlinestoreBlock_btn:hover,
  .storeBlock_btn:hover {
    background-color: #e1dcc5;
  }
}


.btn-common {
  display: inline-block;
  border-radius: 3px;
  padding: 1rem 2rem;
  background: #021b44;
  color: #fff;
}

.btn-common.btn-frame {
  background: #fff;
  border: 1px solid #021b44;
  color: #021b44;
}

.underline {
  text-decoration: underline;
}

.scroll-fade {
  opacity: 0;
  transform: translate(0, 45px);
  transition: all 800ms;
}

.scroll-fade.active {
  opacity: 1;
  transform: translate(0, 0);
}

#page {
  margin: 0 auto;
  padding: 0;
}

#page p {
  margin: 0.8rem 0;
  text-align: center;
  line-height: 1.7;
}

#brewery p {

  text-align: left;

}

/*
@media (max-width: 640px) {
    #main {
        height: 130vh;
    }
}
*/
.link-scrollWrap {
  position: relative;
  margin: 120px auto 20px;
}

#link-scroll span {
  position: absolute;
  display: block;
  box-sizing: border-box;
  bottom: 48px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #021b44;
  border-bottom: 1px solid #021b44;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: act 1.5s infinite;
  animation: act 1.5s infinite;
}


@-webkit-keyframes act {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-24px, 24px);
    opacity: 0;
  }
}

@keyframes act {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-24px, 24px);
    opacity: 0;
  }
}

/* ++スライドショー+++++++++++++ */
.main_slide {
  width: 94%;
  height: 0;
  margin: 0 auto;
  padding-bottom: 48.5%;
  position: relative;
  background-size: contain;
  z-index: 1000;
}

.main_slide img {
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  transition: all 4s ease-in-out;
  width: 100%;
  height: auto;
}

.main_slidesp {
  display: none;
}

@media (max-width: 750px) {
  .main_slidesp {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 150%;
    position: relative;
    background-size: contain;
    z-index: 1000;
  }
  .main_slidesp img {
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    transition: all 4s ease-in-out;
    width: 100%;
    height: auto;
  }
  .main_slide {
    display: none;
  }
}

/*=== 買えるお店 ================================= */
.buy_btnsBlock {
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .buy_btnsBlock {
    display: block;
  }
}

.buy_btnsBlock .buy_btns {
  width: 300px;
  margin: 0 10px 80px;
}

@media (max-width: 640px) {
  .buy_btnsBlock .buy_btns {
    width: 90%;
    margin: 10px 5%;
  }
}

/*=== 新製品エリア ================================= */
.n_productBlock {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.n_productBlock h2 {
  padding: 50px 10px 20px;
  font-size: 2.6rem;
}

.n_productBlock_ttl img {
  width: 100%;
  max-width: 765px;
  margin: 10px auto;
}

.n_productBlock_txt {
  margin: 40px auto;
}

.badge_new {
  display: inline-block;
  padding: 0 3px;
  margin: 10px 10px 0;
  width: 60px;
  background: #cc0001;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}


/*=== 共通テキストサイズ================================= */

#lead .lead_catch {
  font-size: 1.3em !important;
  font-weight: normal;
  color: #021b44;
}

.lead_catch {
  padding-top: 70px;
  font-size: 1.3em !important;
  font-weight: normal;
  color: #021b44;
  text-align: center;
}

.hl_catch {
  margin: 5rem 0 !important;
  font-size: 3rem !important;
  line-height: 1.75 !important;
  font-weight: bold;
}


@media (max-width: 750px) {


  .hl_catch {
    font-size: 2.5rem !important;
    padding-top: 30px !important;
  }

}


/*=== リード ================================= */
#lead {
  width: 100%;
  margin: 50px auto;
  padding: 50px 0;
}

#lead .lead_catch {
  font-size: 1.3em !important;
}

.lead_logo {
  margin: 50px auto;
  text-align: center;
}

@media (max-width: 750px) {
  
  #lead{
    margin: 0 auto ;
    padding: 0 ;
    }
  
  #lead .lead_catch {
      font-size: 1.2em !important;
      margin-top: 200px !important;
      margin-bottom: 50px !important;
    }
  
  #concept .lead_catch {
      font-size: 1em !important;
      margin-top: 0px !important;
    }

    #aboutus .lead_catch {
      font-size: 1em !important;
      margin-top: 30px !important;
    }

  #brewery .lead_catch {
      font-size: 1em !important;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
    }
  
  .lead_logo {
    margin: 30px auto;
  }
}


.lead_logo img {
  width: 100%;
  max-width: 454px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .lead_logo img {
    max-width: 300px;
  }
}

/*=== ENGLISH ボタン ================================= */
.lang_btn{
  position: fixed;
  top: 30px;
  right: 45px;
  z-index: 10000;
  margin: 0;
  border: solid 2px #021b44;
  padding: 0px 5px;
  margin-top: 5px;
}

.lang_btn a{
font-size: 14px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #021b44;
}


@media (max-width: 750px) {
  .lang_btn{
    top: 2px;
    right: 40px;
    border: none;
  }
  .lang_btn a{
    font-size: 12px;
    }
}


/*=== 固定SNSアイコン ================================= */
.sns{
  position: fixed;
  top: 100px;
  left: 40px;
  margin: 0;
}

.sns-center{
margin-left: 10px;
}

.sns li{
  width: 80px;
  list-style: none;
}
.sns img{
width: 50px;
height: auto;
z-index: 1000;
}

@media (max-width: 750px) {
  .sns{
    top: 50px;
    left: 0px;
  }
  .sns img{
    width: 30px;
    z-index: 100;
    }
}

/*=== オンライン限定販売 ================================= */
.limitedBlock {
  margin: 150px auto 50px;
  max-width: 1000px;
  text-align: center;
  position: relative;
}

@media (max-width: 640px) {
  .limitedBlock {
    margin: 30px auto;
  }
}

.limitedBlock_pricetxt {
  font-size: 28px;
}

.limitedBlock_ttl {
  text-align: center;
  width: 100%;
  background: url(../ja/img/limitted_ttl_bg.png);
}

.limitedBlock_ttl img {
  max-width: 530px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .limitedBlock_ttl img {
    width: 98%;
  }
}

.limitedBlock_img {
  text-align: center;
  margin: 30px auto 0;
}

.limitedBlock_img img {
  width: 100%;
  /* max-width: 1000px; */
  margin: 0 auto;
}

.limitedBlock_btn {
  width: 400px;
  margin: 20px auto;
}

.limitedBlock_txt span.newtxt {
  font-size: 1em;
  font-weight: bold;
  color: #b21d23;
}

.limitedBlock_txt span.newtxt a {
  font-size: 1em;
  font-weight: bold;
  color: #b21d23;
  text-decoration: underline;
}

@media (max-width: 640px) {

  .limitedBlock_img img {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
  }
  

  .limitedBlock_btn {
    width: 90%;
  }
  .limitedBlock_txt span.newtxt {
    font-size: 1em;
    font-weight: bold;
    color: #b21d23;
  }
  .limitedBlock_txt span.newtxt a {
    font-size: 1em;
    font-weight: bold;
    color: #b21d23;
    text-decoration: underline;
  }
}

.limitedBlock_subcatch {
  margin: 5rem 0 !important;
  font-size: 2.5rem !important;
  line-height: 1.75 !important;
}


@media (max-width: 640px) {
  .limitedBlock_subcatch {
    padding-top: 3rem;
    text-align: center !important;
  }
}

.badge_date {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #3f4b65;
  text-align: center;
  color: #fff846;
  padding-top: 45px;
  font-size: 28px;
}

.badge_date span {
  color: #fff;
  font-size: 16px;
  display: block;
}

.badge_txt {
  position: absolute;
  top: 0;
  right: 50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #3f4b65;
  background: #fff;
  text-align: center;
  padding-top: 42px;
  font-size: 18px;
  z-index: 2;
}

@media (max-width: 640px) {
  .badge_txt {
    position: static;
    margin: 0 auto;
  }
}

.shopitemList {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.shopitemList li {
  width: 30%;
  margin: 0 1.5%;
}

.shopitemList li img {
  width: 100%;
}

@media (max-width: 640px) {
  .shopitemList li {
    width: 97%;
  }
  .shopitemList li img {
    width: 96%;
    margin: 10px 2%;
  }
}

/*=== タイトル上部調整 ================================= */

section#news{
padding-top: 70px;
}

section#concept{
padding-top:70px ;
padding-bottom: 100px;
}

section#aboutus{
padding-top:70px ;
padding-bottom: 100px;
}

section#lineup{
padding-top:70px ;
padding-bottom: 100px;
}

section#store{
padding-top:70px ;
padding-bottom: 100px;
}

section#access{
padding-top:70px ;
padding-bottom: 100px;
}

/*=== NEWS ================================= */

#news {
  background: #f7f5f1;
  padding: 50px 20px 50px;
  text-align: center;
}

@media (max-width: 640px) {
  #news {
    padding: 10px 20px;
  }
}

.newsList {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.newsList_item {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
  padding: 10px 0;
  border-bottom: dashed 1px #ccc;
}

@media (max-width: 640px) {
  .newsList_item {
    display: block;
    margin: 10px 20px;
  }
}

.newsList_item_date {
  width: 100px;
  font-size: 1.4rem;
  text-align: left;
}

.newsList_item_ttl {
  color: #a47d30;
  font-size: 1.6rem;
  text-align: left;
}

.newsList_item_ttl img {
  width: 100%;
  margin: 7px 0 0;
}

/*=== concept ================================= */

#concept {
    text-align: center;

}
.conceptBlock_img {
  margin: 0 auto;
  text-align: center;
}

.conceptBlock_img img {
  width: 94%;
  left: 3%;
  position:relative;
}

.conceptBlock_ttl {
  text-align: center;
  font-size: 3.1rem;
  margin-top: 50px;
}

.conceptBlock_txt {
  padding-top: 20px;
}

.movie {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  aspect-ratio: 16 / 9;
}

.movie iframe {
  width: 100%;
  height: 100%;
}

/*=== ラインアップ ================================= */

#lineup hr{
  border-style: none;
  border-top: 2px solid #021b44;
}

.mark_seasonal img{
width: 20%;
float: left;
margin-top: 3%;
margin-left: 3%;
margin-right: 0%;
}

.mark_seasonal_en img{
  width: 20%;
  float: left;
  margin-top: -0.8%;
  margin-bottom: 0;
  margin-left: 5px;
  margin-right: -10px;
  }

div.beer_style{
  width: 100%;
  margin: 0 auto;
}

div.beer_style table{
  /* width: 100%; */
  margin:0 auto;
} 


.beer_style{
  text-align: left !important;
  padding: 1rem 0
  ;

}

div.beer_materials{
  vertical-align: bottom !important;
  display: table;
  width: 100%;
  height: 120px;
  padding: 10px;
  /* margin-top: 20px;
  margin-left: -10px; */
  margin: 0 auto;
}



p.text_left{
  display: table-cell;
  text-align: center !important;
  vertical-align: middle;
  margin-top: 30px;
  font-family: sans-serif;
  font-size: small;
}

.text_extra{
  background-color: #f8f8ff;
  width: 90%;
  margin: 0 auto;
  border:solid 1px #021b44;
  font-family: sans-serif;
}

.text_extra p {
  font-weight: bold;
  padding: 3px;
}

@media (max-width: 900px) {
  .text_extra{
    width: 70%;
  }

}

th.style_name{
  color: #a47d30;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  height: 10px;
  padding: 0 6px 0 6px;
  border: #a47d30 solid 0.5px;
}

td.style_data{
  padding: 0 10px 0 6px;
  font-size: 1.4rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  font-weight: bold;
}

@media (max-width: 900px) {
  #lineup hr{
    width: 80%;
    text-align: center;
  }

  .mark_seasonal img{
    width: 70px;
    float: left;
    margin-top: 1%;
    margin-left: 20%;
    margin-right: -220px;
    }

  .mark_seasonal_en img{
    width: 70px;
    float: left;
    margin-top: -0.8%;
    margin-left: 28%;
    margin-right: -220px;
    }


  div.beer_style{

    padding: 1rem;
    text-align: center;
  }

  div.beer_style table{
    /* width: 100%; */
    margin:0 auto;
  } 

  div.beer_materials{
    margin-top: 0px;
    width: 90%;
    margin:0 auto;
    height: 100px;
  }

  th.style_name{
    font-size: 1rem;
    height: 8px;
    border: #a47d30 solid 0.5px !important;
  }

  td.style_data{
    padding: 0 5px 0 3px;
    font-size: 1.2rem;
  }

  p.text_left{
    display: table-cell;
    text-align: center !important;
  }

}

@media (max-width: 750px) {

  .mark_seasonal img{
    margin-top: 2%;
    margin-left: 15%;
    margin-right: -180px;
    }
  
  .mark_seasonal_en img{
    margin-left: 18%;
    margin-right: -180px;

    }
  

  }

@media (max-width: 640px) {

    .mark_seasonal img{
      margin-left: 8%;
      margin-right: -40px;
      }

    .mark_seasonal_en img{
      width: 65px;
      margin-top: -0.8%;
      margin-left: 10%;
      margin-right: -40px;
      }
  
    
  
    }


  
.lineupBlock {
  padding: 20px 0 50px;
}

.lineupBlock_img {
  text-align: center;
  margin: 0 auto;
}

.lineupBlock_img img {
  /*width: 100%;*/
  width: 94%;
  left: 3%;
  position:relative;
}

.lineupBlock_ttl {
  text-align: center;
  max-width: 600px;
  margin: 30px auto;
}

@media (max-width: 900px) {
  .lineupBlock_ttl img {
    width: 98%;
  }
}

.lineupBlock_point_btn a {
  display: inline-block !important;
  width: 380px !important;
  margin: 20px 150px;
  background: #f7f5f1;
  padding: 10px;
  font-size: 16px;
  text-align: center !important;
}

@media (max-width: 900px) {
  .lineupBlock_point_btn a {
    display: inline-block !important;
    width: 60% !important;
    margin: 5% 10%;
    background: #f7f5f1;
    /* padding: 5%; */
    font-size: 14px;
    text-align: center !important;
  }
}

.lineupBlock_btn {
  width: 640px;
  margin: 20px auto;
}

@media (max-width: 900px) {
  .lineupBlock_btn {
    width: 90%;
  }
}

.lineupSlide {
  width: 90%;
  max-width: 800px;
  padding: 40px;
  margin: 0 auto 30px;
}

@media (max-width: 900px) {
  .lineupSlide {
    width: 94%;
    padding: 20px 2%;
  }
}

.lineupList {
  padding: 20px;
  /*ラインアップ、スライド●●●ドットの位置*/
  min-height: 400px;
}



@media (max-width: 900px) {
  .lineupList {
    min-height: 800px;
  }

  #en .lineupList {
    min-height: 100px;
  }
}


.lineupList_item {
  width: 100%;
}

.lineupList_item a {
  display: flex;
  width: 100%;
}

@media (max-width: 900px) {
  .lineupList_item a {
    flex-wrap: wrap;
  }
}

.lineupList_item_img {
  width: calc(45% - 30px);
  text-align: center;
  margin-right: 30px;
}

@media (max-width: 900px) {
  .lineupList_item_img {
    width: 100%;
    margin-right: 0px;
  }
}

.lineupList_item_img img {
  max-width: 250px;
  height: auto;
  vertical-align: top;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

@media (max-width: 900px) {
  .lineupList_item_img img {
    max-width: 220px;
  }
}

.lineupList_item_txt {
  width: 55%;
  padding: 0 20px 0 0;
}

@media (max-width: 900px) {
  .lineupList_item_txt {
    width: 100%;
    padding: 0 0 0 0;
  }
}


div.lineup_more{
  width: 280px;
  margin-top: -120px;
  margin-left: 50%;
  border:solid 0.5px #021b44;
  padding: 10px 10px 10px 26px;
 
}

div.lineup_teabeer{
  width: 280px;
  margin-top: 10px;
  margin-left: 50%;
  border:solid 0.5px #021b44;
  padding: 10px 10px 10px 20px;
 
}

#en div.lineup_more{
  width: 280px;
  margin-top: -100px;
  margin-left: 50%;
  border:solid 0.5px #021b44;
  padding: 10px 10px 10px 26px;
 
}

#en div.lineup_more a{
  text-align: center;
padding: 0 0 0 40px;

 
}


@media (max-width: 900px) {

  div.lineup_teabeer{
    font-size: 1.4rem;
    width: 250px;
    margin-top: 40px;
    margin: 10px auto;
    padding: 10px 10px 10px 20px;
  }

  div.lineup_more{
    font-size: 1.4rem;
    width: 250px;
    margin-top: 0px;
    margin: 0 auto;
    padding: 10px 10px 10px 26px;
  }

  #en div.lineup_more{
    font-size: 1.4rem;
    width: 250px;
    margin-top: 0px;
    margin: 0 auto;
    padding: 10px 10px 10px 26px;
   
  }
  
}

@media (max-width: 900px) {
}


.lineupList_item_ttl {
  font-family: "EB Garamond", serif;
  font-weight: 600;
  text-align: center;
  /* font-family: "Amarante", cursive; */
  font-size: 3.5rem;
  padding: 5px 5px;
}


@media (max-width: 900px) {
  .lineupList_item_ttl {
    text-align: center;
    font-size: 3rem;
  }
}

.lineupList_item_ttl span {
  display: block;
  font-size: 1.8rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
}

.lineupList_item_detail {
  padding: 10px 5px;
  text-align: left !important;
}

.lineupList_item_detail span {
  font-size: 1.2rem;
  display: block;
}


@media (max-width: 900px) {
  .lineupList_item_detail {
    width: 90% !important;
    line-height: 1.5 !important;
  }
  .lineupList_item_detail span {
    padding-top: 15px;
  }
}


.flickity-page-dots{
left: 1% !important;
}

.flickity-page-dots .dot {
  background: #a47d30;
}

.flickity-prev-next-button.next {
  right: -100px;
}

.flickity-prev-next-button.previous {
  left: -100px;
}

@media (max-width: 900px) {
  .flickity-prev-next-button.next {
    right: 0;
  }
  .flickity-prev-next-button.previous {
    left: 0;
  }

  .flickity-page-dots{
    position: relative;
  }

}

/*=== テイスティングチャート ================================= */
#chart {
  text-align: center;
}

.chart_img {
  width: 100%;
  text-align: center;
}

.chart_img img {
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
}

@media (max-width: 640px) {
  .chart_txt {
    text-align: left !important;
  }
}

/*=== アバウトアス ================================= */

#aboutus {
  background: #f7f5f1;
  padding-top: 50px;
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 640px) {
  #aboutus {
    padding-top: 20px;
    margin-top: 20px;
  }
}

.aboutusBlock_img {
  margin: 0 auto;
  text-align: center;
}

.aboutusBlock_img img {
  /*width: 100%;*/
  width: 94%;
  left: 3%;
  position:relative;
}

.aboutusBlock_ttl {
  text-align: center;
  font-size: 3.1rem;
  margin-top: 50px;
}

.aboutusBlock_txt {
  padding-top: 20px;
}
@media screen and (max-width: 1400px) {

  .aboutusBlock {
    max-width: 1000px;
    margin: 0 auto;
  }

  h4.aboutus_title{
    font-size: 2.8rem;
  }
}


@media (max-width: 1200px) {

  #page p{
  width: 100% !important;
  }

  .aboutusBlock {
    /* display: block; */
    flex-direction: column;
    margin: 0 auto;
    align-items: center;
    width: 100%;
  }
  
  #aboutus .lead_catch{
    line-height: 1.6;
    font-size: 1.2em !important;
    /*padding-top: 0;*/
    padding-bottom: 0;
  }

  h4.aboutus_title{
    font-size: 2.5rem;
    }

  .aboutusBlock_ttl {
    padding: 30px 0;
  }
}

.aboutusBlock_txt {
  text-align: center;
  line-height: 2.2;
}

.aboutusBlock_btn {
  width: 640px;
  margin: 20px auto;
}

@media (max-width: 750px) {
  #page p{
    width: 90% !important;
    }

  h4.aboutus_title{
    font-size: 2.5rem;
    }


  }

@media (max-width: 640px) {

  #aboutus{
    padding: 0;
  }

  .aboutusBlock_btn {
    width: 90%;
  }

  .aboutusBlock {
    width: 100%;
  }

  #aboutus .lead_catch{
    line-height: 1.6;
    font-size: 1em !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  h4.aboutus_title{
    font-size: 4rem;
    }

  .aboutusBlock_ttl {
    padding: 30px 0;
  }

 h4.aboutus_title{
    font-size: 2.5rem;
    }

}


/*=== ブルワリー ================================= */

#brewery {
  background: #f7f5f1;
  padding: 30px 20px 50px;
  text-align: center;
}

.breweryBlock {
  display: flex;
  flex-direction: row;
  margin: auto;
  align-items: center;
  width: 80%;
}

.breweryBlock:nth-child(odd) {
  flex-direction: row-reverse;
}

.breweryBlock_img_left,
.breweryBlock_img_right{
  text-align: center;
  /* width: 90%; */
  margin: 0 auto;
  /* padding: 10px; */
  margin: 20px;
}


.brewery_textbox_r,
.brewery_textbox_l
{
  text-align: left;
  padding: 0px 30px 20px 30px;
}


h4.brewery_title{
font-size: 3rem;
color: #021b44;
/* font-family: "Damion", cursive; */
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;

/* font-family: 'Noto Sans Japanese', sans-serif; */
/* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; */
text-align: center;
}


.breweryBlock_ttl {
  font-size: 2.8rem;
  padding: 80px 0 50px;
  text-align: center;
}


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

  .breweryBlock {
    max-width: 1000px;
    margin: 0 auto;
  }

  .breweryBlock_img_left img,
  .breweryBlock_img_right img{
    width: 600px;
  }

  div.brewery_textbox_r,
  div.brewery_textbox_l{
    width: 600px;
    padding: 10px;
  }

  .breweryBlock_img_right img{
    margin-left: 10px !important;
  }

  div.brewery_textbox_l{
    margin-left: 20px;
  }

  #brewery .lead_catch{
    line-height: 1.6;
    font-size: 1.2em !important;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  h4.brewery_title{
    font-size: 2.8rem;
  }
}


@media (max-width: 1200px) {

  #page p{
  width: 100% !important;
  }

  .breweryBlock {
    /* display: block; */
    flex-direction: column;
    margin: 0 auto;
    align-items: center;
    width: 100%;
  }
  
  .breweryBlock:nth-child(odd) {
    flex-direction: column;
  }

  .breweryBlock_img_left,
  .breweryBlock_img_right{
    padding: 0;
}

  .breweryBlock_img_right img{
    margin-left: 0px !important;
  }

  div.brewery_textbox_l{
    margin-left: 0;
  }


  .brewery_textbox_r,
  .brewery_textbox_l
  {
    text-align: center;
    padding: 0;
    margin-bottom: 10px;
  
  }

  #brewery .lead_catch{
    line-height: 1.6;
    font-size: 1.2em !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  h4.brewery_title{
    font-size: 2.5rem;
    }

    
  .breweryBlock_ttl {
    padding: 30px 0;
  }
}


.breweryBlock_txt {
  text-align: center;
  line-height: 2.2;
}

.breweryBlock_btn {
  width: 640px;
  margin: 20px auto;
}

@media (max-width: 750px) {
  #page p{
    width: 90% !important;
    }

  .breweryBlock_img_left img,
  .breweryBlock_img_right img{
    width: 100%;
  }

  h4.brewery_title{
    font-size: 2.5rem;
    }


  }

@media (max-width: 640px) {

  #brewery{
    padding: 0;
  }

  .breweryBlock_btn {
    width: 90%;
  }

  .breweryBlock {
    width: 100%;
  }

  #brewery .lead_catch{
    line-height: 1.6;
    font-size: 1em !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  h4.brewery_title{
    font-size: 4rem;
    }

  .breweryBlock_img_left img,
  .breweryBlock_img_right img{
    width: 100%;
    margin: 0;
  }
  
  div.brewery_textbox_r,
  div.brewery_textbox_l{
    width: 90%;
  }
    
  .breweryBlock_ttl {
    padding: 30px 0;
  }

 h4.brewery_title{
    font-size: 2.5rem;
    }

}



/*=== オンラインストア ================================= */
#online_store {
  padding: 0 0 30px;
}

#online_store .setimg {
  margin: 0 auto 2%;
  text-align: center;
}

#online_store .setimg img {
  width: 100%;
  max-width: 840px;
}

@media (max-width: 640px) {
  #online_store {
    padding: 0 0 50px;
  }
  /* #online_store .setimg img {
    /* width: 60% 
  } */
}

.onlinestoreBlock {
  text-align: center;
}

.onlinestoreBlock_img {
  text-align: center;
}

.onlinestoreBlock_img img {
  width: 100%;
  margin: 0 auto;
}

.onlinestoreBlock_img .setimg img {
  width: 60%;
  margin: 0 auto;
}

.onlinestoreBlock_ttl {
  font-size: 2.8rem;
  padding: 80px 0 50px;
  text-align: center;
}

.onlinestoreBlock_txt span.newtxt {
  font-size: 1em;
  font-weight: bold;
  color: #b21d23;
}

.onlinestoreBlock_txt span.newtxt a {
  font-size: 1em;
  font-weight: bold;
  color: #b21d23;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .onlinestoreBlock_ttl {
    padding: 30px 0;
  }
}

.onlinestoreBlock_txt {
  text-align: center;
  line-height: 2.2;
}

.onlinestoreBlock_btn {
  width: 600px;
  margin: 20px auto;
}

@media (max-width: 640px) {
  .onlinestoreBlock_btn {
    width: 98%;
  }
}

/*=== リアル店舗 ================================= */
#store {
  background: #f7f5f1;
  padding: 0 10px 50px;
  color: #021b44;
}

.storeBlock {
  text-align: center;
}

.storeBlock_img {
  text-align: center;
}

.storeBlock_img img {
  width: 100%;
  max-width: 765px;
  margin: 0 auto;
}

.storeBlock_ttl {
  font-size: 3.6rem;
  padding: 80px 0 0;
  text-align: center;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
}

@media (max-width: 640px) {
  .storeBlock_ttl {
    font-size: 3rem;
    padding: 50px 0 0;
    margin: 10px 0 20px;
  }
}

.storeBlock_sub_ttl {
  font-size: 2.4rem;
  padding: 0 0 20px;
}

@media (max-width: 640px) {
  .storeBlock_sub_ttl {
    font-size: 2.4rem;
  }
}

.storeBlock_txt {
  text-align: center;
}

@media (max-width: 640px) {
  .storeBlock_txt {
    width: 86% !important;
  }
}

.storeBlock_btn {
  width: 600px;
  margin: 20px auto;
  color: #021b44;
  border: 1px #021b44 solid;
}

@media (max-width: 640px) {
  .storeBlock_btn {
    width: 98%;
  }
}

#box-shop {
  width: 80%;
  max-width: 700px;
  margin: 50px auto;
  text-align: center;
}

@media (max-width: 640px) {
  #box-shop {
    width: 90%;
  }
}

#box-shop h6 {
  margin: 1rem 0;
  padding: 0.5rem 0;
  font-size: 1.4rem;
}

#box-shop li {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #e1dcc5;
  border-radius: 5px;
  margin: 0.5rem 0;
  transition: all 300ms;
}

#box-shop li a {
  color: #a47d30;
  border-radius: 3px;
}

#box-shop li.active {
  background: #e1dcc5;
}

#box-shop ion-icon {
  padding: 0 1rem 0 0;
  vertical-align: bottom;
  font-size: 2rem;
}

/*=== リアル店舗 ================================= */
#access {
  margin: 0 auto;
  padding-bottom: 100px;
}

#access img {
  float: none;
}

.accessBlock {
  margin: 0 auto;
}

.accessBlock_img {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.accessBlock_img img{
  /*width: 100%;*/
  width: 94%;
  left: 3%;
  position:relative;
}



#access p em {
  font-size: 2rem;
  font-weight: bold;
}

#access #address {
  /* float: center; */
   margin-top: 50px;
  text-align: center;
  font-size: 1.8rem;
}

.f15{
font-size: 1.5rem;
}


.about-tour{
  border: #021b44 solid 1px;
  width: 400px;
  margin: 0 auto 30px;
  padding: 10px 20px 20px;
}

.about-tour li{
  font-size: 17px;
  list-style: none;
  text-align: left;
  margin: 0 0 0 30px;
}

.title-tour{
  font-weight: bold;
}

@media (max-width: 640px) {
.about-tour{
  border: #021b44 solid 1px;
  width: 75%;
  margin: 0 auto 30px;
  padding: 20px;
}

.about-tour li{
font-size: 17px;
  list-style: none;
  text-align: center;
  margin: 0 0 0 0px;
}
}


/*=== アーティクル用 ================================= */
#artcle {
  width: 100%;
  padding: 0;
  margin: 0;
}

.article_img {
  width: 100%;
  text-align: center;
}

.article_img img {
  width: 100%;
  margin: 0 auto;
}

.main {
  width: 98%;
  max-width: 760px;
  margin: 100px auto;
  text-align: center;
}

@media (max-width: 640px) {
  .main {
    width: 94%;
    margin: 30px auto;
  }
}

.main_ttl {
  font-size: 3.6rem;
  padding-bottom: 50px;
}

.main_txt {
  line-height: 3;
}

.article {
  width: 98%;
  max-width: 760px;
  margin: 100px auto 150px;
  padding: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .article {
    width: 94%;
    margin: 30px auto;
  }
}

.article_ttl {
  font-size: 2.4rem;
  padding-bottom: 50px;
}

@media (max-width: 640px) {
  .article_ttl {
    padding-bottom: 0;
  }
}

.article_txt {
  text-indent: 1em;
  margin-top: 50px;
  line-height: 3;
  text-align: left;
}

@media (max-width: 640px) {
  .article_txt {
    margin-top: 20px;
    line-height: 2;
  }
}

.article_end {
  line-height: 0;
}


/*=== PCのトップメニュー ================================= */

.en{
padding-left: 20px;
}

#top-bar {
  position: fixed;
  overflow: hidden;
  /*padding: 1rem;*/
  padding: 0 4% 0 0;
  width: 100%;
  background-color: #fff;
  z-index: 10000;
  height: 100px;
  padding-top: 5px;
}

#top-bar-left {
  float: left;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.8rem;
}

#top-bar-left li a,
#top-bar-right li a {
  padding: 0 0;
  font-family: roboto,sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
}

#top-bar-left li {
  border-left: 1px solid #021b44;
}

#top-bar-left li:first-child {
  border-left: none;
}


#top-bar-right {
  text-align: center;
  /* float: center; */
  /* font-family: "Times New Roman", Times, serif; */

}

#top-bar-left li,
#top-bar-right li {
  display: inline-block;
  padding: 0 3.3rem;
  vertical-align: middle;
}


ul.logo_size img{
  width: 58%;
  height: auto;
  }

.padding li{
padding: 0 0 !important;
}

#top-bar-right li .release {
  font-size: 1.4rem;
  color: #bc111a;
}


/* TOP-BAR　レスポンシブ*/

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

  #top-bar-right li{
    padding: 0 1%;
  }

  #top-bar-right li a{
    font-size: 2.5rem;
    padding: 0 0;
  }

}

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

  .en{
    padding-left: 15px;
    }

  #top-bar-right li{
    padding: 0 1%;
  }

  #top-bar-right li a{
    font-size: 2rem;
  }

}

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

  .en{
    padding-left: 12px;
    }

  #top-bar-right li{
    padding: 0 1%;
  }

  #top-bar-right li a{
    font-size: 1.6rem;
  }


}

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

  #top-bar-right li{
    padding: 0 0.5% ;
  }

  #top-bar-right li a{
    font-size: 1.4rem;
  }


}





/*=== フッター ================================= */
#footer {
  margin: 0;
  text-align: center;
}

#lang {
  padding: 1rem 0;
}

#copy {
  padding: 1rem 0;
  background: #021b44;
  color: #fff;
  font-family: 'Roboto';
}

@media screen and (max-width: 780px) {
  #nav-lupicia {
    display: none;
  }
  .release {
    display: none;
  }
}

@media screen and (max-width: 750px) {
  #top-bar {
    padding: 2rem 1rem;
        height: 40px;
  }
  #top-bar-sp {
    display: none;
    position: fixed;
    text-align: center;
    width: 100%;
    padding: 4rem 2rem 2rem;
    /*background: rgba(2,27,68,0.85);*/
    background: rgba(255,255,255,0.95);
    opacity: 0;
    transition: all 800ms;
    z-index: 100000;
    pointer-events: none;

  }
  #top-bar-sp.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  #top-bar-sp li {
    padding: 0.5rem;
    /*font-family: "EB Garamond", serif;*/
    font-family: roboto,sans-serif;
    color: #021b44 !important;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
  }

  #top-bar-sp a {
    color: #021b44  !important;

  }

  .bar-sp-menu a {
    display: block;
  }
  #btn-menu {
    position: absolute;
    height: 24px;
    width: 24px;
    display: block;
    box-sizing: border-box;
    top: 1rem;
    right: 1.5rem;
  }
  #btn-menu div {
    position: absolute;
    left: 0;
    height: 1px;
    width: 24px;
    background-color: #021b44;
    display: inline-block;
    box-sizing: border-box;
  }
  #btn-menu div:nth-of-type(1) {
    top: 3px;
  }
  #btn-menu div:nth-of-type(2) {
    top: 10px;
  }
  #btn-menu div:nth-of-type(3) {
    bottom: 6px;
  }
  #btn-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
  }
  #btn-close span::before,
  #btn-close span::after {
    display: block;
    content: "";
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    width: 24px;
    height: 1px;
    background: #021b44  ;
  }
  #btn-close span::before {
    transform: rotate(-45deg);
  }
  #btn-close span::after {
    transform: rotate(45deg);
  }
}

/* end max-width: 780px */
@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .mailttl {
    display: none;
  }
  h1 {
    font-size: 1.8rem;
  }
  h3 {
    margin: 6rem 0;
    /*margin-top: 1rem;*/
    padding: 1rem 0 0;
    font-size: 4rem;
  }
  #page p {
    margin: 0 auto !important;
    width: 86%;
  }
  .main-img {
    width: 80%;
  }
  #main {
    padding-top: 20vh;
  }
  #anim-frame2 {
    top: 15vh;
  }
  #main-caption {
    font-size: 1.4rem;
  }
  #link-scroll span {
    bottom: 15vh;
  }
  #link-detail {
    margin: 4rem 0 0;
  }
  #access #address {
    display: block;
    float: none;
  }
  #access img {
    display: block;
    float: none;
    padding: 0 0 1rem;
    /*width: 100%;*/
    /*left:0%;*/
  }

  #lineupBlock_img {
    position: relative;
    width: 100% !important;
    left:0%;
  }

  .menu-brand {
    margin: 2rem 0;
    font-size: 1.4rem;
  }
  .menu-brand a {
    color: #a47d30;
  }
  .menu-lang a {
    display: inline-block;
    text-decoration: underline;
  }
  #top-bar-left {
    font-size: 1.4rem;
  }
  .no-wrap {
    display: inline-block;
  }
  #goods .box-goods img.goodsimg {
    width: 100%;
  }
}

/*=== タイトル上部調整  ================================= */
@media screen and (max-width: 750px) {

h3{
    margin: 6rem 0;
  }

section#news{
padding-top: 20px;
padding-bottom: 20px;
}

section#concept{
padding-top:20px ;
padding-bottom: 50px;
}

section#aboutus{
padding-top:20px ;
padding-bottom: 50px;
}

section#lineup{
padding-top:20px ;
padding-bottom: 50px;
}

section#store{
padding-top:20px ;
padding-bottom: 50px;
}

section#access{
padding-top:20px ;
padding-bottom: 50px;
}

}

/* end max-width: 640px */
/*=== 横ラインの小見出し ================================= */
.text-line {
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin: 6% auto 3%;
  font-size: 2.4rem;
}

.text-line:before,
.text-line:after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #021b44;
  display: block;
}

.text-line:before {
  margin-right: 40px;
}

.text-line:after {
  margin-left: 40px;
}


/*=== 飲めるお店と買えるお店　 ================================= */
section#drink{
  padding-top: 100px;
}

section#buy{
  padding-top: 100px;
}

@media (max-width: 750px) {
  section#drink{
    padding-top: 40px;
  }
  
  section#buy{
    padding-top: 40px;
  }
  
}


/*=== instagram ================================= */
.instaBlock {
  background: #f7f5f1;
  padding: 50px;
  text-align: center;
}

@media (max-width: 640px) {
  .instaBlock {
    padding: 50px 10px;
  }
}

/*=== リニューアルポイントエリア ================================= */

.feature-block {
    position: relative;
    width: 60%;
   /* margin: calc(var(--margin-top) * 1.5) auto 0;*/
margin: 50px auto;
}

.feature-title-image img {
    display: block;
    width: 320px;
    height: auto;
    top: 30px;
}

.feature-list {
    margin: 0;
    padding: 1em 2em 3.3em 2em;
    background-color: var(--color-read-bg);
    text-align: center;
    background-color: #fdf5e6;
    border-radius: 2%;
}

.feature-title-image img {
    display: block;
    width: 320px;
    height: auto;
}

#feature h3 {
    font-size: 2.1rem !important;
    font-weight: bold;
    margin: 1em 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

#feature  p {
    font-size: 1.8rem;
    margin: 1em 0;
}

div.item-notice{
text-align: center;
margin: 30px auto;
padding: 10px 10px 20px ;
width: 40%;
border: #e3d1ad solid 0.25px;
background-color: #fdfdf9;
border-radius: 5px;
}

.item-notice{
text-align: left;
font-size: 1.4rem;
}

@media (max-width: 640px) {
.feature-block {
    width: 80%;}

.feature-title-image img {
    width: 250px;
    height: auto;
    top: 30px;
}
#feature h3 {
    font-size: 1.8rem !important;
    font-weight: bold;
}

#feature  p {
    font-size: 1.5rem;
    margin: 1em 0;
}

div.item-notice{
text-align: center;
margin: 30px auto;
padding: 10px 10px 20px ;
width: 80%;
border: #e3d1ad solid 0.25px;
background-color: #fdfdf9;
border-radius: 5px;
}


}