#wave {
  margin-top: -22px;
  padding-top: 22px;
  background: url(../img/bg/wave.png) repeat-x 0 0;
  -webkit-animation: webkit-move_wave 8s linear 0s infinite normal;
  animation: move_wave 8s linear 0s infinite normal;
}
@-webkit-keyframes webkit-move_wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 880px 0;
  }
}
@keyframes move_wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 880px 0;
  }
}


/*change pages styles*/
loadings {
  position: fixed;
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:20000;
}
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%;
  margin-left: -75px;
  margin-top: -75px;
  -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;
  width: 150px;
  height: 150px;
}
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;
  width: 150px;
  height: 150px;
}
@-webkit-keyframes anime_loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes anime_loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/*Gナビ*/
#gnav-fix {
  z-index: 1000;
}
ul.nav li a {
  position: relative;
  transition: 0.4s;
}
ul.nav li a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.8);
  left: 0;
  bottom: 1px;
  transition: 0.4s;
}
@media (min-width: 768px) {
ul.nav li a:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
}
ul.nav li a:hover:after {
  width: 100%;
}
  }


/*トップ_コンテンツボックス*/
.contents-box01 .border {
  background-image: url('../../img/index/contents01.jpg');
}
.contents-box02 .border {
  background-image: url('../../img/index/contents02.jpg');
}
.contents-box03 .border {
  background-image: url('../../img/index/contents03.jpg');
}
.contents-box04 .border {
  background-image: url('../../img/index/contents04.jpg');
}
.contents-box05 .border {
  background-image: url('../../img/index/contents05.jpg');
}
.contents-box06 .border {
  background-image: url('../../img/index/contents06.jpg');
}
.concept-bg {
  position: relative;
  z-index: 0;
}
.concept-bg:before {
  content: '';
  background: inherit;
  position: absolute;
  z-index: -1;
  transition: 1s;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
}
.filter_blur:before {
  content: '';
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
}
.no_scroll {
  overflow: hidden;
}
.lbox .init,
.rbox .init {
  opacity: 0!important;
  top: 200px!important;
}
.lbox .relative,
.rbox .relative {
  poisition: relative;
  top: 0;
  transition: 0.6s;
}
.lbox .relative:before,
.rbox .relative:before {
  content: '　';
  border-top: solid 3px rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 10px;
  left: 100%;
  right: 13px;
  transition: 0.6s;
}
.lbox .relative:after,
.rbox .relative:after {
  content: '　';
  border-bottom: solid 3px rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: 10px;
  left: 13px;
  right: 100%;
  transition: 0.6s;
}
.lbox .relative:hover,
.rbox .relative:hover {
  opacity: 0.8;
}
.lbox .relative:hover:before,
.rbox .relative:hover:before {
  left: 13px;
}
.lbox .relative:hover:after,
.rbox .relative:hover:after {
  right: 13px;
}
.lbox .relative .border,
.rbox .relative .border {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-right: 2px;
  margin-bottom: 1px;
  top: 0;
  opacity: 1;
  transition: 0.6s;
}
.lbox .relative .border:before,
.rbox .relative .border:before {
  content: '';
  border-left: solid 3px rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 100%;
  left: 10px;
  bottom: 10px;
  transition: 0.6s;
}
.lbox .relative .border:after,
.rbox .relative .border:after {
  content: '';
  border-right: solid 3px rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 100%;
  transition: 0.6s;
}
.lbox .relative .border img,
.rbox .relative .border img {
  opacity: 0;
}
.lbox .relative .border:hover,
.rbox .relative .border:hover {
  background-size: 110%;
}
.lbox .relative .border:hover:before,
.rbox .relative .border:hover:before {
  top: 10px;
}
.lbox .relative .border:hover:after,
.rbox .relative .border:hover:after {
  bottom: 10px;
}


/*トップ_コンセプト*/
#conceptArea {
  margin-top: 0;
}
#conceptArea .circle-back {
  opacity: 0;
  transition: 2s;
    height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
#conceptArea .conceptwrap {
  opacity: 0;
  transition: 2s;
}
#conceptArea .conceptwrap .catchcopy_clear {
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#conceptArea .conceptwrap .catchcopy {
  transition: 0.5s;
}
#conceptArea .conceptwrap .concept-catch {
  transition: 1s;
  opacity: 0;
}
#conceptArea .conceptwrap .concept-txt {
  transition: 1s;
  opacity: 0;
}


/*箕面ビールについて*/
/*PC・768px以上の場合*/
@media (min-width: 768px) {
.aboutblock .textbox {
  padding: 30px;
  transition: 1s;
  transition-delay: 0s;
}
}

