@charset "utf-8";

.bg1{
  position: relative;
	background: url(../images/bg1_2024.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: top center;
	z-index: 1;
}

.bg3{
	background: url(../images/bg3.jpg) repeat-x 50% 0%;
	background-size: contain;
}
/*
.bg4 {
    background: url(../images/bg4_great.jpg) no-repeat center top, url(../images/bg4_pc.png) repeat-x 50% 0%;
    padding: 0px 0px;
    background-size: auto, auto;
    background-color: #fdf1ac;
}
*/



#history02{
  overflow: visible;
}
@media screen and (min-width: 769px){
  #history02{
    width: 80%;
  }
}

#history02 .inner .text{
	margin: 0 auto;
	padding: 9% 0;
}
.bg5 {
  position: relative;
}
#str-main{overflow:hidden;}

#bnrArea{margin-top:4.37%;margin-bottom:3.125%;}
#bnrArea .bnr_drinx{margin:0 auto;width:62.5%;}
#bnrArea .bnr_drinx a{display:block;}
#bnrArea .bnr_drinx a img{width:100%;height:auto;}
@media screen and (max-width: 768px) {
  #bnrArea{margin-top:9.375%;margin-bottom:7.81%;}
  #bnrArea .bnr_drinx{width:93.75%;}
}

/*********************************
  history01
*********************************/
#history01{overflow:inherit;}
#history01 .inner{position:relative;}
#history01 .lead{padding-bottom:9.8%;width:51.25%;}
@media screen and (min-width: 769px) {
  #history01 #craftsman{
    position: absolute;
    top:14.66%;
    left: 53.64%;
    width: 58.64%;
    padding-top:58.64%;
    background:url(../images/history_bg_2024.png) no-repeat center top;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .bg1{background:url(../images/bg1_2024_sp.jpg) no-repeat center top; background-size: cover;}
  #history01 .inner{padding-bottom:12.18%;}
  #history01 #craftsman{
    margin: 0 auto;
    padding-top:75.46%;
    width:87.96%;
    background:url(../images/history_bg_2024_sp.png) no-repeat center top;
    background-size: contain;
  }
}
/*********************************
  history02
*********************************/
.bg2{
  background:url(../images/bg2_2024_pc.jpg) repeat-x center top;
  background-size: auto 100%;
}
#history02 .btn{position:absolute;top:60.96%;width:36px;height:80px;cursor:pointer;z-index:3;}
#history02 .btnPrev{left:0;visibility: hidden;}
#history02 .btnNext{right:0;}

#history02 .beerImg{
  position: absolute;
  top:35.5%;
  width: 100%;
}
#history02 .beerImg li{
  position: absolute;
  z-index:1;
  width: 100%;
  opacity: 0;
}
#history02 .beerImg li.beerImgAct{z-index:2;}
#history02 .beerIcon{
  padding-top: 79%;
  height: 1px;
}
#history02 .beerIcon li{
  /*width: 6.4%;*/
  width: 4.52%;
  position: absolute;
  left: 0%;
  bottom: 11%;
  cursor: pointer;
}
#history02 .beerIcon li img{
  margin: 0 auto;
  width: 100%;
}
#history02 .adIcon li{
  width: 4.52%;
  position: absolute;
  left: 0%;
  top: 17%;
  cursor: pointer;
}

#history02 .adIcon li img{
  width: 100%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform .2s ease-in;
  -webkit- transform-origin: center;
  -webkit-transform:scale(1);

  transition: transform .2s ease-in;
  transform-origin: center;
  transform:scale(1);
}

#history02 .craftsman{
  width: 62.8%;
  margin: 0 auto;
}



