@charset "UTF-8";
html{height:100%; background-color:#fdde00;}

body{
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	height:100%;
	width:100%;
	min-width:960px;
	verflow-x:visible;
}

.inner{
	margin:0 auto;
}

.overimg{
	position:absolute;
	display:none;
}

/*suntory header*/
#header{
	position:relative;
	z-index:100;
}

/*suntory footer*/
#footer{
	width:100%;
	position:relative;
	top:0px;
	z-index:99;
	background:#fdde00;
	border-bottom:#fff solid 5px;
	margin:0px;
	padding:0px;
}


/*gabgab*/
#gabgabheader{
	width:100%;
	position:relative;
	height:30px;
	background:#fff;
	z-index:6;

}
#gabgabheader .inner{
	position:relative;
	width:960px;
	height:30px;
}
#gabgabheader #gabgab{
	position:absolute;
	width:200px;
	height:30px;
	top:0px;
	left:0px;
}
#gabgabheader #gabgabshop{
	position:absolute;
	width:190px;
	height:30px;
	top:0px;
	right:0px;
}
#gabgabheader img{
	position:absolute;
}



/*loading*/
#loader{
	width:100%;
	height:100%;
	background-color:#fdde00;
	position:fixed;
	color:#006643;
	z-index:98;
	/*display:none;*/
}

#loader .inner{
	position:absolute;
	width:260px;
	height:130px;
	top:50%;
	left:50%;
	margin-top:-115px;
	margin-left:-130px;
}

#loader .logo{
	position:absolute;
	width:260px;
	height:71px;
	top:0px;
	left:0px;
	background:url(../img/loading/logo.gif) 50% 0px no-repeat;
}

#loader #barbg{
	position:absolute;
	width:216px;
	height:26px;
	top:58px;
	left:23px;
	background:url(../img/loading/barBG.gif) 50% 0px no-repeat;
}

#loader #bar{
	position:absolute;
	width:200px;
	height:10px;
	overflow:hidden;
	top:8px;
	left:8px;
	background:url(../img/loading/bar.jpg) 50% 0px no-repeat;
}

#loader #txtarea{
	font-size:12px;
	position:absolute;
	width:120px;
	height:15px;
	top:85px;
	left:70px;
}



/*popup(product)*/
#popup{
	position:fixed;
	width:100%;
	height:100%;
	z-index:4;
}


#popupbox{
	position:absolute;
	width:994px;
	height:434px;
	margin:0 auto;

	top:0;
	left:50%;
	margin-top:0;
	margin-left:-497px;
}


#wrap{
	position:relative;
	width:100%;
	background:url(../img/bg/dotLineBottom.png) repeat-x bottom;
	z-index:2;
}

/*top (main visual)*/

#drops{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../img/hero/drops.png) 50% 0 repeat-y;
}
#bgBottle{
	width:861px;
	height:1787px;
	position:absolute;
	top:-320px;
	left:50%;
	margin-left: -76px;
	background: url(../img/hero/bg_bottle.png) 0 0 no-repeat;
	display: none;
}
#bottomGrd{
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: 0;
	background: url(../img/hero/bottomgrd.png) 0 0 repeat-x;
}

#top{
	width:100%;
	background:#fdde00 url(../img/hero/bg.gif) 50% 0px repeat;
	position:relative;
	top:0px;
	z-index:4;
	overflow:hidden;
}

#topdot{
	height:22px;
	background:url(../img/bg/dotLineTop.png) 50% -23px repeat-x;
	position:relative;
}

#topset{
	position:relative;
	top:0px;
	height: 650px;
	width: 960px;
	margin: 0 auto 80px;
}

