@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

h1,h2,h3,h4,h5 {margin: 0;}

/* ==========================================================================
背景
========================================================================== */



body {
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-size: 16px;
line-height: 1.8;}


.wrap {overflow: hidden;}


/*SP・480px以下の場合*/
@media (max-width: 767px) {
#contents {width: 100%;
margin: 0;}
}


/*PC・481px以上の場合*/
@media (min-width: 768px) {
#contents {width: 100%;
margin: 0 auto;}
}



/*PC・481px以上の場合*/
@media (min-width: 768px) {

.red {color:#E4535E;}
.yellow {color: #FFC914;}

.kaitei-box {width: 100%;
margin-bottom: 60px;
text-align: center;}
.kaitei-box img {width: 50%;
margin: 0 auto;}
.kaitei-box .type-sp {display: none;}



/* ==========================================================================
フォント
========================================================================== */

.eng {font-family: "Futura-CondensedMedium", "Futura", sans-serif;
font-stretch: condensed;
font-weight: normal;
}
.min {font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}



/* ==========================================================================
ヘッダー
========================================================================== */

#header .header-wrap {position: relative;
	background-color: #210700;}

#header .header-pagewrap {height: 150px;
background-color: #fff;
max-width: 1180px;
margin: 0 auto;}

#header .page-head {position: relative;}

#header .page-head .page-logo {width: 200px;
margin: 0 auto;
padding-top: 36px;
text-align: center;}

#header .page-head .page-logo img {width: 198px;
height: 40px;}

#header .page-head .page-logo h2 {font-size: 16px;
color: #666;
margin-top: 14px;
letter-spacing: 0.5em;}

#header .page-head .social {position: absolute;
right: 20px;
top:32px;}

#header .page-head .social li {margin-right: 30px;}
#header .page-head .social li:last-child {margin-right: 0;}

#header #page-breadcrumb .breadcrumb {position: absolute;
right: 20px;
top:80px;
overflow: hidden;
background-color: #fff;
margin: 0px;
padding: 0px;}

#header #page-breadcrumb .breadcrumb li {float: none;}
.breadcrumb-next {margin: 0px 15px;
padding-bottom: 4px;}


/*　ナビ */

#gnav {width: 100%;
margin: 0 auto;
border-bottom: 1px #ccc solid;
overflow: hidden;
height: 64px;}

.gnav-wrapper {}

.gnav-inner {display: table;
margin: 0 auto;}

#gnav h1 {float: left;
display: table;
margin-right: 40px;
line-height: 64px;}

.nav {display: table;}

.nav li {margin: 0;
margin-right: 40px;
line-height: 64px;}

.nav li:last-child {
margin-right: 0px;}

.nav li a {color: #333;
	padding:0;}

.gnav-sp {display: none;}


/*　固定ナビ */
/*#F9B704*/

  #gnav-fix {width: 100%;
    background-color:rgba(249,183,4,0.8);
    height: 64px;
  overflow: hidden;
position: fixed;
top:-64px;
-webkit-transform: 0.3s;
   -moz-transform: 0.3s;
    -ms-transform: 0.3s;
     -o-transform: 0.3s;
        transform: 0.3s;
        z-index: 1;
}


#gnav-fix.clear {
  top: 0px;
  transition: 0.8s!important;
}

.gnav-fix-wrapper {width: 100%;}

.gnav-fix-inner {
  display: table;
margin: 0 auto;}

#gnav-fix h1 {float: left;
display: table;
margin-right: 40px;
line-height: 64px;}





/*　メインイメージ */

#header .mainimg-top {/*background: url(../img/bg/mainimg-top02.jpg) no-repeat center center;*/
  background-color: #fdd108;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

  .mainimg-top .catchcopy {text-align: center;
  	font-size: 38px;
  width: 100%;
  position: absolute;
  top: 160px;
  }


/*　下層メインイメージ */

.sub-mainimg {width: 100%;
overflow: hidden;}

.sub-mainimg .sub-mainimg-inner {width: 100%;
  max-width: 1480px;
  height: 520px;
  margin: 0 auto;
  position: relative;
  display: block;
  background-position: center center;
  background-size: cover;} 

.sub-mainimg-inner .titlebox {text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%);
-moz-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;
-webkit-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;
color: #ffffff;}

.sub-mainimg .titlebox h2 {font-size: 18px;}
.titlebox .page-title {font-family: 'Dancing Script', cursive;
font-size: 96px;}
.o-moji {font-family: 'Rock Salt', cursive;
}


#about-page .sub-mainimg-inner {background: url(../img/bg/about/sub-mainimg.jpg) no-repeat;}
#products-page .sub-mainimg-inner {background: url(../img/bg/products/sub-mainimg.jpg) no-repeat;}
#company-page .sub-mainimg-inner {background: url(../img/bg/company/sub-mainimg.jpg) no-repeat;}
#shoplist-page .sub-mainimg-inner {background: url(../img/bg/shoplist/sub-mainimg.jpg) no-repeat;}
#store-page .sub-mainimg-inner {background: url(../img/bg/store/sub-mainimg.jpg) no-repeat;}
#contact-page .sub-mainimg-inner {background: url(../img/bg/contact/sub-mainimg.jpg) no-repeat;}
#faq-page .sub-mainimg-inner {background: url(../img/bg/faq/sub-mainimg.jpg) no-repeat;}
#news-page .sub-mainimg-inner {background: url(../img/bg/news/sub-mainimg.jpg) no-repeat;}
#blog-page .sub-mainimg-inner {background: url(../img/bg/blog/sub-mainimg.jpg) no-repeat;}
#policy-page .sub-mainimg-inner {background: url(../img/bg/policy/sub-mainimg.jpg) no-repeat;}
#event-page .sub-mainimg-inner {background: url(../img/bg/event/sub-mainimg.jpg) no-repeat;}
#masaji-beer-page .sub-mainimg-inner {background: url(../img/bg/masaji/sub-mainimg.jpg) no-repeat;}
#hanpukai-page .sub-mainimg-inner {background: url(../img/bg/hanpukai/sub-mainimg.jpg) no-repeat;}
#notfound-page .sub-mainimg-inner {background: url(../img/bg/notfound/sub-mainimg.jpg) no-repeat center center;}
#ttt-page .sub-mainimg-inner {background: url(../img/bg/ttt/sub-mainimg.jpg) no-repeat center center;}
.sub-mainimg-inner {background-size:cover!important;}


/*　コンテンツ幅 */

.view-pc {width: 1180px;
margin: 0 auto;}

/* ======================================================================================================================
◆404ページ◆
====================================================================================================================== */

#notfound-page .sub-mainimg {margin-bottom: 120px;}


/* ======================================================================================================================
◆トップページ◆
====================================================================================================================== */


.pickup-banner {margin-bottom: 30px;}

.newsfeed {width: 1180px;
margin: 0 auto;}

.newsfeed-box {overflow: hidden;
 display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;}

.newsfeed-lbox {float: left;
padding: 20px;
margin-right: 20px;
display: table;
font-size: 18px;
border-right: 1px solid #DDD;
width: 200px;}
.newsfeed-rbox {float: right;
  width: 958px;
}

