@charset "UTF-8";

html {
  font-size:62.5%;
  width: 100%;
  height: 100%;
}
body {
  font-size:1.4rem;
  background-color: #E1BA42;
  margin: 0;
  font-family: 'M PLUS 1p', sans-serif;
}
#wrapp{
  overflow: hidden;
}
*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

@font-face {
    /*フォントの名前*/
    font-family: "tetubin";
    /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
    src: url("../font/tetubin.woff2") format("woff2"),
         url("../font/tetubin.woff2") format("woff");
  }

  h2, h3{
    font-family: "tetubin";
    color: #274B57;
  }

#insta  ul {
    display: flex;
    flex-wrap: wrap;
  }
  #insta  li {
    list-style: none;
    width: 20%;
  }
  #insta  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  #insta  li a {
    position: relative;
    display: block;
  }
  #insta  li a .like {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    opacity: 0.6;
    text-shadow: 0 0 7px #000;
  }
  #insta  h1 {
    text-align: center;
    font-size: 30px;
    font-weight:bold;
    padding: 30px;
    color:#333;
  }

/*==// スライダーと文字のwrap //==*/
main > div{ position:relative; }
/*==// 上に載せる文字部分 //==*/
main > div section{
	color:#fff;
	position:absolute;
	/*上下中央に文字配置*/
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	left:10%;
}
main > div section h2{ margin-bottom:15px; font-size:30px; font-size:3rem; }
main > div section p{ font-size:18px; font-size:1.8rem; }
/*==// スライダーのコンテナ //==*/
main .slider{
		padding-top:46px;/*戻るボタンの高さ分あけてます*/
		width:100%;/* スライダーの幅を指定*/
		list-style:none;
	}
/*==//  ここから矢印  //==*/
.slick-arrow{ z-index:100; }
.slick-next{ right:10px;}/*内側に右から10ピクセル移動*/
.slick-prev{ left:10px; }/*内側に左から10ピクセル移動*/

/**メインビジュアル**/

