body{
    margin: 0;
}

a {
    text-decoration: none;
    color: dimgrey;
}
li{list-style: none;}
h1{font-size:1.6rem;}
h2{font-size: 1.4rem;}
h3{font-size: 1.0rem;    }
p{font-size: 1rem}

@media screen and (max-width: 500px) {
h1{font-size:1.4rem;}
h2{font-size: 1.2rem;}
h3{font-size: 1rem;}
p{font-size: 0.8rem}
}

#base{
    margin: 0;
    top:0;
    left:0;
    width: 100%;
    font-family: 'Noto Sans Japanese', sans-serif;
    color: dimgrey;
    background-color: antiquewhite;デザイン構築用
}


/*            Scroll時の表示挙動            */
.effect-fade{
    opacity: 1;
    transform: translate(0 , 0);
    transition: all 500ms;
}

.effect-fade.scrollin{
    opacity: 1;
    transform: translate(0, 0);
}


/*            Navigation            */
#nav{/*.pcは固定px, spはレスポンシブ*/
    width: 100%;
    background-color: aqua;
    font-weight: bold;
}
@media screen and (max-width: 769px) {
    .pc-nav{
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .sp-nav{
        display: none;
    }
}
.pc-nav{
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: white;
    opacity: 0.85;
    position: fixed;/*ブラウザ上部に固定*/
    z-index: 9999;
}
/* ロゴスタイルは navigation.css で管理 */
.pc-nav-menu{
    position: relative;
    width: calc(100% - 213.5px) ;/*logoの幅サイズ以上のpxを引く*/
    height: 80px;
    margin: 0;
    float: left;
    right: 0;
    display:block;
    padding: 0;
/*    background-color:azure;デザイン構築用*/
}
.pc-nav-menu li{
    line-height: 80px; /*.pc-nav-menuのheightと合わせる*/
    display: block;
    float:right;
    text-align: center;
    margin: 0 3.2vw;
}
.sp-nav{
    top: 0;
    left: 0;
    width: 100%;
    height: 16vw;
    background-color: white;
    opacity: 0.85;
    position: fixed;/*ブラウザ上部に固定*/
    z-index: 9999;
}
/* SPロゴスタイルは navigation.css で管理 */
/* SPナビゲーション関連のスタイルは navigation.css で管理 */
.nav-unshown {
  display:none;
}

/* #nav-close は削除されたため、関連スタイルも削除 */


/*               Main               */


@media screen and (max-width: 769px) {
    .menu{
        margin-top: 16vw;/*.sp-navのナビゲーションHightにあわせる*/
    }
}
@media screen and (min-width: 768px) {
    .menu{
        margin-top: 80px;/*.pc-navのナビゲーションHightにあわせる*/
    }
}


.menuintro{
    background: lightgrey; 
    margin: 65px auto; 
    padding: 30px;
    text-align: center;
}

.beeritems h2{
    text-align: center;
    margin: 5vh 1.5vw 1vh 1.5vw;
    color: #01828d;
}

.brewery{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    width: 100vw;
    padding: 0;
    margin: 0;
}


/*@media screen and (max-width: 450px){
    .brewery{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
         flex-direction: column;
}
}*/


.menu-list {
    width: 22vw;
    margin:2vw 1vw;
    float: left;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
/*    padding: 5vw;  */
}
.menu-list img{
    height: 200px;    
    margin: 3vw 0;
}
.txt-figure{
    line-height: 2;
    margin: 1.5vw;
}

@media screen and (max-width: 770px){
    .menu-list {
        width:46vw;
    }
    .menu-list img{
        height: 180px;    
    }
}
@media screen and (max-width: 500px){
    .menu-list {
        width:90vw;
        margin: 2vw 3vw;
    }
    .menu-list img{
        height: 180px;    
    }
}




/* 情報セクションは base.css で管理 */


/* ソーシャルタブは base.css で管理 */

.tw-follow{
    margin: 3% 0;
    width:100%;
}
#twitter-widget-0{
    width:100%;
    margin: 0 auto;
}
.tw-follow h3{
    float: left;
    margin: 0 10vw 0 0;
}

.tw-follow a{
    float: left;
}

.timeline-InformationCircle-widgetParent{
    display: none;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #1b95e0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;  /*ラジオボタンを全て消す*/
}
.tab_content {
  display: none;   /*タブ切り替えの中身のスタイル*/
  padding: 40px 6vw;
  clear: both;
  overflow: hidden;
}
#twitter:checked ~ #twitter_content,  /*選択されているタブのコンテンツのみを表示*/
#blog:checked ~ #blog_content {
  display: block;
}
.social-tabs input:checked + .tab_item {   /*選択されているタブのスタイルを変える*/
  background-color: #1b95e0;
  color: #fff;
}


/* blog contents - 共通スタイルは base.css で管理 */
/* 地図・営業時間・メッセージは base.css で管理 */
.blog-1, .blog-2, .blog-3, .map-1, .map-2, .map-3{
    display: block;
    float: left;
}
.blog-1, .map-1, .open-1{
    margin: 2vw auto;
}
.map-3 span{
        text-decoration:underline;
}



/*              Footer - 共通スタイルは base.css で管理              */