.newslist .titbox {margin-bottom: 18px;}
.newslist .titbox time {margin-right: 20px;}
.newslist .titbox h3 {font-size: 18px;}
.newslist .titbox h3 a {color:#333;}

.attention-please {width: 1180px;
text-align: center;
padding: 18px 0px;
background-color: #fdd108;
margin: 60px auto;}

.newsfeed {width: 1180px;
margin: 60px auto 0px;}
.newsfeed-box {overflow: hidden;}
.newsfeed-box .newsfeed-lbox {float: left;}

.feedbox .titbox {overflow: hidden;
line-height: 16px;}
.feedbox .titbox .feed-category {float: left;
font-size: 12px;}
.feedbox .titbox time {float: left;
font-size: 12px;
color:#666;
line-height: 16px;
padding-top: 1px;}
.feedbox .titbox h3 {font-size: 16px;
line-height: 16px;
padding-top: 2px;}
.feedbox .titbox h3 a {color:#333;
line-height: 16px;}





.attention-please p {font-size: 20px;
margin-bottom: 0;}

.attention01 {font-size: 18px;
color: red;
border: 1px solid #962D2D;
margin: 0 auto 20px;
text-align: center;
padding: 4px 12px;
display: table;}

.attention02 {font-size: 16px;
text-align: center;
color: #333;
}

.attention-wrap {padding: 40px 20px;
background-color: #eee;  
display: table;
margin: 0 auto 60px;}

.attention {margin-bottom: 60px;}

.attention-please a {color: #333;}

/*FaceBook*/
#facebook {display: none;}

/*オススメ*/
#PickupArea {margin-bottom: 80px;}
#PickupArea .pickupbox .pickup-bn img {max-width: 100%;}

/* コンセプト */

#conceptArea {border-bottom: 1px solid #ccc;
background-color: #ccc;
height:;}


.concept-bg {height:;
	background: url(../img/bg/concept-back.jpg) no-repeat center center;
  background-size:cover;
}

.circle-back {/*height: 900px;
  background: url(../img/bg/circle.png) no-repeat center center;*/
}

.conceptwrap {margin: 0 auto;
	width: 1080px;
height: 100%;}


.concept-inner {width: 720px;
  margin: 0 auto;
position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);}

.concept-inner h2 {
  margin-top: 20px;
margin-bottom:20px;
text-align: center;
line-height: 1.4;}

#conceptArea .catchcopy {font-family: 'Dancing Script', cursive;
font-size: 84px;
color: #962D2D;
line-height: 1;
margin-bottom: 0;
text-align: center;
transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
margin-bottom: 70px;}

.concept-txt {text-align: center;
font-size: 16px;
line-height: 2;}

.cf01 {color:#E4BF65;
font-size: 32px;
margin-bottom: 60px;}
.cf02 {font-size: 38px;
margin-bottom: 60px;
font-weight: bold;}
.cf03 {font-size: 16px;
line-height: 2.4;}

.contentsArea-wrap {margin-bottom: 40px;}
.contentsArea-wrap img {padding: 2px;}
.contentsArea-inner {padding: 40PX;}

.contentsArea-wrap figure a {display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;}

#go-to-contentsArea01,#go-to-contentsArea02 {overflow: hidden;
color: #fff;
width: 100%;}
#go-to-contentsArea01 .lbox {float: left;
width: 66.7%;}
#go-to-contentsArea01 .rbox {float:right;
width: 33.3%;}
#go-to-contentsArea02 {overflow: hidden;
width: 100%;}
#go-to-contentsArea02 .lbox {float: left;
width: 33.3%;}
#go-to-contentsArea02 .rbox {float:right;
width: 66.7%;}


#go-to-contentsArea01 img {max-width: 100%;}
#go-to-contentsArea02 img {max-width: 100%;}

.relative {position: relative;}
#go-to-contentsArea01 .contents-box01 .top-contents-title {position: absolute;
top:52%;
left:60%;}
#go-to-contentsArea01 .contents-box02 .top-contents-title {position: absolute;
top:24%;
left:12%;
color: #333;}
#go-to-contentsArea01 .contents-box03 .top-contents-title {position: absolute;
top:42%;
left:12%;}
#go-to-contentsArea02 .contents-box04 .top-contents-title {position: absolute;
top:65%;
left:12%;}
#go-to-contentsArea02 .contents-box05 .top-contents-title {position: absolute;
top:65%;
left:12%;}
#go-to-contentsArea02 .contents-box06 .top-contents-title {position: absolute;
top:46%;
left:12%;}

.f01 {font-family: 'Dancing Script', cursive;
font-size: 36px;
margin: 0;
line-height: 1;}

.top-contents-title .mikiri {border-bottom: 1px #962D2D solid;
width: 60px;
height: 1px;
margin-top: 12px;
margin-bottom: 12px;}

.top-contents-title h3 {font-size: 16px;
}


.sub-text {color: #777;
line-height: 1.8;
margin: 0;}

/*商品紹介*/

#ItemArea {
margin-bottom: 120px;}

#ItemArea .itemwrap {width: 1080px;
margin: 0 auto;}

.regular-lineup-pc {display: table;
margin: 0 auto;}

.item-titlebox {text-align: center;
}

.item-titlebox h2,.blog-titlebox h2 {margin-bottom: 30px;
letter-spacing: 1em;
text-indent:1em;}

.item-titlebox h3 {color: #333;
}

.item-titlebox-inner {margin-bottom: 40px;}

.regular-lineup-pc ul {overflow: hidden;}

.regular-lineup-pc li {margin-right: 80px;
text-align: center;
vertical-align: bottom;
line-height: 700px;}
.regular-lineup-pc li:last-child {margin-right: 0px;}

.regular-lineup-pc {margin-bottom: 40px;}

.lineup01 h3,.lineup02 h3,.lineup03 h3,.lineup04 h3,.lineup05 h3 {height: 350px;
vertical-align: bottom;
font-size: 18px;
display: table-cell;
width: 127px;
text-align: center;}

.lineup01 h4,.lineup02 h4,.lineup03 h4,.lineup04 h4,.lineup05 h4 {
font-size: 12px;
width: 127px;
text-align: center;
margin-top: 10px;}

.regular-lineup-pc .lineup01 {background: url(../img/bg/lineup01.png) no-repeat;
width: 127px;
height: 387px;
position: relative;
}
.regular-lineup-pc .lineup02 {background: url(../img/bg/lineup02.png) no-repeat;
	width: 127px;
height: 387px;
position: relative;}
.regular-lineup-pc .lineup03 {background: url(../img/bg/lineup03.png) no-repeat;
	width: 127px;
height: 387px;
position: relative;}
.regular-lineup-pc .lineup04 {background: url(../img/bg/lineup04.png) no-repeat;
	width: 127px;
height: 387px;
position: relative;}
.regular-lineup-pc .lineup05 {background: url(../img/bg/lineup05.png) no-repeat;
	width: 127px;
height: 387px;
position: relative;}
.lineup01 a,.lineup02 a,.lineup03 a,.lineup04 a,.lineup05 a {display:block;
width: 127px;
height: 387px;
position: absolute;
top:0;
left: 0;}

#ItemArea .regular-lineup-sp {display: none;}


.set-item {overflow: hidden;
margin-top: 120px;
margin-bottom: 120px;}