@media screen and (min-width: 769px) {
  #history02 h2{position:absolute;left:41.6%;top:4.82%;width:20.31%;}

  #history02 .beerImg li img{width: 100%;}
  #history02 .adIcon li:nth-of-type(1){left:-9.375%;}
  #history02 .adIcon li:nth-of-type(2){left:0.10416666666667%;}
  #history02 .adIcon li:nth-of-type(3){left:9.16666666666667%;}
  #history02 .adIcon li:nth-of-type(4){left:18.54166666666667%;}
  #history02 .adIcon li:nth-of-type(5){left:28.125%;}
  #history02 .adIcon li:nth-of-type(6){left:37.29166666666667%;}
  #history02 .adIcon li:nth-of-type(7){left:46.66666666666667%;}
  #history02 .adIcon li:nth-of-type(8){left:56.04166666666667%;}
  #history02 .adIcon li:nth-of-type(9){left:65.41666666666667%;}
  #history02 .adIcon li:nth-of-type(10){left:74.79166666666667%;}
  #history02 .adIcon li:nth-of-type(11){left:84.0625%;}
  #history02 .adIcon li:nth-of-type(12){left:93.54166666666667%;}
  #history02 .adIcon li:nth-of-type(13){left:103.0208333333333%;}

/*
  #history02 .adIcon li:nth-of-type(1){left:.93%;}
  #history02 .adIcon li:nth-of-type(2){left:11.35%;}
  #history02 .adIcon li:nth-of-type(3){left:21.77%;}
  #history02 .adIcon li:nth-of-type(4){left:32.08%;}
  #history02 .adIcon li:nth-of-type(5){left:42.6%;}
  #history02 .adIcon li:nth-of-type(6){left:53.02%;}
  #history02 .adIcon li:nth-of-type(7){left:63.43%;}
  #history02 .adIcon li:nth-of-type(8){left:73.64%;}
  #history02 .adIcon li:nth-of-type(9){left:83.85%;}
  #history02 .adIcon li:nth-of-type(10){left:93.75%;}
  #history02 .adIcon li:nth-of-type(11){left:103.75%;}

  20240901 更新時
  #history02 .adIcon li:nth-of-type(1){left:-9.0625%;}
  #history02 .adIcon li:nth-of-type(2){left:0.9375%;}
  #history02 .adIcon li:nth-of-type(3){left:10.9375%;}
  #history02 .adIcon li:nth-of-type(4){left:21.25%;}
  #history02 .adIcon li:nth-of-type(5){left:31.56%;}
  #history02 .adIcon li:nth-of-type(6){left:41.66667%;}
  #history02 .adIcon li:nth-of-type(7){left:51.77083%;}
  #history02 .adIcon li:nth-of-type(8){left:61.97916%;}
  #history02 .adIcon li:nth-of-type(9){left:72.1875%;}
  #history02 .adIcon li:nth-of-type(10){left:82.39583%;}
  #history02 .adIcon li:nth-of-type(11){left:92.70834%;}
  #history02 .adIcon li:nth-of-type(12){left:103.4375%;}
*/

  #history02 .beerImg .btnPage{position: absolute;left: 41.30%;width: 18.39%;}
  #history02 .beerImg .btn_taisyou{width:47%;}
  #history02 .beerImg li:nth-of-type(2) .btnPage{top:55.7%;}
  #history02 .beerImg li:nth-of-type(3) .btnPage{top:60.21%;}
  #history02 .beerImg li:nth-of-type(5) .btnPage{top:76.42%;}
  #history02 .beerImg li:nth-of-type(6) .btnPage{top:75.81%;}
  #history02 .beerImg li:nth-of-type(7) .btnPage{top:69.94%;}
  #history02 .beerImg li:nth-of-type(8) .btnPage{top:69.94%;}
  #history02 .beerImg li:nth-of-type(9) .btnPage{top:64.94%;}
  #history02 .beerImg li:nth-of-type(10) .btnPage{top:78.94%;}
  #history02 .beerImg li:nth-of-type(11) .btnPage{top:78.94%;}


  #history02 .adIcon li.adIconAct:after{
      content: "";
      position: absolute;
      bottom:-59%;
      left: 0;
      right: 0;
      margin: auto;
      background: url(../images/icon_current.png) no-repeat;
      background-size: contain;
      width:55%;
      padding-top:32.5%;
  }

  #history02 .adIcon li.adIconAct img{
    -webkit-transform:scale(1.43);
    transform:scale(1.43);
  }

}
@media screen and (max-width: 768px) {
  .bg2{
    background:url(../images/bg2_2024_sp.jpg) repeat-x center top;
    background-size: cover;
  }
  #history02 h2{margin:0 auto;padding:6.41% 0 4.68%;width:30.46%;}
  #history02 .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  #history02 .btn{position:absolute;top:41.84%;width: 5.625%;height: auto;cursor:pointer;z-index:3;}
  #history02 .btnPrev{left:3.12%;visibility: hidden;}
  #history02 .btnNext{right:3.12%;}

  #history02 .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  #history02 .gallery-top {
    height: 74.46%;
    width: 100%;
  }
  #history02 .gallery-thumbs {
    height: 25.54%;
    box-sizing: border-box;
    padding:0 0 4.68% 0;
  }

  #history02 .gallery-thumbs .swiper-slide {
    width: 37.5%;
    height: 100%;
    opacity: 1;
  }
  #history02 .gallery-thumbs .swiper-slide img{
    margin: auto;
    width: 25.1%;
    transition:transform .5s ease;
    transform: scale(1);
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  #history02 .gallery-thumbs .swiper-slide-active img{
    /*transform: scale(1.3);*/
    margin: 0 auto;
  }
  #history02 .gallery-top li img{width: 100%;}
  #history02 .gallery-top .btnPage{position: absolute;left:31.25%;width:37.5%;}
  #history02 .gallery-top .btn_taisyou{left:21.4%;width:57.3%;}
  #history02 .gallery-top li:nth-of-type(1) .btnPage{top:75.2%;}
  #history02 .gallery-top li:nth-of-type(2) .btnPage{top:70.9%;}
  #history02 .gallery-top li:nth-of-type(3) .btnPage{top:75.8%;}
  #history02 .gallery-top li:nth-of-type(5) .btnPage{top:79.7%;}
  #history02 .gallery-top li:nth-of-type(6) .btnPage{top:79.84%;}
  #history02 .gallery-top li:nth-of-type(7) .btnPage{top:79.92%;}
  #history02 .gallery-top li:nth-of-type(8) .btnPage{top:79.92%;}
  #history02 .gallery-top li:nth-of-type(9) .btnPage{top:75.5%;}
}
/*********************************
  history03
*********************************/
.bg3{
  background:url(../images/bg3_2024_pc.jpg) repeat-x center top;
  background-size: auto 100%;
}

