@charset "UTF-8";
#key {
  height: 780px;
  background-image: url(../img/drink/key.jpg);
}

#key .wrap {
  height: 780px;
}

#key .wrap h2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

#sec1 {
  padding: 102px 0 64px;
  position: relative;
  background: url(../img/menu/bg2.jpg) top center repeat;
  color: #fff;
}

#sec1:before {
  content: url(../img/drink/sec1_deco.png);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#sec1:after {
  background: url(../img/drink/sec1_bg1.png) top center repeat;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 1056px;
  content: '';
  z-index: 0;
}

#sec1 .info1 {
  padding-bottom: 15px;
}

#sec1 .info1 .boxtxt {
  width: 603px;
}

#sec1 .info1 .boxtxt .photo {
  margin-left: -50px;
  z-index: 3;
  position: relative;
}

#sec1 .info1 .boxtxt .txt {
  width: 600px;
  padding-top: 39px;
}

#sec1 .info1 h2 {
  float: left;
  padding-left: 91px;
  z-index: 3;
  position: relative;
}

#sec1 .info2 {
  position: relative;
}

#sec1 .info2:before {
  content: url(../img/drink/sec1_img2.png);
  position: absolute;
  top: -147px;
  right: 0;
}

#sec1 .info2 .photo {
  width: 500px;
  margin-left: -223px;
}

#sec1 .info2 .boxtxt {
  width: 450px;
  padding-top: 428px;
}

#sec1 .info2 .boxtxt .txt {
  padding-top: 41px;
}

#sec2 {
  position: relative;
  background: url(../img/menu/bg1.jpg) top center repeat;
  padding: 0px 0 97px;
  color: #fff;
}

#sec2 h2 {
  background: url(../img/drink/bg_h2.jpg) top center repeat-x;
  text-align: center;
}

#sec2 .info1 {
  position: relative;
  padding: 74px 0 0px;
}

#sec2 .info1:before {
  content: url(../img/drink/sec2_deco.png);
  position: absolute;
  top: 50px;
  left: -100px;
  z-index: 0;
}

#sec2 .info1 .txt {
  position: relative;
  padding: 140px 0 0 0px;
	width:470px;
}

#sec2 .info1 .photo {
  margin-right: -40px;
	margin-top:-260px;
}

#sec2 .info2 {
  position: relative;
  padding-bottom: 78px;
}

#sec2 .info2 h3 {
  position: relative;
  margin-left: -460px;
}


#sec2 .info2 .txt {
  padding-top: 544px;
  z-index: 9;
  padding-left: 48px;
  position: relative;
}

#sec2 .info2 .photo {
  position: absolute;
  top: 91px;
  right: 50px;
}

#sec2 .info3 {
  position: relative;
}

#sec2 .info3 h3 {
  position: relative;
  padding-left: 420px;
}

#sec2 .info3 .txt {
  padding-top: 549px;
  z-index: 9;
  padding-left: 378px;
  position: relative;
}

#sec2 .info3 .photo {
  position: absolute;
  top: 0;
  left: 48px;
}

#sec3 {
  color: #fff;
  background: url(../img/drink/sec3_bg2.png) top 202px center no-repeat, url(../img/drink/bg3.jpg) top center repeat;
}

#sec3 h2 {
  background: url(../img/drink/bg_h2.jpg) top center repeat-x;
  text-align: center;
}

#sec3 .info1 h3 {
  padding-top: 28px;
}

#sec3 .info1 .txt {
  width: 450px;
  padding: 57px 0 59px 39px;
}

#sec3 .info2 {
  padding-bottom: 110px;
}

#sec3 .info2 .txt {
  padding: 269px 0 0 45px;
}

#sec3 .info2 .photo {
  margin-left: -50px;
}

#sec3 .info3 {
  padding-bottom: 110px;
}

#sec3 .info3 .toggle .toggle-link {
  text-align: center;
  padding-bottom: 12px;
}

#sec3 .info3 .toggle .toggle-link .bnr {
  width: 625px;
  margin: 0 auto;
  position: relative;
}

#sec3 .info3 .toggle .toggle-link .bnr:before {
  content: url(../img/drink/icon.png);
  right: 179px;
  top: 47px;
  position: absolute;
  z-index: 99;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

#sec3 .info3 .toggle .toggle-main .box {
  width: 450px;
}

#sec3 .info3 .toggle .toggle-main .box h3 {
  padding: 42px 0 0px 0;
  border-bottom: 2px solid #9a0718;
  text-align: center;
  font-size: 20px;
  line-height: 60px;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#sec3 .info3 .toggle .toggle-main .box dl {
  border-bottom: 1px solid #fff;
  padding: 8px 0;
}

#sec3 .info3 .toggle .toggle-main .box dl dt {
  float: left;
}

#sec3 .info3 .toggle .toggle-main .box dl dd {
  float: right;
}

#sec3 .info3 .toggle .toggle-main .box .note {
  text-align: right;
  padding-top: 28px;
}

#sec3 .info3 .toggle.active .bnr:before {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}