.limited-lineup {overflow: hidden;
line-height: 1.6;
font-size: 14px;}
.limited-lineup h3 {margin-bottom: 20px;}
.relative {position: relative;}
.limited-lineup .lineup06 {background: url(../img/bg/lineup06.jpg) no-repeat;
	width: 480px;
overflow: hidden;}
.limited-lineup .lineup07 {background: url(../img/bg/lineup07.jpg) no-repeat;
	width: 480px;
overflow: hidden;}
.limited-lineup .lineup08 {background: url(../img/bg/lineup08.jpg) no-repeat;
	width: 480px;
overflow: hidden;}
.limited-lineup .lineup09 {background: url(../img/bg/lineup09.jpg) no-repeat;
	width: 480px;
overflow: hidden;}
.limited-lineup h3 {
text-align: center;
color: #fff;
height: 200px;
line-height: 200px;}

.lineup06,.lineup07,.lineup08,.lineup09 {width: 480px;
float: left;}

.lineup06 a,.lineup07 a,.lineup08 a,.lineup09 a {width: 480px;
height: 200px;
display: block;
position: absolute;
top:0;
left: 0;}

.r120 {margin-right: 120px;}
.b40 {margin-bottom: 40px;}


/*ニュース*/

#newsArea {margin-bottom: 80px;
padding: 80px 0px;
background-color: #eee;}
.news-banner img {max-width: 100%;}



/*ブログ*/

#blogdetailArea .blog-map {margin-bottom: 60px;}

.blog-top-wrapper {
margin: 0 auto;
margin-bottom: 60px;}

.blog-top-inner {overflow: hidden;}

.blog-titlebox {text-align: center;
margin-bottom: 30px;}

.title-shikiri {width: 100px;
height: 2px;
border-bottom: 2px solid #FFC914;
margin: 0 auto;
margin-bottom: 60px;}


.blogbox {width: 100%;
float: left;
padding: 0px 20px;}

.blogbox:last-child {margin-right: 0;}

.blogbox h3 a {font-size: 16px;
color: #333;
font-weight: bold;}

.blogbox .imgbox {margin-bottom: 20px;}

.blogbox img {
max-width: 100%;
height: auto;
text-align: center;
margin: 0 auto;} 

.blogbox .titbox time {font-size: 12px;
color: #ccc;}

.blog-ichiran {margin-bottom: 120px;
text-align: center;
font-size: 12px;
font-weight: bold;}

.blog-ichiran-btn {display: table;
padding: 12px 120px;
border: #333 solid 1px;
margin: 0 auto;}



.blog-top-inner .slick-dots {/*width: 200px!important;*/
display: table!important;
margin: 0 auto!important;}

.slick-prev .slick-arrow {background-color: #000!important;
height: 100%!important;}
.slick-next .slick-arrow {background-color: #000!important;
height: 100%!important;}

/*フッター*/

#footer {background-color: #fdd108;
padding: 80px 0px 0px;}


.foot-nav {overflow: hidden;
color: #ccc;
margin-bottom: 40px;}

.foot-nav .shikiri {margin: 0px 20px;
color: #666;}

.foot-nav ul {display: table;
	margin: 0px auto;
text-align: center;}

.foot-nav li a {color: #333;
}


.copyright {width: 100%;
  text-align: center;
color: #ccc;
font-size: 11px;
background-color: #000;
padding: 12px 0;}


.move {right: 20px;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -ms-filter: "alpha(opacity=$num)";
    }

/* nagamatsu edit start */
#online_btn {
		position: fixed;
    right: -200px;
    bottom: 200px;
		transition: 0.3s;
}
#online_btn.clear {
	right: 0px;
	transition: 0.8s!important;
}
/* nagamatsu edit end */

.{   transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -ms-filter: "alpha(opacity=$num)";
    opacity: 0;
    z-index: 50;}


.page-logo {}


.lbox {float: left;}
.rbox {float: right;}

.foot-address {margin-bottom: 40px;
overflow: hidden;}

.foot-address h2 {font-weight: bold;
float: left;
font-size: 30px;
margin-right: 30px;
line-height: 36px;}

.foot-address address {float: left;
line-height: 36px;
margin-bottom: 0;
display: table;
vertical-align: bottom;}

.foot-address address p {float: left;
font-size: 16px;}
.place {margin-right: 20px;
margin-bottom: 0;}
.shikiri {margin-right: 20px;}
.tel {margin-bottom: 0;}

