@charset "UTF-8";

#key li:nth-child(1) {
  background: url("../img/drink/kv.jpg") no-repeat center/cover;
}
hr {
  width: 100%;
  height: 6px;
  background: url(../img/shared/line.jpg);
  border: 0;
}
.pc{
  display: block!important;
}
.sp{
  display: none!important;
}
.slick-dots li{
  margin: 0 7px;
}
.slick-dots li button{
  width: 20px;
  height: 20px;
  background: #fff;
  border: 0;
  position: relative;
}
.slick-dots li.slick-active button{
  background: #fff;
}
.slick-dots li button::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background: #000;
  border-radius: 50%;
  display: none;
}
.slick-dots li.slick-active button::before{
  display: block;
}
section > div, section .row, section .col, section .box, section .inner{
  position: relative;
}

.flbox {
  display: flex;
}
section > div .row{
  display: block;
}
#sec1{
  background: url(../img/drink/s1-d2.png) repeat-x center bottom,url(../img/drink/s1-d1.png) no-repeat center top;
  padding: 155px 0 106px;
}
#sec1 h2{
  margin: 0 -17px 99px auto;
  text-align: right;
}
#sec1 p.txt{
  width: 420px;
  min-width: 420px;
  margin: 122px 91px 0 0;
}
#sec2{
  background: url(../img/company/s5-bg.jpg);
}
#sec2 .row-1{
  background: url(../img/drink/s2-bg.jpg) no-repeat center center / cover;
  padding: 164px 0 183px;
  color: #fff;
}
#sec2 .row-1 .box{
  width: 497px;
}
#sec2 .row-1 h2{
  margin-bottom: 47px;
}
#sec2 .row-1 .wrap{
  width: 1000px;
}
#sec2 .row-2{
  background: url(../img/drink/s2-d1.png) repeat-x center top;
  padding: 148px 0 113px;
  z-index: 1;
}
#sec2 .row-2::before{
  content: '';
  position: absolute;
  top: 216px;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/drink/s2-d2.png) no-repeat center top ;
  width: 100%;
  height: 1090px;
  z-index: -1;
}
#sec2 .row-2 .slider-fade{
  width: 752px;
  height: 494px;
}
#sec2 .row-2 .slick-dots{
  text-align: left;
  bottom: 0;
  margin: 9px 0 0 15px;
  position: relative;
}
#sec2 .row-2 .slick-dots li button{
  background: #000;
}
#sec2 .row-2 .slick-dots li.slick-active button{
  background: #000;
}
#sec2 .row-2 .slick-dots li button::before{
  background: #fff;
}
#sec2 .row-2 .box{
  width: 428px;
  min-width: 428px;
  margin: 30px 31px 0 0;
}
#sec2 .row-2 h3{
  margin: 0 0 41px -8px;
}
#sec2 .row-3 {
  z-index: 2;
  padding-bottom: 181px;
  background: url(../img/drink/s2-d3.png) repeat-x center bottom;
}
#sec2 .row-3 h3{
  margin: 0 auto 69px;
  text-align: center;
}
#sec2 .row-3 .wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: url(../img/drink/s2-bg2.jpg) no-repeat center center / cover;
}
#sec2 .row-3 p.ttl{
  text-align: right;
  padding: 94px 0 97px;
}
#sec2 .row-3 p.txt{
  color: #fff;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
  width: 414px;
}
#sec3{
  padding: 0 177px;
  box-sizing: border-box;
  background: url(../img/drink/s3-d2.jpg) no-repeat center bottom, url(../img/company/s3-bg.jpg);
}
#sec3 h2{
  text-align: center;
  margin-bottom: 18px;
}
#sec3 .row-1 .inner{
  background: url(../img/drink/s3-bg1.jpg) no-repeat center center / cover;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 78px 0 326px;
}
#sec3 .row-1 p.txt{
  text-align: center;
  color: #fff;
}
#sec3 .row-2{
  padding: 205px 0 149px;
  color: #fff;
}
#sec3 .row-2 p.img{
  margin-left: -224px;
  position: relative;
}