.mainvisual{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20px 30px;
    max-width: 1250px;
    width: 100%;
    margin: auto;
}
.mainvisual h1 img{
    max-width: 430px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
.main-slider{
    max-width: 850px;
    width: 100%;
    animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.main-slider img{
    max-width: 1300px;
    width: 100%;
    border-radius: 75px;
    border: 8px solid #211B13;
}

/**波線**/
.wave{
    position:relative;
    height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
    background:#E1BA42;/*背景を塗りつぶして重ねた波を表現したい場合は、波を描画する親要素に波と同じ背景色を設定しましょう。*/
    margin-bottom: -20px;
    z-index: -1;
    }
    canvas{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    }





/**ループスライド**/
.loop-slide_wrap{
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    overflow: hidden;
    margin: 50px 0;
}

.loop-slide_wrap ul{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

.loop-slide_wrap ul:first-child{
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

.loop-slide_wrap ul+ul{
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
}

.loop-slide_wrap li{
    display: inline-block;
    width: calc(100vw / 2);
    min-width: 150px;
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
}
.loop-slide_wrap img{
    display: block;
    width: 100%;
    height: auto;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }

  /**CRAFT BEER WAGONとは？**/
.about-area{
  background-color: #F5F3CF;
  padding: 30px 0;
}
.about h2{
  text-align: center;
  font-size: 37px;
  margin: 50px 0;
}


  .about-inner{
    position: relative;
  }

  .about-inner p{
    padding: 30px 0;
    font-size: 18px;
    line-height: 36px;
    max-width: 620px;
    width: 100%;
    margin: auto;
  }

  .about-beer{
    max-width: 1090px;
    width: 100%;
    margin: auto;
    background-color: #fff;
    border: 8px solid #211B13;
    border-radius: 70px;
    padding: 50px 70px;
    margin-bottom: 160px;
    opacity: 0;
  }
  .about-beer h2{
    text-align: center;
    margin-bottom: 70px;
    font-size: 37px;
  }

  .beer-intro{
    display: grid;
    grid-template-columns: 370px 1fr;
    column-gap: 100px;
    row-gap: 50px;
    padding: 0 30px;
  }
  .beer-intro-img img{
    max-width: 370px;
    width: 100%;
  }
.beer-intro-txt h3{
  font-size: 22px;
}
.beer-intro-txt p{
  padding: 10px 0 30px;
}

  .entry{}

  .entry-inner{
    max-width: 1090px;
    width: 100%;
    margin: auto;
    margin-bottom: 150px;
  }

  .entry-inner h2{
    text-align: center;
    font-size: 37px;
    margin: 50px 0;
  }
  .entry-inner p{
    text-align: center;
    font-size: 18px;
    line-height: 36px;
  }

  .entry-btn{
    max-width: 435px;
    width: 100%;
    display: block;
    margin: 50px auto;
  }

  .entry-btn a{
    background-color: #274B57;
    padding: 25px 45px;
    font-size: 26px;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
  }
  .entry-btn a:hover{
    opacity: 0.8;
  }

  footer{
    color: #fff;
    background-color: #234E5C;
    padding-bottom: 10px;

  }
  footer h3{
    font-size: 26px;
    text-align: center;
    color: #fff !important;
 padding-top: 30px;
  }
  .foot-info{
    max-width: 620px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
  }


  /**泡**/
  #wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 2;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */
#particles-js {
  position: absolute;
  width: 100%;
  height: 45%;
  z-index: 1;
}
#particles-js canvas{

}

/* ---- stats.js ---- */
.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}


/**インスタ**/
.insta-info{
  padding-top: 0px;
  padding-bottom: 50px;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

.insta{
  opacity: 0;
}
.animation-target6 {
  opacity: 1;
  animation: animation3 2000ms linear both;
  animation-delay: 0s;
  z-index: 5;
}

@keyframes animation3 {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 400, 0, 0, 1); }
  5.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 141.883, 0, 0, 1); }
  8.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 53.558, 0, 0, 1); }
  11.11% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.21% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.082, 0, 0, 1); }
  17.22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 37.334, 0, 0, 1); }
  33.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.492, 0, 0, 1); }
  55.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.006, 0, 0, 1); }
  61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.166, 0, 0, 1); }
  77.88% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.011, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}




.insta-area{
  max-width: 1600px;
  width: 100%;
  border: 8px solid #211B13;
  border-radius: 70px 0 0px 70px;
  background-color: #fff;
  position: absolute;
  right: 0;
}
.insta-area h2{
  text-align: center;
  margin: 50px 0;
}
#insta{
  max-width: 1200px;
  width: 100%;
  margin: auto;
  margin-bottom: 120px;
}
.bkimg{
  position: relative;
}

.bkimg img{
  position: absolute;
  bottom: -450px;
  max-width: 155px;
  width: 100%;
  z-index: 10;
  left: 2%;
}

.about-bk{
position: relative;
}
.abk01,.abk02,.abk03,.abk04{
position: absolute;
width: 250px;
opacity: 0;
}

.abk01{
top: 0;
left: 10%;
}

.abk02{
  width: 200px;
top: 130px;
right: 10%
}

.abk03{
  width: 200px;
bottom: 0;
left: 10%;
}

.abk04{
  width: 200px;
bottom: 0;
right: 10%;
}

.insta img{
  display: block;
  margin: auto;
}

/*イラスト表示アニメーション*/



.animation-target {
  animation: animation 2000ms linear both;
  opacity: 1;
}

.animation-target2 {
  opacity: 1;
  animation: animation2 2000ms linear both;
  animation-delay: 0.5s;
  z-index: 5;
}
.animation-target3 {
  opacity: 1;
  animation: animation2 2000ms linear both;
  animation-delay: 0.75s;
  z-index: 5;
}
.animation-target4 {
  opacity: 1;
  animation: animation2 2000ms linear both;
  animation-delay: 0.5s;
  z-index: 5;
}