.foot-address .f-go-contact {float: right;
padding: 3px 12px;
background-color: #333;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-size: 14px;
color: #fff;}

.foot-address .f-go-contact a {color: #fff;}

.foot-address .zip {font-size: 12px;
margin-right: 8px;}

.foot-nav-under {overflow: hidden;
margin-bottom: 40px;}

.follow-us {float: left;
line-height: 34px;
font-weight: bold;
margin-right: 10px;}

.foot-social li {
border: 1px #333 solid;
height: 34px;
line-height: 34px;
border-radius: 34px;
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
margin-right: 10px;
}

.foot-social li:last-child {margin-right: 0;}

.foot-social li i {width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;}

.foot-social li a {
color: #333;
}

.foot-nav-under .foot-nav-other {float: right;}
.foot-nav-other li {margin-right: 10px;
padding: 3px 12px;
border: 1px solid #333;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-size: 12px;}
.foot-nav-other li:last-child {margin-right: 0px;}
.foot-nav-other li a {color: #333;}


/* ======================================================================================================================
◆下層共通◆
====================================================================================================================== */

.tit-under {width: 100px;
border-bottom: 2px solid #962D2D;
display: table;
margin: 0 auto;
padding-bottom: 30px;
margin-bottom: 60px;
}

.tit-h2 {text-align: center;
font-size: 32px;
letter-spacing: 0.4em;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

main {margin-bottom: 160px;}

.tac {text-align: center;} 



/* ======================================================================================================================
◆箕面ビールとはページ◆
====================================================================================================================== */

#about-page .sub-mainimg {margin-bottom: 60px;}
#about-page .explain {overflow: hidden;}
.explain .textbox {margin-top: 60px;
margin-bottom: 120px;
}

.explain .textbox p {font-size: 18px;
font-weight: bold;
color: #555555;
}
#about-page .explain h3 {font-size: 32px;
line-height: 1.2;
color: #555;
font-weight: 100;
}


.f27 {font-size: 27px;
font-weight: bold;
color: #555555;
padding-bottom: 2px;
border-bottom: 2px #E4BF65 solid;}

.about-spesial br {display: none;}

.aboutblock .textbox {width: 50%;
display: table;
margin-top: 100px;}
.aboutblock .textbox h3 {margin-bottom: 20px;}

.about01 {width: 100%;
  height: 600px;
  background: url(../img/bg/about/concept1.jpg) no-repeat;
background-size: cover;
color: #fff;
padding-left: 60px;}

.about02 {width: 100%;
  height: 600px;
  background: url(../img/bg/about/concept2.jpg) no-repeat;
background-size: cover;}

.about02 .textbox {float: right;}

.about03 {width: 100%;
  height: 600px;
  background: url(../img/bg/about/concept3.jpg) no-repeat;
background-size: cover;
color: #fff;
padding-left: 60px;}

.about04 {width: 100%;
  height: 600px;
  background: url(../img/bg/about/concept4.jpg) no-repeat;
background-size: cover;}

.about04 .textbox {float: right;}

.about05 {width: 100%;
  height: 600px;
  background: url(../img/bg/about/concept5.jpg) no-repeat;
background-size: cover;
padding-left: 60px;
}

.aboutblock {margin-bottom: 120px;}
.award-tit {margin-bottom: 60px;}
.award-tit h3 {text-align: center;}


.awardbox h4 {margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #999;
font-family: 'Lora', serif;
font-size: 24px;}

.year {font-size: 18px;
margin-left: 12px;}

.award-detail {overflow: hidden;
line-height: 1.2;
width: 100%;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;}
.award-detail:last-child {border-bottom: none;}
.award-product-img {float: left;
  width: 10%;
margin-right: 2%;}
.award-txt {float: left;
  width: 70%;
margin-right: 2%;}
.award-result-img {
  width: 14%;
  float:left;
}
.award-products {font-weight: bold;}
.award-result {color: #962D2D;}

.award-product-img img {max-width: 100%;}
.award-result-img img {max-width: 100%;}



/* ======================================================================================================================
◆店舗紹介ページ◆
====================================================================================================================== */

#store-page .sub-mainimg {margin-bottom: 80px;}

.warehouse {}
.warehouse-wrap {overflow: hidden;
margin-bottom: 80px;}
.warehouse .lbox {width: 500px;}
.warehouse h2 {font-size: 52px;
color: #333;
margin-bottom: 60px;}
.warehouse h3 {font-size: 22px;
color: #333;
margin-bottom: 60px;
font-weight: bold;}
.sentence-b {line-height: 2;
font-size: 16px;
color: #333;margin-bottom: 40px;}
.warehouse .rbox {width: 600px;
margin-top: 66px;}
.info-warehouse {overflow: hidden;
width: 100%;}
.info-warehouse dt {float: left;
width: 18%;
margin-right: 4%;
padding: 10px 0px;
font-weight: 100;
margin-bottom: 10px;}
.info-warehouse dd {
padding: 10px 0px;
margin-bottom: 10px;
border-bottom: 1px solid #666;}

.slick-dots {/*width: 150px!important;*/
  margin: 0px auto!important;
  position: relative!important;
  padding-top: 20px!important;
  bottom:0px!important;
}


.warehouse .slick-dots {
display: table;
margin: 0 auto;}

.tenma {font-size: 34px;
font-weight: bold;}

.beerbelly {padding: 200px 0px;
background-color: #FAFAFA;
margin-bottom: 100px;
}
.beerbelly h2 {margin-bottom: 30px;
font-size: 38px;}
.beerbelly-tosabori {overflow: hidden;
width: 100%;}
.beerbelly-tosabori .lbox {width: 50%;}
.beerbelly-tosabori .rbox {width: 50%;
padding: 40px;
background-color: #fff;
height: 520px;}
.beerbelly-tenma {overflow: hidden;
width: 100%;}
.beerbelly-tenma .lbox {width: 50%;
padding: 40px;
background-color: #fff;
height: 520px;}
.beerbelly-tenma .rbox {width: 50%;}

.goto-beerbelly {position: relative;
display: table;
margin: 0 auto;}
.goto-beerbelly .arrow {position: absolute;
right: -8px;
top:2px;
}

.goto-beerbelly p a {color: #333;
border: 1px solid #999;
padding: 12px 36px;}


.japan {}
.japan .titlebox-j {text-align: center;
margin-bottom: 80px;}
.japan .titlebox-j h2 {margin-bottom: 40px;
font-size: 32px;
font-weight: bold;}
.aria-japan {border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
padding: 24px 0px;
margin-bottom: 40px;
overflow: hidden;
width: 80%;
margin-left: 10%;
}
.aria-japan dt {float: left;
width: 20%;}


.effect01 {
  position: relative;
  width: 100%;
}
.effect01 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.effect01 img {
  max-width: 100%;
  vertical-align: top;
}

.effect01 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
}
.effect01 a:before,
.effect01 a:after {
  width: 1px;
  height: 0;
  background-color: #ffffff;
}
.effect01 a:before {
  right: 0;
  top: 0;
}
.effect01 a:after {
  left: 0;
  bottom: 0;
}
.effect01:before,
.effect01:after,
.effect01 a:before,
.effect01 a:after {
}

.effect01:before,
.effect01:after {
  height: 1px;
  width: 0%;
}
.effect01:before {
  top: 0;
  left: 0;
}
.effect01:after {
  bottom: 0;
  right: 0;
}
.effect01:hover img,
.effect01.hover img {
  opacity: 0.25;
}
.effect01:hover a:before,
.effect01.hover a:before,
.effect01:hover a:after,
.effect01.hover a:after {
  height: 100%;
}

.effect01:hover:before,
.effect01.hover:before,
.effect01:hover:after,
.effect01.hover:after {
  width: 100%;
}
.effect01:hover:before,
.effect01.hover:before,
.effect01:hover:after,
.effect01.hover:after,
.effect01:hover a:before,
.effect01.hover a:before,
.effect01:hover a:after,
.effect01.hover a:after {
  /*opacity: 0.1;*/
}

.ws-box img {max-width: 100%;
margin-bottom: 40px;}



/* ======================================================================================================================
◆商品紹介ページ◆
====================================================================================================================== */

#products-page .sub-mainimg {margin-bottom: 100px;}

.classic-beer {margin-bottom: 160px;
overflow: hidden;}

.classic-beer .imgbox img {width: 780px;
  height: 520px;}


.classic-beer-base .lineup-img-wrap {margin-bottom: 140px;
}


.lineup-img-inner {position: relative;
height: 520px;}

.classic-beer .lineup-img-inner .textbox-pc {background: url(../img/bg/products/back_yellow.jpg) repeat-y;
color: #fff;
position: absolute;
right: 0;
top:140px;
padding: 40px;
width: 480px;
height: 300px;
}

.classic-beer .textbox-pc .titlebox01 {position: absolute;
left: -40px;
top:-120px;}

.classic-beer .textbox-pc .titlebox02 {position: absolute;
right: 40px;}

.classic-beer .textbox-pc .commentbox {position: absolute;
top: 120px;
width: 400px;
line-height: 1.6;}

.classic-lineup {display: table;
  margin: 0 auto;
}

.minoh {font-size: 18px;
font-weight: bold;
}
.syohyo {line-height: 1.2;}

/*シーズナブルビール*/

.season-beer .lineup-img-wrap {margin-bottom: 80px;
}

.season-beer .move-back {background-color: #eee;
/*width: 100%;
padding-top: 50px;*/
position: relative;
}

.js-scrollshow:after {-webkit-transform: scaleY(1);
    transform: scaleY(1);}

  .message {-webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    backface-visibility: hidden;}

.season-beer .move-back:after {
    content: '';
    width: 85.55208%;
    height: calc(100% - 55px);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #eee;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    transition-property: transform;
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
    -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1);
    transition-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}


.season-beer .lineup-img-inner .textbox-pc {background: url(../img/bg/products/back_black.jpg) no-repeat;
color: #fff;
position: absolute;
left: 20px;
top:60px;
padding: 40px;
width: 480px;
height: 290px;
z-index: 1;
l
}

.season-beer .imgbox {position: absolute;
right: 0;}


.season-beer .textbox-pc .titlebox01 {position: absolute;
left: -20px;
top:-140px;
}

.season-beer .textbox-pc .titlebox02 {position: absolute;
right: 40px;}

.season-beer .textbox-pc .commentbox {position: absolute;
top: 120px;
width: 400px;
line-height: 1.6;
color: #ccc;}


.season-lineup {overflow: hidden;
display: table;
  margin: 0 auto 140px;}


/*オリジナルグッズ*/

.original-goods .lineup-img-wrap {margin-bottom: 80px;}

.original-goods .season-lineup {margin-bottom: 100px;}

  .original-goods .move-back {background-color: #962D2D;
/*width: 100%;
padding-top: 50px;*/
position: relative;
}

.js-scrollshow:after {-webkit-transform: scaleY(1);
    transform: scaleY(1);}

  .message {-webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    backface-visibility: hidden;}

.original-goods .move-back:after {
    content: '';
    width: 85.55208%;
    height: calc(100% - 55px);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #eee;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    transition-property: transform;
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
    -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1);
    transition-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}


.original-goods .lineup-img-inner .textbox-pc {background: url(../img/bg/products/back_red.jpg) no-repeat;
color: #fff;
position: absolute;
left: 20px;
top:60px;
padding: 40px;
width: 480px;
height: 320px;
z-index: 1;
l
}

.original-goods .imgbox {position: absolute;
right: 0;}


.original-goods .textbox-pc .titlebox01 {position: absolute;
left: -20px;
top:-140px;
}

.original-goods .textbox-pc .titlebox02 {position: absolute;
right: 40px;}

.original-goods .textbox-pc .commentbox {position: absolute;
top: 120px;
width: 400px;
line-height: 1.6;
color: #fff;}

/*ギフト*/
.setbanner {width: 100%;;
margin: 80px auto 0px;}
.setbanner-inner {display: table;
  margin: 0 auto;}
  .setbanner-inner .row {display: table!important;
margin: 0 auto;}
.setbanner-inner .inbox {display: table!important;
  overflow: hidden;
margin: 0 auto;}
.bannerbox img {max-width: 100%;}


.beer-cat {font-size: 32px;}
.beer-cat-big {font-size: 175px;}


.lineup-box {width: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;}
.lineup-box img {margin-bottom: 20px;}
.lineup-box .img-box img {width: 200px;
height: 200px;}
.lineup-box .text-box {width: 180px;
display: table;
margin: 0 auto;}
.lineup-box h3 {text-align: center;
border-bottom: 1px solid #962D2D;
padding-bottom: 12px;
font-size: 18px;
display: table;
margin: 0 auto;
margin-bottom: 20px;
line-height: 1.4;}
.lineup-box h3 a {color: #333;}
.lineup-box .products-explanation {
display: table;
color: #666;
line-height: 1.6;
margin-bottom: 20px;}
.item-detail {border: 1px solid #ccc;
text-align: center;
padding: 8px 0px;
font-size: 12px;
color: #666;}
.item-detail a {color: #333;}
.goto-shopping-box {position: relative;}
.goto-shopping-box .arrow {position: absolute;
top: 50%;
  -webkit-transform: translateY(-50%); /* Safari */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%);
right: -4px;}


.classic-beer::before {
  content: ' ';
  position: absolute;
  background-color: #fecc1d;
  width: 100%;
  left: 0;
  height: 0;
  margin-top: 50px;
  transition: 0.4s;
}

.classic-beer-active::before {
  height: 530px!important;
}

.classic-beer .lineup-img-inner .textbox-pc {
  box-shadow: 6px 6px rgba(0,0,0,0.1);
  right:6px;
}


.lineup-img-inner {
  background-color:rgba(0,0,0,0);
}

.season-beer .move-back {
  background-color:rgba(0,0,0,0);
}

.season-beer .move-back::before {
  content: ' ';
  position: absolute;
  background-color: #323332;
  width: 500%;
  left: -100%;
  bottom:50px;
  height: 0;
  transition: 0.4s;
  height: 0;
}

.season-beer .move-back-active::before {
  height: 500px!important;
}

<!-- change pages styles -->
loadings {
  position: fixed;
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}
loadings .back01 {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ab192c;
  height: 0;
  z-index:199;
}
loadings .back02 {
  position: fixed;
  top: 100%;
  left: 10%;
  right: 0;
  background-color: #ffcc21;
  height: 0;
  z-index:200;
}
loadings img {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-animation: anime_loading 2.0s linear 0s infinite normal;
  animation: anime_loading 2.0s linear 0s infinite normal;
  z-index:201;
}
loadings.show_up {
  top: 0;
}
loadings.show_up .back01 {
  top: 0;
  height: 100%;
  transition: 0.8s;
}
loadings.show_up .back02 {
  top: 0;
  height: 100%;
  transition: 0.8s;
  transition-delay: 0.4s;
}
loadings.show_up img {
  display: block;
}
loadings.hidden_up {
  top: 0;
}
loadings.hidden_up .back01 {
  top: 0;
  height: 0;
  transition: 0.8s;
}
loadings.hidden_up .back02 {
  top: 0;
  height: 0;
  transition: 0.8s;
  transition-delay: 0.4s;
}
loadings.hidden_up img {
  display: block;
}
@-webkit-keyframes anime_loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}
@keyframes anime_loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

/* ======================================================================================================================
◆会社案内ページ◆
====================================================================================================================== */

#company-page .sub-mainimg {margin-bottom: 80px;}

.top-message-wrap {overflow: hidden;}

.company-info,.company-map {margin-bottom: 120px;}
.info-company {overflow: hidden;}
.info-company dl {padding: 18px 0px;
  margin-bottom: 0;
border-bottom: 1px solid #ddd;
overflow: hidden;}
.info-company dl dt {float: left;
width: 16%;
font-weight: bold;}
.info-company dl dd {float: right;
width: 80%;
font-weight: normal;}

.map {height:450px;}
.message {width:60%;
display: block;
margin: 0 auto;}
.message h3 {margin-bottom: 40px;
line-height: 1.6;
font-size: 24px;
font-weight: bold;}
.top-message-inner {overflow: hidden;
margin-bottom: 80px;
position: relative;}
.top-message-inner h3 {position: absolute;
  color: #FFC914;
  font-size: 128px;
  top:100px;
  font-family: 'Lora', serif;
}
.top-message-inner:after {content: "";
    display: block;
    float: right;
    width: 64%;
    background: url(../img/bg/bg_top-message.jpg) no-repeat center center;
    background-size: cover;
    height: 500px;}

.p-sign {text-align: right;}

.p-sign img {
width: 30%;
height: 30%;}


/* ======================================================================================================================
◆取扱店紹介ページ◆
====================================================================================================================== */

#shoplist-page .sub-mainimg {margin-bottom: 80px;}

#shoplist-page .titlebox-j {margin-bottom: 40px;}
#shoplist-page .titlebox-j h2 {margin-bottom: 20px;}

.area-list {border: 1px solid #ccc;
margin-bottom: 60px;
width: 100%;}

.area-list .hyou01{width:8%; }
.area-list .hyou02{width:20%; }
.area-list .hyou03{width:48%; }
.area-list .hyou04{width:20%; }

.area-list tr {border: 1px solid #ccc;}
.area-list tr td {border: 1px solid #ccc;
vertical-align: middle;
padding: 12px;}

.gray {background-color: #fbfbfb;}

.area-japan-detail h3 {text-align: center;
font-size: 24px;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
margin-bottom: 20px;
}

.sl-area {display: table;
margin: 0 auto;}



.shoplist-area h3 {text-align: center;
font-size: 24px;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
margin-bottom: 20px;
}


.shoplist-area .sl-area {width: 100%;}


/* ======================================================================================================================
◆よくあるご質問ページ◆
====================================================================================================================== */


.faq-midashi {width: 100%;
background-color: #FFC914;
padding: 20px 0;
margin: 60px auto 120px;
}

.faq-midashi-inner {display: table;
margin: 0 auto;
overflow: hidden;
text-align: center;}


.faq-midashi li {margin-right: 24px;}
.faq-midashi li:last-child {margin-right: 0px;}
.faq-midashi i {margin-right: 10px;}

.faq-block .faq-block-tit {text-align: center;}
.faq-block .faq-block-tit:after {content: "";
  width: 100px;
    border-bottom: 2px solid #962D2D;
    display: table;
    margin: 0 auto;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.faq-midashi-inner ul li a {color: #333;}

.faq-block .faq-block-tit {font-size: 28px;}

.faq-box {}

.faqbox-inner {padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px #ccc solid;}
.faqbox-inner:last-child {margin-bottom: 120px;}
.question {font-size: 18px;
margin-bottom: 12px;
color: #333;
overflow: hidden;}
.question dt {float: left;
display: inline-block;}
.question dd {display: inline-block;
line-height: 42px;
font-weight: bold;}
.answer {margin-bottom: 0;}
.answer dd {padding-top: 9px;
display: inline-block;}

.faq-q {background-color: #962D2D;
color: #fff;
width: 42px;
height: 42px;
margin-right: 20px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 42px;
border-radius: 42px;
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
}
.faq-a {margin-right: 20px;
background-color: #ccc;
color: #fff;
width: 42px;
height: 42px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 42px;
border-radius: 42px;
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
float: left;
}



/* ======================================================================================================================
◆ブログページ◆
====================================================================================================================== */

/*アーカイブ*/
.blog-archive {overflow: hidden;}
.blog-archive .imgbox {float: left;}

.blog-archive .imgbox .imgbox-inner {width: 150px;
height: 150px;}

.blog-archive .imgbox .imgbox-inner img {max-width: 100%;
height: auto;}

.blog-archive {margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;}

.blog-archive .imgbox {margin-right: 20px;
}

.blog-archive .textbox {display: table;}
.blog-archive .textbox h2 {font-size: 22px;
color: #333;
margin-bottom: 10px;  }
.blog-archive .textbox time {color: #999;
font-size: 12px;}
.blog-archive .textbox .categories {font-size: 12px;
color: #ccc;}
.blog-archive .textbox .categories a {color: #999;}
.blog-honbun p {line-height: 1.4;
font-size: 14px;
color: #333;
margin-top: 10px;}

#blogpageArea h2 a {color: #333;
font-size: 22px;}


/*シングル*/

.addthis_toolbox {margin-top: 40px;}
#blogdetailArea .titlebox-bd {margin-bottom: 68px;
padding-bottom: 30px;
border-bottom: 1px solid #ccc;}
#blogdetailArea .titlebox-bd h2 {font-size: 28px;
margin-bottom: 20px;
}
#blogdetailArea .titlebox-bd p {margin: 0;}
#blogdetailArea .date-cate {color: #666;}
#blogdetailArea .cate-bd a {color: #666;}
#blogdetailArea .cate-bd {color:#666; }

.blog-sentence {}
.blog-sentence p {margin-bottom: 30px;}
.blog-sentence img {margin: 30px 0px;}


.share-btn {padding-bottom: 60px;
  margin-bottom: 60px;
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #555;}

.bd-navi {display: table;
margin: 0 auto;
text-align: center;
padding: 12px 24px;
background-color: #eee;}

.bd-navi a {color: #333;}


/* ======================================================================================================================
◆お問い合わせページ◆
====================================================================================================================== */


#contact-page .sub-mainimg {margin-bottom: 80px;}

.mailform {color: #666;}

.contact-message p {display: table;
margin: 0 auto;
margin-bottom: 80px;}

/*ライン上タイトル*/
.contactform .c-tit {
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}

.contactform .c-tit::before {
position: absolute;
    top: 50%;
    z-index: 1;
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #666666;
    }

.contactform .c-tit .c-tit-inner {position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 2.5em;
    background-color: #fff;}

.c-form {}

.attention {font-size: 12px;
color: #666;
margin-bottom: 20px;
margin-top: 100px;}

.mailform {width: 100%;}
.mailform th {padding: 30px 0px;
width: 28%;
border-top: 1px solid #eee;
font-weight: normal;
vertical-align: middle;}

.mailform tr:last-child {border-bottom: 1px solid #eee;}

.mailform th .hissu {margin-left: 10px;}
.mailform td {padding: 30px 0px;
border-top: 1px solid #eee;}

.mailform td .simple-box {
    border: solid 1px #f1efef;
    background: #f1efef;
    /*padding: 3px 10px;*/
    -webkit-transition: background 0.2s, border 0.2s;
    -moz-transition: background 0.2s, border 0.2s;
    -o-transition: background 0.2s, border 0.2s;
    transition: background 0.2s, border 0.2s;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    outline-offset: -2px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.mailform td .radioBtn {-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 4px #f1efef;
    background: #f1efef;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: -2px;
    -webkit-transition: background 0.15s;
    -moz-transition: background 0.15s;
    -o-transition: background 0.15s;
    transition: background 0.15s;
    margin: 0;
    margin-right: 8px;
  }

.mwform-radio-field-text {margin-right: 12px;}

.goto-contact {margin-top: 60px;}
.mailform th:last-child {border-bottom: 1px solid #eee!important;}

.mw_wp_form_preview .yellow-btn {background-color: #FFC914;
width: 240px;
height: 60px;
line-height: 60px;
cursor: pointer;
border: none;
display: block;
text-decoration: none;
float: right;
}
.gray-btn {background-color: #eee;
width: 120px;
height: 60px;
line-height: 60px;
cursor: pointer;
border: none;
display: block;
text-decoration: none;
float: left;
}

.mw_wp_form_input .yellow-btn {background-color: #FFC914;
width: 240px;
height: 60px;
line-height: 60px;
cursor: pointer;
border: none;
display: block;
text-decoration: none;
margin: 0 auto!important;
}

#page-breadcrumb .breadcrumb {background-color: none;
}
#page-breadcrumb ul li {float: none;}


/* ======================================================================================================================
◆イベントページ◆
====================================================================================================================== */

#event-page .sub-mainimg {margin-bottom: 120px;}
#calendar tr {margin-bottom: 18px;
  padding-bottom: 18px;
border-bottom: 1px solid #ccc;}

#calendar tr td {display: table;}

.event-information .titbox-events {text-align: center;
margin-bottom: 40px;}
.event-information .titbox-events h3 {margin-bottom: 20px;}

.event-year .monthbox {overflow: hidden;
width: 100%;
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}

.event-year .monthbox .month {float: left;
width: 10%;
margin-right: 2%;
display: inline-block;
text-align: center;
vertical-align: middle;
}

.month-wrap {width: 82px;
height: 80px;
background-color: #fdd108;
border-radius: 40px;        /* CSS3草案 */  
-webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 40px;   /* Firefox用 */
line-height: 80px;
text-align: center;
}

.event-year .monthbox .eventbox {float: left;
display: inline-block;
width: 86%;
vertical-align: middle;
}
.event-year .monthbox .eventbox .eventset {overflow: hidden;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}
.event-year .monthbox .eventbox .eventset:last-child {border:none;
margin-bottom: 0;}
.event-year .monthbox .eventbox .eventday {width: 36%;
  padding-right: 2%;
  margin-right: 2%;
  border-right: 1px solid #ccc;
  float: left;}
.event-year .monthbox .eventbox .eventplace {width: 8%;
  padding-right: 2%;
  margin-right: 2%;
  border-right: 1px solid #ccc;
  float: left;
text-align: center;}
.event-year .monthbox .eventbox .eventname {width: 48%;
  float: left;}

  .next-prev {display: table;
    text-align: center;
    padding: 12px 24px;
    border: #cecece;
    background-color: #000;
    color: #fff;
    margin: 80px auto 0;}

    .next-prev p {margin: 0;}

    .next-prev a {color: #fff;}

    .next-prev-box {overflow: hidden;
      padding: 0 80px;}
    .go-prev {float: left;}
    .go-next {float: right;}


  /* ======================================================================================================================
◆MASAJI BEERページ◆
====================================================================================================================== */

#masaji-beer-page .sub-mainimg {margin-bottom: 80px;}

.kanpai {margin-bottom: 80px;}

.kanpai h2 {display: table;
margin: 0 auto;
font-family: 'Mukta', sans-serif;
font-weight: bold;
font-size: 62px;
line-height: 1;
}

.kanpai img {text-align: center;
width: 180px;
height: auto;
margin: 20px auto 120px;
display: block;
}


.tit-h3 {
  text-align: center;
    font-size: 32px;
    letter-spacing: 0.4em;
    font-family: 'Mukta', sans-serif;
font-weight: bold;
}

.tit-h3:after {
  content: ""; 
width: 100px;
    border-bottom: 2px solid #962D2D;
    display: table;
    margin: 0 auto;
    padding-bottom: 30px;
    margin-bottom: 40px;
  }

.box-mb,.lineup-mb {margin-bottom: 120px;}

.box-mb {text-align: center;}

.tit-h4 {font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 20px;
text-align: center;
color: #777;
}

.tit-h4:after {
  content: ""; 
	width: 10px;
    border-bottom: 1px solid #333;
    display: table;
    padding-bottom: 20px;
	margin: 0 auto;
	margin-bottom: 20px;
  }


.lineup-mb-item {overflow: hidden;
margin-bottom: 20px;}
.lineup-mb-item .l-box {float: left;
width: 80px;
margin-right: 20px;}
.lineup-mb-item .r-box {}

.tomaker {color: #962D2D;
font-size: 80%;
}

.memories {margin-bottom: 80px;
text-align: center;}
.messeage-box {padding: 20px 0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
margin-bottom: 20px;}
.name {text-align: right;
margin-top: 10px;}

.message-to-masaji h3 {text-align: center;
margin-bottom: 40px;}

.message-to-masaji {margin-bottom: 120px;}

.lineup-context {margin-bottom: 60px;
text-align: center;}

.masaji-beer-list {margin: 40px 0;
display: table;}

.masaji-beer-list li {width: 100%;
}

.daihyou {text-align: right;
margin-top: 40px;}

.lineup-context-sp {display: none;}

.on-sp {display: none;}

.tit-box h5 {text-align: center;
margin: 40px 0;
font-size: 18px;}

.lineup-mb-item .l-box img {max-width: 100%;}

.voice  img {width: 80px;
height: 80px;
}

.lineup-mb-item h4 {font-size: 20px;
margin-bottom: 10px;}

.lineup-mb-item h5 {font-size: 16px;}


.lineup-mb .tit-box h5 {background-color: #000;
color: #fff;
padding: 12px 24px;}


.kanpai-left {
  background: url(../img/bg/left_back-.png) no-repeat top left;
  position:relative;
}
.kanpai-right {
background: url(../img/bg/right_back-.png) no-repeat top right;
position:relative;
}
.godfather6 {width: 240px;
margin: 0px 0px 60px;
display: table;}

.shinonde {background: url(../img/bg/syacho.jpg) no-repeat center center;
  background-size:cover;
height: 420px;
margin-bottom: 40px;}

.godfather-wrap {text-align: center;
margin: 0 auto;
display: table;}


  /* ======================================================================================================================
◆頒布会ページ◆
====================================================================================================================== */

#hanpukai-page .sub-mainimg {margin-bottom: 100px;}

.about-hanpukai {margin-bottom: 80px;}

.about-hanpukai h3 {text-align: center;
font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
border-bottom: 3px #E4BF65 solid;
display: table;
margin: 0 auto 60px;
font-weight: bold;
position: relative;
}

.about-hanpukai h3::before {left: -36px;
    bottom: -24px;
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
  content: "";
    position: absolute;
    width: 2px;
    height: 65px;
    background-color: #221815;}


.about-hanpukai h3::after {right: -36px;
    bottom: -24px;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  content: "";
    position: absolute;
    width: 2px;
    height: 65px;
    background-color: #221815;}

.about-hanpukai p {text-align: center;
line-height: 2.4;}

.bold {font-weight: bold;}

.set-menu {overflow: hidden;
margin-top: 40px;}

.hanpukai-title h3 {overflow: hidden;}

.hanpukai-box h4 {background-color: #E4535E;
width: 60px;
height: 60px;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 30px;
display: flex;
  justify-content: center;
  align-items: center;
position: relative;}

.hanpukai-box h4:before{
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #E4535E;
  z-index: 0;
}


.hanpukai-set {margin-bottom: 40px;}

.img-max img {max-width: 100%;}

.hanpukai-attention {margin-top: 40px;}

.limited-beer img {margin-top: 0px;}

.set-menu .set-box {overflow: hidden;}
.set-box tr {width: 100%;}
.set-box th {
  padding: 0px 20px;
  text-align: center;
  vertical-align: middle;
  background-color: #E4BF65;}
.set-box td {
  padding: 0px 6px;
background-color: #fefefe;}

.teiban {font-size: 75%;
color: #fff;
background-color: #000;
padding: 4px 8px;
margin-right: 8px;
border-radius: 3px;}

.limited {background-color: #E4535E;
color: #fff;
font-size: 75%;
padding: 4px 8px;
margin-right: 8px;
border-radius: 3px;
}


.hanpukai-title {text-align: center;
margin: 0 auto;
overflow: hidden;
margin-bottom: 40px;}

.hanpukai-title h3 {padding: 16px 24px;
border:5px solid #E4BF65;
display: inline-block;
margin-bottom: 20px;
box-shadow: 5px 5px 5px #ccc;}

.hanpukai-price {margin-bottom: 80px;}

.hanpukai-sub {margin-bottom: 80px;}

.course-box {border:3px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
padding: 20px;}

.course-box h4 {text-align: center;
font-size: 20px;
margin-top: 20px;
}

.course-box h4:after {content: "";
width: 100px;
display: table;
border-bottom: 2px solid #ccc;
margin: 0 auto;
padding-top: 20px;
margin-bottom: 20px;}


.course-box h5 {text-align: center;
font-size: 18px;
font-weight: bold;
}

.course-box .two-course {background-color: #E4535E;
width: 90px;
height: 90px;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 45px;
display: flex;
  justify-content: center;
  align-items: center;
position: relative;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;}


.course-box .two-course:before{
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-top: 20px solid #E4535E;
  z-index: 0;
}

.course-box h6 {text-align: center;
font-size: 15px;
}

.zeikomi {font-size: 15px;}

.way-box {margin-bottom: 30px;}
.way-box h4 {padding-bottom: 10px;
border-bottom: 1px solid #999;
margin-bottom: 20px;}

.buy-hunpukai {padding: 12px 24px;
color: #fff;
background-color: #000;
display: inline-block;
box-shadow: 2px 2px 2px #ccc;
}

.hanpukai-shopping a {color: #fff;}
.hanpukai-shopping  {text-align: center;
margin-top: 40px;}

.example-month-wrap {overflow: hidden;}

.example-month {margin-top: 15px;
background-color: #efefef;
padding: 15px;
display: inline-block;}

.example-month:last-child {margin-bottom: 15px;}

.example-month h5 {font-weight: bold;}

.naiyou_nakami {color: #E4535E;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  background: linear-gradient(transparent 50%, yellow 50%);
}

.limited-beer {margin-top: 40px;}
.limited-beer .s-beer-list li {width: 100%;}

.limited-box {position: relative;}
.limited-box h4 {background-color: #E4535E;
width: 110px;
height: 110px;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 55px;
display: flex;
  justify-content: center;
  align-items: center;
border: 5px solid #fff;}


  .limited-inbox {background-color: #E4535E;
    padding: 40px 60px 30px 60px;
    position: absolute;
    top:55px;
    left:40px;
    z-index: -999;
    color: #fff;}

  .mt40 {margin-top: 40px;}

  .hanpukai-sub-sp {display: none;}

.course-box h6 br {display: none;}



  /* ======================================================================================================================
◆2019感謝祭ページ◆
====================================================================================================================== */

#ttt-page .sub-mainimg {margin-bottom: 100px;}

.ttt-info .tit-h2 {line-height: 1.4;}

.ttt-access li {width: 100%;
margin-bottom: 12px;}

.place {margin-bottom: 60px;}
.ttt-b {font-weight: bold;}
.ttt-date {text-align: center;
font-family: "Roboto Slab", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;}

#ttt-page .tit-under {margin-bottom: 40px;}

.ttt-date {margin-bottom: 60px;}

.ttt-date-big {font-size:58px;}
.ttt-date-small {font-size:28px;
padding-right: 10px;}
.ttt-date-small-en {font-size:28px;
padding-right: 10px;
padding-bottom: 10px;}
.ttt-date-big-jp {font-size:32px;}
.ttt-date-small-jp {font-size:24px;}

.maeuri {margin-bottom: 40px;
overflow: hidden;}

.novelty {
overflow: hidden;
display: table;
margin: 0 auto 80px;
}


.toujitsu {margin-bottom: 80px;
overflow: hidden;
}

.box-maeuri {margin-bottom: 20px;}

.tit-maeuri,.tit-toujitsu,.tit-novelty {text-align: center;
margin-bottom: 20px;}

.tit-novelty h3 {font-size: 16px;
font-size: 400;
border:1px solid #333;
padding: 10px 20px;
background-color: #000;
color: #fff;
display: table;
text-align: center;
margin: 0 auto;}


.tit-maeuri h3,.tit-toujitsu h3 {font-weight: 500;
font-size: 22px;}

.box-border {text-align: center;
  padding: 20px 120px;
  border: 1px #333 solid;
  display: table;
  margin: 0 auto;
  font-weight: 600;
}
.box-border02 {text-align: center;
  padding: 20px 210px;
  border: 1px #333 solid;
  display: table;
  margin: 0 auto;
  font-weight: 600;
}

.txt-maeuri,.txt-toujitsu {font-size: 90%;
width: 70%;
margin: 0 auto;}
.txt-maeuri li,.txt-toujitsu li {width: 100%;}

.ticket-attention {border: 1px solid red;
}

.attention-box {color: red;
  font-size: 90%;
  padding: 20px;
  overflow: hidden;
}
.attention-box h3 {font-size: 18px;
text-align: center;
margin-bottom: 20px;}

.ticket {margin-bottom: 120px;}

.event-access {margin-bottom: 40px;}

.access-point {font-size: 90%;
background-color: #eee;
padding: 30px;
margin: 0;}

.access-point p {margin: 0;}

.info-ttt-box {
overflow: hidden;
width: 90%;
margin: 0 auto 40px;}

.info-ttt-box:last-child {margin-bottom: 0;}

.info-ttt-box h3,.warehouse-ttt-box h3 {text-align: center;
font-size: 18px;
padding: 10px 0;
border-top:1px solid #999;
border-bottom:1px solid #999;
margin-bottom: 30px;
}

.info-ttt-box li {line-height: 2;}

.info-ttt {margin-bottom: 100px;}

.ttt-img img {max-width: 100%;}

.warehousebox {margin-bottom: 40px;}

.ttt-access {overflow: hidden;
margin-bottom: 40px;}

.item {overflow: hidden;}

.item h4 {background-color: #000;
padding: 10px;
text-align: center;
color: #fff;
font-size: 12px;
margin-bottom: 20px;}

.item li {width: 100%;}

.warehouse-ttt-box {overflow: hidden;}
.warehouse-ttt-box li {width: 100%;}

.uchikeshi {text-decoration:line-through;}

.aisatsu {text-align: center;
}

.txt-maeuri {overflow: hidden;
margin-bottom: 60px;}

.ticket-hanbai {overflow: hidden;}

.yahoo {text-align: center;
background-color: #fdd108;
padding: 10px 0;
margin-bottom: 20px;}
.yahoo a {color: #333;}
.hanbai-space {padding: 24px 36px;
border: 1px #ccc solid;}
.realshop {font-weight: bold;}

.greating-ttp {margin-bottom: 80px;}

.info-ttt-box li {width: 100%;}

.foodbox img {max-width: 100%;
margin-bottom: 20px;
}

.foodshop {margin-bottom: 120px;}

.foodbox {margin-bottom: 20px;}

.food-tit h3 {text-align: center;
font-size: 24px;
margin-bottom: 24px;
margin-top: 36px;
font-weight: bold;}

.foodbox h4 {font-size: 18px;
margin-bottom: 10px;}

.foodbox h4 a {color: #333;
font-weight: bold;}

.provide {line-height: 1.4;
font-size: 15px;}

.people {overflow: hidden;}

.people h4 {font-size: 16px;
    font-size: 400;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    display: table;
    text-align: center;
    margin: 0 auto 40px;}

.people .sat {color:#0600ff;
padding-bottom: 18px;
display: table;
border-bottom:#0600ff 2px solid;
text-align: center;
margin: 0 auto 30px;}
.people .sun {color:#ff0000;
padding-bottom: 18px;
display: table;
border-bottom:#ff0000 2px solid;
text-align: center;
margin: 0 auto 30px;}
.people h5 {
  font-size: 18px;
}
.people dt {margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #333;
display: table;}
.timetable {text-align: center;}
.timetable th {padding-left: 20px;}
.mb10 {margin-bottom: 10px;
text-align: left;
font-weight: 700;
padding-bottom: 8px;
border-bottom: 1px solid #333;
display: table;}

.finish {text-align: center;
margin-top: 30px;}

.ecoeco {background-color: #eee;
padding: 20px;}

.covojean {margin-left: 20px;
font-size: 75%;
color: red;}

.chiiki {text-align: center;
padding-top: 20px;
text-decoration: underline;
display: block;}

}