@charset "utf-8";




/*********************************************
  MAP
***********************************************/
.bg1{
  position: relative;
  background:url(../images/global_map_bg.jpg) no-repeat;
  background-size:cover;
  background-position: top center;
  padding-top: 50px;
}
.bg2{
  background:url(../images/global_brand_bg.jpg) no-repeat;
  background-size:cover;
  background-position: top center;
}
.bg3{
  background:url(../images/global_movie_bg.jpg) no-repeat;
  background-size:cover;
  background-position: top center;
}
@media screen and (max-width: 768px){
  .bg1{    
    background:url(../images/global_map_bg_sp.jpg) no-repeat;
    background-size: cover;
  }
}


#map h1{margin: 11.53% auto 3.125%;width:37.08%;}
#map h1 img{width: auto;}
#map .mapArea{position:relative;}
#map .mapArea figure.beer{margin:auto;position:absolute;top:41.15%;left:65.52%;width:13.85%;height:auto;}
#map .mapArea figure.beer img{width: 100%;}
#map .text01{margin:0 auto;padding-bottom:8.33333333334%;width:58.54%;}

#map .mapImage.fade_fix,#map .mapArea figure.beer.fade_fix,
#map .text01.fade_fix{transform: translateY(10px);}
#map .mapImage.fadeAct,#map .mapArea figure.beer.fadeAct,
#map .text01.fadeAct{transform: translateY(0);}


@media screen and (max-width: 768px) {
  #map img{width:100%;}
  #map .inner{padding:0 0 10.93%;}
  #map h1{padding-top: 15px;padding-bottom:5.3%;width:65.78%;}
  #map .mapArea{margin:0 auto 10.3%;width:93.6%;}
  #map .text01{margin:0 auto;padding-bottom:0%;width:91.46%;}
  #map .mapArea figure.beer{top:46.38%;left:69.8%;width:18.23%;}
}

/*********************************************
  brand
***********************************************/
/*#brand img{width:100%;height:auto;}*/
#brand .inner{margin:0 auto;padding:8.333333334% 0 ;}
/* #brand .box{margin-bottom:4.16%} */
#brand .box:after,#brand .package:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;  
  clear: both; 
  visibility:hidden;  
}

#brand .textBox h2{margin-top:10.96%;margin-bottom:5.76%;width:73.076%;}
#brand .textBox p.text01{width:99.23%;}
#brand .package{margin: 0 auto; width:87.5%;background:url(../images/global_brand_package_bg.png) repeat;}

@media screen and (min-width: 769px) {
  #brand .box figure.beer{float:left;margin:0 0 0 6.25%;width:32.7%;}
  #brand .textBox{float:right;width:54.27%;}
  #brand .package .text{float:left;margin:4.46% 0 0 8.3%;width:41.66%;}
  #brand .package .beer{float:right;margin:0 4.76% 0 0;padding: 3.8% 0;width:35.95%;}
}

@media screen and (max-width: 768px) {
  #brand img{width:100%;}
  #brand .inner{padding:10.93% 0 13.2%;width:93.75%;}
  #brand .textBox h2{margin-top:0;margin-bottom:7.6%;width:100%;}
  #brand .textBox p.text01{margin-bottom:8.6%;width:100%;}
  #brand .box figure.beer{margin:0 auto;width:61.42%;}
  #brand .package{width:100%;}
  #brand .package .text{margin:0 auto;padding:6.6% 0 6.6%;width:78.33%;}
  #brand .package .beer{margin:0 auto 5.8%;width:63.3%;}
}

/*********************************************
 movie 
***********************************************/
#movie .inner{padding:6.25% 0 8.3%;}
#movie h2{margin:0 auto 3.6%;width:55.2%;}
#movie .lead{margin:0 auto 4%;width:51.14%;}
#movie .movieArea{text-align: center;}

#movie .movieArea li a{display:block;outline: none;}

#movie .movieArea li .thumbnail{
  background: #fff;
  position: relative;
  padding-top: 56.32%;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  font-size: 0;
  background-size: cover;
}
/* #movie .movieArea li .thumbnail:after{
    content: "";
    position: absolute;
    bottom: 7.63359%;
    right: 4.30108%;
    width: 12.90323%;
    height: 22.90076%;
    background: url(../images/play_pc.png) no-repeat 50% 50%;
    background-size: contain;
} */
/* bnr */
#movie .bnrArea {margin-top:6.25%;}
#movie .bnrArea h3{margin:0 auto 2.08%;width:34.79%;}
#movie .bnrGlobal{margin:0 auto;width:45%;}

@media screen and (min-width: 769px) {
  #movie .movieArea li{display:inline-block;margin-left:4.16%;width:57.291%;}
  #movie .movieArea li:first-child{margin-left:0;}
  #movie .movieArea li .title{margin:3.636% auto 0;}
  #movie .movieArea li:nth-of-type(1) .title{width:34.9%;}
}

@media screen and (max-width: 768px) {
  #movie img{width:100%;}
  #movie .inner{margin:0 auto;padding:10.93% 0;width:93.75%;}
  #movie h2{margin-bottom:8.9%;width:88.16%;}
  #movie .lead{margin-bottom:10%;width:84.5%;}
  #movie .movieArea li{margin-top:8.33%;width:100%;}
  #movie .movieArea li:first-child{margin-top:0;}
  #movie .movieArea li .title{margin:4.8% auto 0;}
  #movie .movieArea li:nth-of-type(1) .title{width:42.45%;}

  #movie .bnrArea {margin-top:9.7%;}
  #movie .bnrArea h3{margin:0 auto 5%;width:58%;}
  #movie .bnrGlobal{margin:0 auto;width:72%;}

}


/* 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;
	}
}