#sec3 .row-2 h3{
  position: absolute;
  top: -6px;
  right: -24px;
}
#sec3 .row-2 p.txt{
  width: 160px;
  height: 520px;
  position: absolute;
  top: -11px;
  right: 211px;
}
#sec3 .row-2 .wrap::before{
  content: '';
  position: absolute;
  top: -193px;
  right: -153px;
  background: url(../img/drink/s3-d3.png) no-repeat center center / 100% auto;
  width: 491px;
  height: 473px;
}

#sec3 .row-2 p.img span{
  position: absolute;
  top: -67px;
  left: 153px;
  font-size: 50px;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.05em;
}
#sec3 .row-2 p.img span::before{
  content: '';
  position: absolute;
  bottom: -33px;
  left: -16px;
  background: url(../img/drink/s3-d1.png) no-repeat center bottom / 100% auto;
  width: 334px;
  height: 75px;
}
#sec3 .row-2 p.img span::after{
  content: '';
  position: absolute;
  top: 94px;
  left: 2px;
  background: url(../img/drink/s3-x.png) no-repeat center center / 100% auto;
  width: 43px;
  height: 41px;
}
#sec3 .row-2 p.img small{
  display: block;
  margin-bottom: 35px;
}

#sec4{
  padding: 135px 0 100px;
  box-sizing: border-box;
  background: url(../img/drink/s4-d1.png) repeat-x center top, url(../img/drink/s4-d2.png) no-repeat center top 570px, url(../img/drink/s4-d4.png) no-repeat center bottom, url(../img/drink/s4-d3.png) repeat-x center bottom;
}
#sec4 p.img1{
  margin: 0 0 72px -223px;
}
#sec4 h2{
  text-align: center;
  margin-bottom: 50px;
}
#sec4 h2 + h3{
  text-align: center;
}
#sec4 p.txt1{
  text-align: center;
  margin: 37px 0 84px;
}
#sec4 .col h3 span{
  border-top: 1px solid #000;
  display: inline-block;
  font-size: 50px;
  color: #000;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 19px 0;
}
#sec4 .col h3 span:last-child{
  border-bottom: 1px solid #000;
}
#sec4 .col h3 {
  padding: 101px 0 46px 0;
}
#sec4 .col p.txt2{
  width: 420px;
}
#sec4 .col p.img{
  position: absolute;
  top: 0;
  right: -227px;
}
#sec4 .col p.img span{
  position: absolute;
  top: 0;
  left: 31px;
  z-index: 1;
}
#sec4 p.btn{
  text-align: center;
  margin: 177px 0 0;
}



@media only screen and (min-width: 1700px){
  #sec2 .row-2::before{
    background: url(../img/drink/s2-d2.png) no-repeat center top / 100% auto;
  }
  #sec3{
    background: url(../img/drink/s3-d2.jpg) no-repeat center bottom / 100% auto, url(../img/company/s3-bg.jpg);
  }
}

@media only screen and (max-width: 1500px){
  #sec3 {
    padding: 0 20px;
}

}
@media only screen and (max-width: 1200px){
  #sec3 .row-2 .wrap{
    width: 100%;
    max-width: 100%;
  }
  #sec3 .row-2 p.img{
    margin-left: 0;
    background: url(../img/drink/s3-img1.jpg) no-repeat left center / cover;
    width: 63%;
    height: 566px;
  }
  #sec3 .row-2 p.img img{
    width: 100%;
    height: auto;
    opacity: 0;
  }
  #sec3 .row-2 h3 {
    right: 0;
}
#sec3 .row-2 p.img span {
  left: 32px;
}
}


@media (max-width: 999px) {
.flbox{
  display: block;
}
section img{
  width: auto;
  height: auto;
}
.pc{
  display: none!important;
}
.sp{
  display: block!important;
}
#key li:nth-child(1) {
  background: url("../img/drink/kv_sp.jpg") no-repeat center/cover;
}