#history03{
  overflow: visible;
}

@media screen and (min-width: 769px){
  #history03{
    width: 80%;
  }
}

#history03 .btn{position:absolute;top:69.59%;width:36px;height:80px;cursor:pointer;z-index:3;}
#history03 .btnPrev{left:0;visibility: hidden;}
#history03 .btnNext{right:0;}



#history03 .beerImg{
  position: absolute;
  top: 49.5%;
  width: 100%;
}
#history03 .beerImg li{
  position: absolute;
  width: 100%;
  opacity: 0;
}
#history03 .beerImg li img{
  width: 100%;
}
#history03 .beerImg li.beerImgAct{z-index:2;}

#history03 .beerIcon{
  padding-top: 98.4%;
  height: 1px;
}
#history03 .beerIcon li{
  width: 4.52%;
  position: absolute;
  left: 0%;
  bottom: 11%;
  cursor: pointer;
}
#history03 .beerIcon li img{
  margin: 0 auto;
  width: 100%;
}
#history03 .adIcon li{
  width: 5%;
  position: absolute;
  left: 0%;
  top: 34.8%;
  cursor: pointer;
}

#history03 .adIcon li img{
  width: 100%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform .2s ease-in;
  -webkit- transform-origin: center;
  -webkit-transform:scale(1);

  transition: transform .2s ease-in;
  transform-origin: center;
  transform:scale(1);
}

#history03 .craftsman{
  width: 62.8%;
  margin: 0 auto;
}


#history03 .adIcon li:nth-of-type(1){ left: -6.04166666666667%;}
#history03 .adIcon li:nth-of-type(2){ left: 1.5625%;}
#history03 .adIcon li:nth-of-type(3){ left: 8.85416666666667%;}
#history03 .adIcon li:nth-of-type(4){ left: 16.14583333333333%;}
#history03 .adIcon li:nth-of-type(5){ left: 23.95833333333333%;}
#history03 .adIcon li:nth-of-type(6){ left: 31.77083333333333%;}
#history03 .adIcon li:nth-of-type(7){ left: 39.375%;}
#history03 .adIcon li:nth-of-type(8){ left: 46.97916666666667%;}
#history03 .adIcon li:nth-of-type(9){ left: 55%;}
#history03 .adIcon li:nth-of-type(10){  left: 63.02083333333333%;}
#history03 .adIcon li:nth-of-type(11){  left: 70.3125%;}
#history03 .adIcon li:nth-of-type(12){  left: 78.125%;}
#history03 .adIcon li:nth-of-type(13){  left: 85.72916666666667%;}
#history03 .adIcon li:nth-of-type(14){  left: 93.4375%;}
#history03 .adIcon li:nth-of-type(15){  left: 101.0416666666667%;}