/*SP・767px以下の場合*/
@media (max-width: 767px) {
  .aboutblock .textbox {
  margin-top: 40px;
  padding: 20px;
  transition: 1s;
  transition-delay: 0s;
}
}

.aboutblock .about01,
.aboutblock .about03 {
  transition: 0.8s;
}
.aboutblock .about01 .textbox,
.aboutblock .about03 .textbox {
  background-color: rgba(0, 0, 0, 0.6);
  transition-delay: 0.2s;
}
.aboutblock .about02,
.aboutblock .about04,
.aboutblock .about05 {
  transition: 0.8s;
}
.aboutblock .about02 .textbox,
.aboutblock .about04 .textbox,
.aboutblock .about05 .textbox {
  background-color: rgba(255, 255, 255, 0.6);
  transition-delay: 0.2s;
}
.aboutblock .init {
  transform: rotateX(90deg);
}
.aboutblock .init .textbox {
  opacity: 0;
  margin-top: 300px;
}
.aboutblock .init:nth-child(odd) {
  /*margin-left:100%;*/
}
.aboutblock .init:nth-child(even) {
  /*margin-left:-100%;*/
}


/*商品紹介ページ*/
/*定番ビール*/
.classic-beer {
  position: relative;
}

.classic-beer:after {
  content: ' ';
  position: absolute;
  background-color: #fecc1d;
  width: 100%;
  left: 0;
  height: 0px;
  transition: 0.8s;
  bottom: 500px;
  z-index: -1;
}
.classic-beer .lineup-img-inner .textbox-pc {
  box-shadow: 6px 6px rgba(0, 0, 0, 0.1);
  right: 6px;
}
.classic-beer .lineup-img-inner .textbox-pc .titlebox01,
.classic-beer .lineup-img-inner .textbox-pc .titlebox02,
.classic-beer .lineup-img-inner .textbox-pc .commentbox {
  transition: 1.2s;
}
.classic-beer .lineup-img-inner .textbox-pc .commentbox {
  left: 40px;
}
.classic-beer .lineup-img-inner .textbox-pc .start01 {
  left: -240px;
  opacity: 0;
}
.classic-beer .lineup-img-inner .textbox-pc .start02 {
  right: 240px;
  opacity: 0;
}
.classic-beer .lineup-img-inner .textbox-pc .start03 {
  left: -200px;
  opacity: 0;
}
.classic-beer .classic-beer-active:after {
  height: 490px!important;
}
.lineup-img-inner {
  background-color: rgba(0, 0, 0, 0);
}

/*シーズナルビール*/
.season-beer .move-back {
  background-color: rgba(0, 0, 0, 0);
}
.season-beer .textbox-pc {
  box-shadow: 6px 6px rgba(0, 0, 0, 0.1);
  right: 6px;
}
.season-beer .textbox-pc .titlebox01,
.season-beer .textbox-pc .titlebox02,
.season-beer .textbox-pc .commentbox {
  transition: 1.2s;
}
.season-beer .textbox-pc .commentbox {
  left: 50px;
}
.season-beer .textbox-pc .start01 {
  left: 180px;
  opacity: 0;
}
.season-beer .textbox-pc .start02 {
  right: -160px;
  opacity: 0;
}
.season-beer .textbox-pc .start03 {
  left: 250px;
  opacity: 0;
}
.season-beer .move-back:before {
  content: ' ';
  position: absolute;
  background-color: #323332;
  width: 500%;
  left: -100%;
  bottom: 50px;
  transition: 0.4s;
  height: 0;
  z-index: -999;
}
.season-beer .move-back-active:before {
  height: 600px!important;
}

/*オリジナルグッズ*/
.original-goods .move-back {
  background-color: rgba(0, 0, 0, 0);
}
.original-goods .textbox-pc {
  box-shadow: 6px 6px rgba(0, 0, 0, 0.1);
  right: 6px;
}
.original-goods .textbox-pc .titlebox01,
.original-goods .textbox-pc .titlebox02,
.original-goods .textbox-pc .commentbox {
  transition: 1.2s;
}
.original-goods .textbox-pc .commentbox {
  left: 50px;
}
.original-goods .textbox-pc .start01 {
  left: 180px;
  opacity: 0;
}
.original-goods .textbox-pc .start02 {
  right: -160px;
  opacity: 0;
}
.original-goods .textbox-pc .start03 {
  left: 250px;
  opacity: 0;
}
.original-goods .move-back:before {
  content: ' ';
  position: absolute;
  background-color: #962D2D;
  width: 500%;
  transition: 0.4s;
  height: 0;
  z-index: -999;
}
.original-goods .move-back{
  position:relative;
}
@media (min-width: 768px) {
  .original-goods .move-back:before {
    left: -100%;
    bottom: 20px;
  }
  .original-goods .move-back-active:before {
    height: 600px!important;
  }
}
@media (max-width: 767px) {
  .original-goods .move-back:before {
    left: 0;
    bottom: 0px;
  }
  .original-goods .move-back-active:before {
    height: 710px!important;
  }
}