#sec1 {
  background: url(../img/drink/s1-d2_sp.png) no-repeat center bottom 75vw / 75% auto,url(../img/drink/s1-d3_sp.png) repeat-x center bottom / 100% auto,url(../img/drink/s1-d1_sp.png) no-repeat center top / 100% auto;
  padding: 68vw 0 15vw;
}
#sec1 h2 {
  margin: 0 auto;
  text-align: center;
}
#sec1 p.txt {
  width: 100%;
  min-width: 100%;
  margin: 6vw 0 15vw;
}
#sec1 p.img{
  text-align: center;
}
#sec2 .row-1 .box {
  width: 100%;
}
#sec2 .row-1 h2 {
  margin-bottom: 6vw;
  text-align: center;
}
#sec2 .row-1 .wrap {
  width: 100%;
}
#sec2 .row-1 {
  background: url(../img/drink/s2-bg_sp.jpg) no-repeat center top / cover;
  padding: 66vw 0 8vw;
}
#sec2 .row-2 {
  background: transparent;
  padding: 0 0 15vw;
}
#sec2 .row-2 .wrap{
  padding: 0;
}
#sec2 .row-2 .flbox{
  flex-wrap: wrap;
  display: flex;
}
#sec2 .row-2 .box {
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  order: 1;
}
#sec2 .row-2 .slider-fade {
  width: 100%;
  height: auto;
  order: 0;
}
#sec2 .row-2 .slider-fade img{
  width: 100%;
  height: auto;
}
#sec2 .row-2 .slick-dots {
  text-align: center;
  margin: 9px 0 0 0;
}

#sec2 .row-2::before {
  top: inherit;
  bottom: -57vw;
  left: 50%;
  background: url(../img/drink/s2-d2_sp.png) no-repeat center top / 100% auto;
  width: 100%;
  height: 112vw;
}
#sec2 .row-2 h3 {
  margin: 0 0 6vw;
}
#sec2 .row-3 h3 {
  margin: 0 auto 9vw;
}
#sec2 .row-3 .wrap {
  width: calc(100% - 40px);
  max-width: 100%;
  background: url(../img/drink/s2-bg2_sp.jpg) no-repeat center top / 100% auto;
}
#sec2 .row-3 p.txt {
  color: #000;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 38vw;
}
#sec2 .row-3 p.ttl {
  text-align: right;
  padding: 8vw 0 0;
  width: 86%;
  margin: 0 auto;
}

#sec2 .row-3 {
  padding-bottom: 15vw;
  background: url(../img/drink/s2-d3_sp.png) repeat-x center bottom / 100% auto;
}
#sec3 .row-1 .inner {
  background: url(../img/drink/s3-bg1_sp.jpg) no-repeat center top / 100% auto;
  width: 100%;
  max-width: 100%;
  padding: 72vw 20px 0;
  box-sizing: border-box;
}
#sec3{
  padding: 0;
  background: url(../img/company/s3-bg.jpg);
}
#sec3 .row-1 p.txt{
  text-align: left;
}
#sec3 .row-2 h3 {
  right: 0;
  position: relative;
  top: 0;
  text-align: center;
  margin-bottom: 15vw;
}
#sec3 .row-2 p.img {
  margin-left: 0;
  background: url(../img/drink/s3-img1_sp.jpg) no-repeat left center / 100% auto;
  width: 100%;
  height: auto;
}
#sec3 .row-2 p.txt {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  right: 0;
  margin-top: 6vw;
}
#sec3 .row-2 .wrap::before{
  display: none;
}
#sec3 .row-2 {
  padding: 22vw 0 15vw;
  background: url(../img/drink/s3-d3_sp.png) no-repeat center top / 84% auto, url(../img/drink/s3-d2_sp.jpg) no-repeat right top -21vw / 93% auto;
}
#sec3 .row-2 p.img span {
  left: 17vw;
}
#sec4 {
  padding: 0 0 15vw;
  background: url(../img/drink/s4-d4_sp.png) no-repeat center bottom / 100% auto;
}
#sec4 p.img1 {
  margin: 0 0;
}
#sec4 p.img1 img{
  width: 100%;
  height: auto;
}
#sec4 > .wrap{
  padding: 0;
}
#sec4 h2 {
  margin-bottom: 6vw;
}