/* 

#history03 .adIcon li:nth-of-type(1){ left: -5.9375%;}
#history03 .adIcon li:nth-of-type(2){ left: 2.8125%;}
#history03 .adIcon li:nth-of-type(3){ left: 11.1458%;}
#history03 .adIcon li:nth-of-type(4){ left: 19.375%;}
#history03 .adIcon li:nth-of-type(5){ left: 27.604%;}
#history03 .adIcon li:nth-of-type(6){ left: 35.3125%;}
#history03 .adIcon li:nth-of-type(7){ left: 43.75%;}
#history03 .adIcon li:nth-of-type(8){ left: 52.3958%;}
#history03 .adIcon li:nth-of-type(9){ left: 60.8334%;}
#history03 .adIcon li:nth-of-type(10){  left: 69.375%;}
#history03 .adIcon li:nth-of-type(11){  left: 77.6041%;}
#history03 .adIcon li:nth-of-type(12){  left: 85.625%;}
#history03 .adIcon li:nth-of-type(13){  left: 93.125%;}
#history03 .adIcon li:nth-of-type(14){  left: 100.39%;}
#history03 .adIcon li:nth-of-type(15){  left: 100.39%;}

*/

@media screen and (min-width: 769px) {
  #history03 h2{position:absolute;left:25.72%;top:4.32%;width:50.72916666666667%;}
  #history03 .lead{position:absolute;top:11.81%;left:9.58%;width:81.35%;}
  #history03 .adIcon li.adIconAct:after{
      content: "";
      position: absolute;
      bottom:-33%;
      left: 0;
      right: 0;
      margin: auto;
      background: url(../images/icon_current.png) no-repeat;
      background-size: contain;
      width:55%;
      padding-top:32.5%;
  }
  #history03 .adIcon li.adIconAct img{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
  }

  #history03 .beerImg li img.beerImg2023 {
    width: 96%;
  }
}

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

  #history03 .btn{position:absolute;top:69.59%;width: 5.625%;height: auto;cursor:pointer;z-index:3;}
  #history03 .btnPrev{left:3.12%;visibility: hidden;}
  #history03 .btnNext{right:3.12%;}

  #history03 .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  #history03 .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  #history03 .gallery-top {
    height: 53.7%;
    width: 100%;
  }
  #history03 .gallery-thumbs {
    height: 46.14%;
    box-sizing: border-box;
    padding:0 0 7% 0;
  }
  #history03 .gallery-thumbs .swiper-slide {
    width: 34.4%;
    height: 100%;
    opacity: 1;
  }
  #history03 .gallery-thumbs .swiper-slide img{
    margin: auto;
    width: 20.83%;
    transition:transform .5s ease;
    transform: scale(1);
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  #history03 .gallery-thumbs .swiper-slide-active img{
    /*transform: scale(1.3);*/
    margin: 0 auto;
  }

  #history03 .gallery-top .btnPage{position: absolute;left:31.25%;width:37.5%;}
  #history03 .gallery-top li:nth-of-type(2) .btnPage{top:82.8%;}
  #history03 .gallery-top li:nth-of-type(3) .btnPage{top:82.8%;}
  #history03 .gallery-top li:nth-of-type(5) .btnPage{top:91.6%;}
  #history03 .gallery-top li:nth-of-type(6) .btnPage{top:86.84%;}
  #history03 .gallery-top li:nth-of-type(7) .btnPage{top:90.22%;}
  #history03 .gallery-top li:nth-of-type(8) .btnPage{top:90.22%;}
  #history03 .gallery-top li:nth-of-type(9) .btnPage{top:82.8%;}
}





/*********************************
  lineUp
*********************************/
#lineup .inner .text{
	margin: 0 auto;
}
#lineup #lieupModal{
  display:none;
}
#lineup #lineupOpen{
  padding-top:6%;
  text-align: center
}
@media screen and (max-width: 768px) {
  #lineup #lineupOpen{
      padding:0 0 4% 0;
  }
}
#lineup #lineupOpen a{
  display: inline-block;
}