#topNav{
	position: absolute;
	top: -2px;
	left: 0;
	width: 220px;
	height: 652px;
	box-sizing: border-box;
	z-index: 10;
	border: #ffcc02 2px solid;
	background: #fff000;
}
#topNav .logo{
	position: relative;
	width: 100%;
	height: 158px;
	background: url(../img/hero/nav_logo.png) 50% 50%  no-repeat;
	background-size: 70% auto;
	border-bottom: #ffcc02 1px solid;
}
#topNav .nav{
	position: relative;
	z-index: 2;
}
#topNav .nav li{
	position: relative;
	width: 100%;
	height: 67px;
	border-bottom: #ffcc02 1px solid;
}
#topNav .nav li a, #topNav .nav li p{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/hero/nav.png) 50% 0 no-repeat;
}
#topNav .nav li a:before{
	position: absolute;
	display: block;
	content: " ";
	width: 170px;
	height: 88px;
	background: url(../img/hero/nav_hover_igaiga.png) 50% 0 no-repeat;
	transition: transform 0.3s ease-out;
	display: none;
	pointer-events: none;
	z-index: 0;
}
#topNav .nav li a:after{
	position: absolute;
	display: block;
	content: " ";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url(../img/hero/nav_hover.png) 50% 0 no-repeat;
	transition: transform 0.3s ease-in-out;
	display: none;
	z-index: 1;
}
#topNav .nav li a:hover{
	background-image: none;
}
#topNav .nav li a:hover:before{
	display: block;
	animation: navOverBln 0.3s ease-in-out both;
	-webkit-animation: navOverBln 0.3s ease-in-out both;
}
#topNav .nav li a:hover:after{
	display: block;
	animation: navOverText 0.2s linear both;
}

#topNav .nav li.nav-products a,
#topNav .nav li.nav-products p,
#topNav .nav li.nav-products a:after{ background-position: 50% 0px; }
#topNav .nav li.nav-products a:before{ top: -10px; left: -25px; }
#topNav .nav li.nav-movie a,
#topNav .nav li.nav-movie p,
#topNav .nav li.nav-movie a:after{ background-position: 50% -70px; }
#topNav .nav li.nav-movie a:before{ top: -10px; left: -25px; }
#topNav .nav li.nav-campaign a,
#topNav .nav li.nav-campaign p,
#topNav .nav li.nav-campaign a:after{ background-position: 50% -140px; }
#topNav .nav li.nav-campaign a:before{ top: -10px; left: 10px; }

#topNav .navBnr { position: absolute; bottom: 0; z-index: 1;}
#topNav .navBnr li{ background: #fff;}
#topNav .navBnr li a{
	position: relative;
	display: block;
}
#topNav .navBnr li a::after{
	position: absolute;
	display: block;
	content: " ";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border: #019944 4px solid;
}
#topNav .navBnr li a:hover{ opacity: 0.7;}
#topNav .navBnr li a:hover::after{ border: #019944 6px solid;}
#topNav .navBnr li img{ display: block;}

#topMV{
	position: absolute;
	width: 740px;
	height: 650px;
	right: 0px;
	top: 0px;
}




#topAd{
	position: relative;
	width: 960px;
	margin: 0 auto 40px;
}
#topAd img{
	margin-bottom: 50px;
	display: block;
}
#topAd a{
	margin-bottom: 50px;
	display: block;
	background: #fff;
}
#topAd a img{
	margin-bottom: 0px;
}
#topAd a:hover img{
	opacity: 0.7;
}


#topBanner{
	position: relative;
	width: 960px;
	margin: 0 auto 20px;
	white-space: nowrap;
	text-align: center;
}

#topBanner a{
	position: relative;
	display: inline-block;
	width: 460px;
	height: 230px;
	margin: 0 10px;
	background: #fff;
}
#topBanner a:hover img{
	opacity: 0.7;
}



/*product*/
#article1{
	width:100%;
	max-width:2000px;
	margin:0 auto;
	height:1780px;
	position:relative;
	top:10px;
	overflow:hidden;
	padding-bottom:100px;

	z-index:3;
}