#sec4 p.txt1 {
  margin: 6vw 0 9vw;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: left;
}
#sec4 p.txt1 br{
  display: none!important;
}
#sec4 .inner{
  background: url(../img/drink/s4-d2_sp.png) no-repeat center top / 100% auto;
  padding: 15vw 0 0;
}
#sec4 .col h3 {
  padding: 0 0 6vw;
  width: 58vw;
  margin: 0 auto;
}
#sec4 .col p.img {
  position: relative;
  top: 0;
  right: 0;
}
#sec4 .col p.img img{
  width: 100%;
  height: auto;
}

#sec4 .col::before{
  content: '';
  position: absolute;
  top: -20vw;
  right: 0;
  background: url(../img/drink/s4-d3_sp.png) no-repeat center top / 100% auto;
  width: 100%;
  height: 70vw;
  z-index: -1;
}
#sec4 .col p.txt2 {
  width: 100%;
  margin-top: 6vw;
}
#sec4 p.btn {
  text-align: center;
  margin: 9vw 0 0;
}




}
@media (max-width: 768px) {
  #sec2 .row-3 p.ttl img{
    width: 100%;
    height: auto;
  }
  #sec2 .row-3 p.txt {
    margin-top: 48vw;
}
#sec4 .col p.img span {
  position: relative;
  top: 0;
  left: 0;
  margin: 3vw 0 3vw;
  display: block;
}
}

@media (max-width: 767px) {
.slick-dots li button {
  width: 15px;
  height: 15px;
  font-size: 0;
}
.slick-dots li button::before{
  width: 6px;
  height: 6px;
}
section img{
  width: 100%;
  height: auto;
}
section p.txt{
  text-align: justify;
}
#sec1 h2 {
  width: 54%;
}
#sec1 {
  background: url(../img/drink/s1-d2_1_sp.png) no-repeat center top 96vw / 100% auto,url(../img/drink/s1-d2_2_sp.png) no-repeat center bottom 66vw / 100% auto,url(../img/drink/s1-d3_sp.png) repeat-x center bottom / 100% auto,url(../img/drink/s1-d1_sp.png) no-repeat center top / 100% auto;
  padding: 68vw 0 15vw;
}

#sec2 .row-1 h2 {
  width: 80%;
  margin: 0 auto 6vw;
}
#sec2 .row-2 h3 {
  width: 77%;
}
#sec2 .row-3 h3 {
  width: 88%;
}
#sec2 .row-3 p.ttl {
  text-align: center;
  padding: 2vw 0 0;
  width: 100%;
}
#sec2 .row-3 .wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
#sec2 .row-3 {
  padding: 0 3.5% 15vw;
}
#sec3 .row-1 p.txt {
  text-align: justify;
}
#sec3 .row-2 h3 {
  width: 30%;
  margin: 0 auto 25vw;
}
#sec3 .row-2 {
  padding: 18vw 0 15vw;
}
#sec3 .row-2 p.img span {
  left: 16vw;
  font-size: 8vw;
  top: -11vw;
}
#sec3 .row-2 p.img span::after {
  top: 15vw;
  left: 1vw;
  width: 7vw;
  height: 7vw;
}
#sec3 .row-2 p.img small {
  margin-bottom: 6vw;
}
#sec3 .row-2 p.img span::before {
  bottom: -4vw;
  left: 0;
  width: 100%;
  height: 14vw;
}
#sec4 h2 {
  width: 85%;
  margin: 0 auto 6vw;
}
#sec4 h2 + h3 {
  width: 84%;
  margin: 0 auto;
}
#sec4 p.txt1 {
  margin: 6vw 0 22vw;
  padding: 0;
  text-align: justify;
}
#sec4 .col h3 span {
  font-size: 8vw;
  padding: 4vw 0;
}
#sec4 .col h3 {
  width: 80%;
  padding-bottom: 9vw;
}
#sec4 .col::before {
  top: -37vw;
}
#sec4 p.btn {
  margin: 12vw auto 0;
  width: 95%;
}









}