#lieupModal dt{
  font-weight: bold;
  margin-top:14px;
}
#lieupModal dt:before{
  content:'■';
  color:#d9b455;
  font-size:1.4em;
}
#lieupModal .close{
  display: block;
  position:absolute;
  right:2px;
  top:2px;
  background-color: #d9b455;
  width:57px;
  height:57px;
}

@media screen and (min-width: 769px) {
    #lieupModal{
      width:656px;
    }
    #lieupModal .inner{
    padding:14px 38px 38px 38px ;
    font-size:1.2em;
    border:2px solid #d9b455;
  }
  #lieupModal .inner dd br{
    display:none;
  }
}

@media screen and (max-width: 768px) {
    #lieupModal{
       box-sizing: border-box;
       border:2px solid #d9b455;
   }
    #lieupModal .inner{
      width:100%;
      box-sizing: border-box;
      font-size:1em;
      line-height:1.45em;
      padding:4px 0 16px 16px ;
  }
}


@media screen and (min-width: 769px) {
	.onlySp{
		display: none!important;
	}
}

@media screen and (max-width: 768px) {
	.onlyPc{
		display: none!important;
	}
}



.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 1;
}

.gallery-thumbs .swiper-slide img{
  width: 35%;
  margin: 5px auto;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.gallery-thumbs .swiper-slide-active img{
  width: 50%;
  margin: 0 auto;
}


/* 2024 9/1 リニューアル --------------------------------------  */

/* ナビ */
@media screen and (min-width: 769px) {
  #aMenu ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #aMenu ul li {
    display: flex;
    align-items: center;
    height: 78px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #aMenu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 32px 0;
  }
}
@media screen and (max-width: 768px) {
	#aMenu ul {
		display: flex;
		justify-content: center;
	}
	#aMenu ul li {
		position: relative;
	}
	#aMenu ul li.current::before {
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-bottom: 2.5vw solid #8a6611;
		border-left: 1.875vw solid transparent;
		border-right: 1.875vw solid transparent;
		content: "";
		z-index: 1;
	}
	#aMenu ul li + li {
		border-left: .3125vw solid #fff;
	}
	#aMenu ul li:first-child {
		width: 28.125vw;
	}
	#aMenu ul li:nth-of-type(2) {
		width: 43.125vw;
	}
	#aMenu ul li:nth-of-type(3) {
		width: 28.125vw;
	}
	#aMenu ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 18.125vw;
	}
	#aMenu ul li a img {
		width: auto;
	}
	#aMenu ul li:first-child a img {
		width: 21.09375vw;
	}
	#aMenu ul li:nth-of-type(2) a img {
		width: 39.375vw;
	}
	#aMenu ul li:nth-of-type(3) a img {
		width: 21.25vw;
	}
}

/* 一番搾り おいしいの笑顔をつくるために */
#history01 {
  max-width: 1090px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
#history01 h2 { 
  margin-bottom:3.645%;
  padding-top: 13.33333333333333%;
  width: 59.16666666666667%;
}
#history01 .lead {
  width: 46.85714285714286%;
  margin-left: 4.285714285714286%;
  padding-bottom: 13.80952380952381%;
}
@media screen and (max-width: 768px) {
  #history01 {
    padding-left: 0;
    padding-right: 0;
  }
  #history01 h2 { 
    margin:0 auto 9.375vw;
    padding-top: 28.125vw;
    width:  93.75vw;
  }
  #history01 .lead { 
    margin:0 auto;
    padding-bottom: 6.25vw;
    width: 80vw;
  }
}

/* パッケージで振り返る一番搾り */
.bg3 {
  position: relative;
}
.bg3::before {
  display: block;
  position: absolute;
  top: 38.5%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #edb700;
  content: "";
}
@media screen and (min-width: 769px) {
  #history03 .lead {
    position:absolute;
    top:11.81%;
    left: 14.583333333333334%;
    width: 80.52083333333333%;
  }
}
@media screen and (max-width: 768px) {
  .bg3{
    background:url(../images/bg3_2024_sp.jpg) repeat-x center top;
    background-size: cover;
  }
  .bg3::before {
    top: 46.2%;
    height: .3125vw;
  }
  #history03 h2 {
    margin:0 auto;
    padding: 6.25vw 0 6.25vw;
    width:74.37%;
  }
  #history03 .lead {
    margin:0 auto 6.25%;
    width: 82.1875vw;
  }
}