@charset "utf-8";
/***************************************
  min-width:769 PCレイアウト
  max-width:768 SPレイアウト
***************************************/
#str-main img{width:100%;height:auto;background-image:none;backface-visibility:hidden;}
#str-main {margin-bottom:7.8%;}

#str-main figure{margin:0;}
#str-main .clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

#str-main .fadeItem,#str-main .fade_right,#str-main .fade_left{opacity:0;}
#str-main .fade_left{transform: translateX(-20px);}
#str-main .fade_right{transform: translateX(20px);}
#str-main .fadeItem.fadeAct{transition:opacity .5s ease;opacity:1;}
#str-main .fade_left.fadeAct,#str-main .fade_right.fadeAct{transition:opacity .5s ease,transform .5s ease;opacity:1;transform: translateX(0);}
@media screen and (min-width: 769px) {
#str-main #subNav img{width:auto;}
}
@media screen and (max-width: 768px) {
  #str-main {margin-bottom:15.62%;}
}


/***************************
frame
***************************/
section.frame {padding-top: 7.98%;padding-bottom: 7.2%;}
section.frame .inner {margin: 0 auto;max-width: 960px;width: 96.87%;}
section.frame h2 {margin: 0 auto;}

@media screen and (max-width: 768px) {
  section{overflow:hidden;}
  section.frame {padding: 15.625% 0 12.5%;}
  section.frame .inner {margin:0 auto;width:93.75%;}
  section.frame h2 {margin: 0 auto;}
}


/***************************
mainVisual
***************************/
.kv{
  padding: 0;
  background:url('../images/kv_bg.jpg') top center / 100% auto no-repeat;
  background-size: cover;
}
.kv_container{
  max-width: 852px;
  width: 100%;
  margin: 0 auto;
}
.kv_image{
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .kv{
    padding: 0;
    background:url('../images/kv_bg_sp.jpg') top center / 100% auto no-repeat;
    background-size: cover;
  }
}


/***************************
info
***************************/
/*** info01 ***/
#info01{
  padding: 0;
  background-color: #040404;
}

@media screen and (min-width: 769px) {
  #info01 h2{margin:0 auto;padding:4.16% 0;max-width: 97.70833333333333%}
}

@media screen and (max-width: 768px) {
  #info01 h2{padding:9.37% 0 8.59%;max-width: 78.53333333333333vw;}
}

/*** info02 ***/
#info02{
  padding: 0;
  background:url('../images/is_bg.jpg') top center / cover no-repeat;
}

@media screen and (min-width: 769px) {
  #info02 h2{
    padding-top:7.2%;
    margin-bottom:4.89%;
    width: 100%;
  }
  #info02 h2 img{
    width: auto;
    max-width: 100%;
    margin: auto;
  }
  #info02 .box{padding-bottom:5.72%;}
  #info02 .text01,#info02 figure{float:left;}
  #info02 figure{width:50%;}
  #info02 .text01{width:50%;}
  #info02 .text01 img{  width: auto; max-width: 100%; margin: 0 auto 0 0;}
}

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

  #info02 h2{
    padding-top:8.333%;
    margin-bottom:7%;
  }
  #info02 .text01{margin-bottom:8.33%;}
  #info02 figure{padding-bottom:7.5%;}
  #info02 .text01 img{width: 93.6vw;}
}

/*** info03 ***/
#info03{
  padding: 0;
  background:url('../images/is_bg.jpg') top center / cover no-repeat;
}
#info03 .beer{position:relative;}
#info03 .beer .ph01{position:absolute;}
#info03 .inner {  position: relative;}
#info03 .textBox{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width: 769px) {
  #info03 .beer,#info03 .textBox{width:50%;}
  #info03 .beer{float:left;}
  #info03 .beer .ph01{bottom:5.75%;right:-13.1%;width:44.58%;}
  #info03 .textBox h2{margin:0 0 7.29%0;width:100%;}
  #info03 .textBox .text01{width:100%;}
}

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

  #info03 .beer .ph01{position:absolute;bottom:8.82%;left:59%;width:38.33%;}
  #info03 .textBox {
    position: static;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    margin-bottom: 10%;
  }
  #info03 .textBox h2{padding-top:10%;padding-bottom:7.5%;}

}
/*** info04 ***/
#info04{
  padding: 0;
  background-image:url('../images/info04_bg.jpg');
  background-repeat: no-repeat;
  background-position:center top;
  background-size:cover;
}
#info04 .textBox,#info04 .beer{float:left;}
@media screen and (min-width: 769px) {
  #info04 .box{padding-top:2.18%;padding-bottom:9.45%;}
  #info04 .textBox{margin-left:21.8%;padding-top:10.41%;width:36.22%;}
  #info04 .textBox h2{margin:0 0 7.34% 0;width:32.85%;}
  #info04 .textBox .text01{width:56.61375%;}
  #info04 .beer{width:41.98%; margin-top: -5.5%;}
  #info04 .beer figure{width:44.1%;}
  #info04 .bnrArea {padding-bottom:5.208%;}
  #info04 .bnrArea h3{margin:0 auto 1.87%;width:16.3%;}
  #info04 .bnrArea ul{
    font-size:0;
    line-height:0;
    text-align:center;
  }
  #info04 .bnrArea ul li{
    display:inline-block;
    margin-left:2.1%;
    width:36.45%;
  }
  #info04 .bnrArea ul li:first-child{margin-left:0;}
}
@media screen and (max-width: 768px) {
  #info04 .box{padding-top:7%;padding-bottom:20.16%;}
  #info04 .textBox h2{margin:0 0 7.34% 0;width:37.43%;}
  #info04 .textBox{float:left;padding-top:16.333%;width:61%;margin-left: 10%;margin-right: -10%;}
  #info04 .textBox .text01{width:38.4vw;}
  #info04 .beer{margin-left:3.5%;width:35.5%;margin-top: -13%;}
  #info04 .bnrArea{padding-bottom:7.5%;}
  #info04 .bnrArea h3{margin:0 auto 5%;width:44.83%;}
  #info04 .bnrArea ul{
    font-size:0;
    line-height:0;
    text-align:center;
  }
  #info04 .bnrArea ul li{
    margin-top:3.66%;
  }
  #info04 .bnrArea ul li:first-child{margin-top:0;}
}