.animation-target5 {
  opacity: 1;
  animation: animation2 2000ms linear both;
  animation-delay: 0.75s;
  z-index: 5;
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A2%2Cy%3A2%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */

@keyframes animation {
  0% { transform: matrix3d(0.25, 0, 0, 0, 0, 0.25, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.75, 0, 0, 0, 0, 0.75, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { transform: matrix3d(1.052, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { transform: matrix3d(1.093, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation2 {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.75, 0, 0, 0, 0, 0.75, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { transform: matrix3d(1.052, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { transform: matrix3d(1.093, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}





/*レスポンシブ*/

@media screen and (max-width: 1600px){
    .abk01{
      width: 170px;
    top: 0;
    left: 0%;
    }

    .abk02{
      width: 170px;
    top: 130px;
    right: 0%
    }

    .abk03{
      width: 170px;
    bottom: 0;
    left: 0%;
    }

    .abk04{
      width: 170px;
    bottom: 0;
    right: 0%;
    }

}

@media screen and (max-width: 1219px){
  .abk01,.abk02,.abk03,.abk04{
    display: none;
    }
    .main-slider{
      max-width: 780px;
    }
}

@media screen and (max-width: 1080px){
  .mainvisual{
    display: block;
  }
  .mainvisual h1 img{
    max-width: 300px;
  }
  .main-slider{
    margin: auto;
  }
  .bkimg img{
    bottom: -60px;
  }
  .loop-slide_wrap li{
    min-width: 200px;
  }
  .about-inner p{
    max-width: 750px;
  }
}
@media screen and (max-width: 790px){
  .mainvisual{
    padding: 20px 10px;
  }
 .mainvisual h1 img{
   max-width: 180px;
 }
 .main-slider img{
   border-radius: 30px;
 }
 .bkimg img{
   max-width: 85px;
 }
 .insta img{
  width: 100%;
  padding: 20px;
 }
 .slider{
   padding: 0;
 }
 .about h2{
   font-size: 24px;
 }
 .wave{
   height: 100px;
 }
 .loop-slide_wrap li{
   min-width: 190px;
   margin: 0 5px 0 0;
 }
 .about-inner{
   padding: 10px;
 }
 .about-inner p{
   font-size: 14px;
   padding: 10px;
   line-height: 28px;
 }
 .about-beer{
   border-radius: 30px;
   padding: 30px 20px;
 }
 .beer-intro{
   display: block;
   margin: auto;
   margin-bottom: 20px;
   padding: 0;
 }
 .beer-intro-img img{
   margin: 0 auto;
   display: block;
 }
 .beer-intro-txt{
   text-align: center;
 }
 .entry-inner h2{
   font-size: 24px;
 }
 .entry-inner p{
   font-size: 14px;
 }
 .entry-btn{
   max-width: 280px;
 }
 .entry-btn a{
   font-size: 14px;

 }
 footer h3{
   font-size: 22px;
 }
 .foot-info{
  margin: 0 auto;
  flex-wrap: wrap;
  width: 100vw;
  margin-bottom: 20px;
  padding-bottom: 20px;
 }

 .entry-inner{
   margin-bottom: 60px;
 }
 #waveCanvas2{
   bottom: -1px;
 }

@keyframes animation {
  0% { transform: matrix3d(0.75, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.8, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.9, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { transform: matrix3d(1.02, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
.about-beer h2{
  font-size: 24px;
}
}

/* 2022.07.05 added */
small {
  font-size: 100%;
}
#main_footer_copyright {
  font-size: 12px;
  text-align: center;
  margin: 20px 0 0 0;
}
#main_footer_msg {
  margin: 0 0 0px 0;
}
#copyright {
  margin: 0 0 10px 0;
}
@media screen and (max-width: 790px){
  .foot-info {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #main_footer_copyright {
    font-size: 11px;
    margin: 0px 0 0 0;
  }
}