/*ビールアニメーション*/

.anime_area {
  position: relative;
  transition: 0.4s;
}
.anime_area .beer {
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  margin-top: -250px;
  margin-left: -67px;
  transform-origin: bottom;
  transition: 0.05s;
}
.anime_area .beer_init {
  display: none;
}
.anime_area .beer_up {
  transform: scale(10) translateY(120%) !important;
  /*left:-100%;*/
  transition: 1s;
}
.anime_area .bin_top_area {
  position: absolute;
  bottom: -200%;
  width: 355px;
  height: 656px;
  left: 50%;
  margin-left: -178px;
  transition: 0.4s;
}
.anime_area .bin_top_area .beer_top {
  margin-top: 0;
  transition: 1.2s;
}
.anime_area .bin_top_area .oukan {
  position: absolute;
  overflow: hidden;
  height: 304px;
  width: 300px;
  left: 30px;
  top: -116px;
  transition: 3s;
  z-index: 100;
}
.anime_area .bin_top_area .oukan img {
  position: relative;
  width: 100%;
  top: -912px;
}
.anime_area .bin_top_area .sp_oukan {
  position: fixed;
  overflow: hidden;
  height: 250px;
  width: 250px;
  left: 50%;
  top: 50%;
  margin-top: -125px;
  margin-left: -125px;
  transition: 2s;
  z-index: 100;
  opacity: 0;
  display: hidden;
}
.anime_area .bin_top_area .sp_oukan img {
  position: relative;
  width: 100%;
  top: -1265px;
}
.anime_area .bin_top_area .flash01,
.anime_area .bin_top_area .flash02 {
  z-index: 101;
  display: none;
  opacity: 1;
  transition: 0.3s;
}
.anime_area .bin_top_area .flash01 img,
.anime_area .bin_top_area .flash02 img {
  top: -1520px;
}
.anime_area .bin_top_area .e_flash {
  opacity: 0;
  transform: scale(3, 3);
}
.anime_area .scall_beer {
  position: absolute;
  left: 0;
  top: 150%;
  width: 100%;
  height: 100%;
  background-color: #fdd108;
  transition: 4s;
  background-image: url(../../img/anime/awa.png);
  background-position: 0 10px;
  -webkit-animation: webkit-move_awa 12s linear 0s infinite normal;
  animation: move_awa 12s linear 0s infinite normal;
}
.anime_area .scall_beer:after {
  content: '';
  background: url(../img/bg/wave.png) repeat-x 0 0;
  -webkit-animation: webkit-move_wave 8s linear 0s infinite normal;
  animation: move_wave 8s linear 0s infinite normal;
  width: 100%;
  height: 32px;
  position: absolute;
  left: 0;
  top: -20px;
}
.anime_area .scall_beer span {
  font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  display: block;
  font-size: 32pt;
  color: #b50029;
  opacity: 0;
  transition: 1s;
  margin-top: 20%;
}
.anime_area svg {
  height: 100%;
  transition: 2s;
}
.anime_area svg path {
  opacity: 0;
  transition: 2s;
}
.anime_area .up {
  transform: scale(3, 3) translate(0, 32%);
}
@-webkit-keyframes webkit-move_awa {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1000px;
  }
}
@keyframes move_awa {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1000px;
  }
}


ul.nav li a:focus {
	background-color:rgba(0,0,0,0)!important;
	color:#fff;
}
ul.nav li a:focus:after {
	width:100%;
}

.blog-ichiran-btn .fa-angle-right:before {
  position:relative;
  top:3px;
  left:6px;
}

.fa-angle-right:before {
	position:relative;
	top:0px;
	left:6px;
}

@media (max-width: 767px) {
  footer {
    background-image: url(../../img/anime/awa.png);
    -webkit-animation: webkit-move_awa 56s linear 0s infinite normal;
    animation: move_awa 56s linear 0s infinite normal;
  }
  /* お問い合わせページ 電話番号フィールド */
  .mwform-tel-field input {
  	width:auto!important;
  }
}