#productbgtop{
	position:absolute;
	background:url(../img/product/bg_t.png) 50% 0px no-repeat;
	top:1px;
	width:100%;
	height:246px;
}
#productbgmiddle{
	position:absolute;
	background:url(../img/product/bg_m.gif) 50% 0px repeat-x;
	top:246px;
	width:100%;
	height:1288px;
}

#productbgbottom{
	position:absolute;
	background:url(../img/product/bg_b.png) 50% 0px no-repeat;
	top:1534px;
	width:100%;
	height:246px;
}



#article1 #product{
	position:relative;
	top:0px;
	padding-top:140px;
	left:0px;
	width:960px;
}

#product .title{
	position:absolute;
	top:85px;
	left:-4px;
}

#product .lineup{
	width:462px;
	height:458px;
	position:relative;
	margin:0 10px 40px 20px;
	float:left;
}

#product .right{
	width:435px;
}

#product .lineup .img{
	position:absolute;
	top:0px;
	left:0px;
	width:171px;
	height:458px;
}

#product .lineup .txt{
	position:absolute;
	top:0px;
	left:145px;
	width:620px;
}

#product .lineup .btn{
	position:absolute;
	top:368px;
	left:160px;
}

#product .lineup .arrow{
	position:absolute;
	top:21px;
	left:112px;
	display:none;
	background:url(../img/product/lineupbtn_arrow.png) 50% 0px no-repeat;
	width:19px;
	height:21px;
}

#product .lineup .icon{
	position:absolute;
	top:-30px;
	left:370px;
}

#product img{
	position:absolute;
}

/*special wide space */

#product .lineup.wide .txt{
	left:640px;
}

#product .lineup.wide .btn{
	left:655px;
}



/* to page top btn */
#topagetopwrap{
	width:100px;
	height:100px;
	position:fixed;
	bottom:0px;
	left:50%;
	z-index:100;
}
#topagetop{
	width:100px;
	height:100px;
	position:absolute;
	top:0px;
	left:0px;
}

#topagetop .btn{
	position:absolute;
	top:-10px;
	left:394px;
}

#topagetop img{
	position:absolute;
}

#topagetop .arrow{
	position:absolute;
	width:22px;
	height:19px;
	background:url(../img/common/pagetop_arrow.png) 50% 0px no-repeat;
	left:35px;
}


#bnr{
	position:relative;
	width:960px;
	height:110px;
	margin:7px auto;
}
#bnr img{
	display:block;
}
#bnr a{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	opacity:1;
}
#bnr a:hover{
	opacity:.75;
}


/*yt*/
#yt{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:90;
	display:none;
}
#yt.in{
	display:block;
}
#yt .bg{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#fdde00;
	opacity:.8;
}
#yt-load{
	position:relative;
	width:690px;
	height:388px;
	margin:860px auto 0;
	/*background:#000;*/
}
#yt-close{
	position:relative;
	margin:20px auto 0;
	text-align:center;
}
#yt-close a{
	display:block;
	width:160px;
	height:70px;
	margin:0 auto;
	background:url(../img/youtube/closeBtn.png) no-repeat;
}
#yt-close a:hover{
	background-image:url(../img/youtube/closeBtn_over.png);
}


/*keyframes*/

@keyframes navOverBln {
	0%{
		transform: scale(0.5);
	}
	50%{
		transform: scale(1.2);
	}
	80%{
		transform: scale(0.95);
	}
	100%{
		transform: scale(1);
	}
}

@-webkit-keyframes navOverBln {
	0%{
		-webkit-transform: scale(0.5);
	}
	50%{
		-webkit-transform: scale(1.2);
	}
	80%{
		-webkit-transform: scale(0.95);
	}
	100%{
		-webkit-transform: scale(1);
	}
}

@keyframes navOverText {
	0%{
		transform: translate(-10px,-20px);
	}
	25%{
		transform: translate(3px,5px);
	}
	50%{
		transform: translate(2px,-2px);
	}
	75%{
		transform: translate(-1px,1px);
	}
	100%{
		transform: translate(0,0);
	}
}