@charset "utf-8";
@import url(https://www.suntory.co.jp/sun_common/en/fonts/css/fonts.css);
/*html {visibility: hidden;}
html.wf-active {visibility: visible;}
#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #302920;
	z-index: 11000;
}
#loader {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  color: #fff;
	z-index: 12000;
}
html.wf-active #loader-bg,
html.wf-active #loader {display: none;}
*/

/* reset */
/*********************/
#suntory_contents {
	margin: 0 auto;
	padding: 0;
	font-size: 62.5%;
	font-family:sans-serif;
}
#suntory_contents * {
	font-size:1em;
	margin: 0;
	list-style: none;
	letter-spacing: -0.001em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	word-wrap: break-word;
	white-space: normal;
}
#suntory_contents *::before,
#suntory_contents *::after {
   -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#suntory_contents *::after {
	display:block;
	clear:both;
}
#suntory_contents ul,
#suntory_contents ol,
#suntory_contents li {margin: 0;padding: 0;}
#suntory_contents img {
	width: auto;
	max-width: 100%;
	height: auto;
	border: none;
}
#suntory_contents table {
	width: 100%;
	border-collapse: collapse;
}
.clearfix {width:100%;}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
#suntorySubCommonHeader,
#suntoryCommonHeader {display: none;}
#suntoryCommonFt_in {position: relative;}

/* header */
/*********************/
#cont_header::after {content: '';}
#cont_header > div {position: relative;}
#cont_header,
#cont_header a {
	color: #fff;
	text-decoration: none;
	display: block;
}
/* pro header */
#wrap_pro_head {
	width: 100%;
	background-color: #302920;
}
#wrap_pro_head nav li {font-family: "a-otf-gothic-bbb-pr6n";}
/*#pro_navi li.store a {
	color: #000;
	background: #fff url(images/icon-cart.png) 5px 7px no-repeat;
	-webkit-background-size: 27px 27px;
	background-size: 27px 27px;
}
#pro_navi li.store span em {
	font-style: normal;
	font-weight: normal;
}
*/

/* footer */
/*******************/
#ftnavi_01 {background-color: #f0ede7;}

/* gotop */
.gotop {
	font-size: 1em;
	line-height: 1.2;
	text-align: center;
	width: 55px;
	position: fixed;
	z-index: 10000;
	right: 10px;
}
.gotop a {
	color: #987748;
	font-size: 0.9em;
	text-decoration: none;
	display: block;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
			border-radius: 5px;
	padding: 45px 0 5px;
	background: rgba(255,255,255,0.8) url(images/gotop.png) 50% 10px no-repeat;
}


/** min 768px **/
@media screen and (min-width:768px) {
	#suntory_contents {min-width: 960px;}
	.sp {display: none;}

/* header */
/*********************/
	#cont_header nav li {font-size: 1.5em;}
	#cont_header nav li li {font-size: 1em;}
	.navi .dropdown_fullwidth ul,
	#cont_header .wrap {
		width: 960px;
		margin:0 auto !important;
	}
	#cont_header .wrap::after {content: '';}
	#cont_header .wrap .logo,
	#cont_header .wrap h1 {float: left;}
	#cont_header .nav_wrap {float: right;}

	.navi > li.sp {display: none;}
	.navi .dropdown_fullwidth  {
		visibility: hidden;
		opacity: 0;
		transition: 0.4s;
		width: 100%;
		left: 0;
		position: absolute;
		z-index: 20002;
	}
	.navi li a {transition: 0.15s;}
	.navi li:hover .dropdown_fullwidth {
		visibility: visible;
		opacity: 1;
	}
	/* pro header */
	/********************/
	#wrap_pro_head {height: 80px;}
	#wrap_pro_head .logo {padding: 13px 0 0 15px;}
	#wrap_pro_head .wrap .logo img {width: 150px;}
	#pro_navi {
		padding: 18px 0;
	}
	#pro_navi .navi li {float: left;}
	#pro_navi li.pronv {
		height: 44px;
		padding:0 8px 0 12px;
		background: url(images/line-navpro-pc.png) 0 0 no-repeat;
	}
	#pro_navi li.store {margin:0 10px;}
	#pro_navi li.pronv.navi01 {background-image: none;}
	#pro_navi >ul > li.pronv > a /*,
	#pro_navi >ul > li.store > a */ {
		line-height: 44px;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}
	#pro_navi >ul > li.company img {
		display: inline;
		vertical-align: middle;
	}

	#pro_navi li.active > a,
	#pro_navi li.pronv a {padding:0 15px;}
	#pro_navi li.active > a,
	#pro_navi > ul > *.pronv:hover > a,
	#pro_navi li.pronv > a:hover {
		background-color: #17120c;
	}

	/*#pro_navi li.store a {padding: 0 10px 0 35px;}*/
    #pro_navi li.store img {width: 165px;}
	#pro_navi li.store a:hover {opacity: 0.7;}
	
	/* popup */
	#pro_navi li.store {position: relative;}
	#pro_navi li.store span {
		font-size: 0.8em;
		display: none;
	}
	#pro_navi li.store:hover span {
		color: #000;
        display: none;
		width: 180px;
		padding-top: 10px;
		position: absolute;
		bottom: -38px;
		left: 0;
		z-index: 1000;
	}
	#pro_navi li.store:hover span em {
		display: inline-block;
		background-color: #fff;
		position: relative;
		padding:5px 5px;
		border: 1px solid #302920;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}
	#pro_navi li.store:hover span em::after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 5px;
	margin-left: -5px;
	}

	/* second line */
	#pro_navi .navi .dropdown_fullwidth {
		top: 62px;
		padding-top: 18px;
	}
	#pro_navi .navi .dropdown_fullwidth .wrap {
		background-color: #fff;
		border-bottom: 1px solid #ededed;
		width: 100%;
	}
	#pro_navi li li {
		text-align: center;
		padding:15px 10px 10px;
	}
	#pro_navi li li img {display: block;margin-bottom: 3px;}
	#pro_navi li li a {color: #000}
	#pro_navi li li a:hover {text-decoration: underline;}

	/* footer */
	/*********************/
	.gotop {bottom: 100px;}
	#cont_footer .wrap {
		width: 960px;
		margin: auto;
		position: relative;
	}
	#ftnavi_01 {
		/*height: 150px;*/
        height: 120px;
	}
	#ftnavi_01 .ft_ttl {
		position: absolute;
		right: 10px;
		top: 20px;
	}
	#ftnavi_01 .ft_ttl img {width: 160px;}
	
	
	#ftnavi_01 a {text-decoration: none;}
	#ftnavi_01 a:hover {text-decoration: underline;}
	#ftnavi_01 div > ul > li {
		vertical-align: top;
		margin-right: 5.5%;
		background: url(images/line-ft.gif) 100% 0 repeat-y;
		position: absolute;
		top: 20px;
	}
/*	#ftnavi_01 .ftnav01 {width: 22%;}
	#ftnavi_01 .ftnav02 {width: 52%;}
	#ftnavi_01 .ftnav03 {width: 14%;}*/
	#ftnavi_01 .ftnav02 {
		left: 10px;
		width: 42%;
		padding-left: 70px;
		background: url(images/line-ft.gif) 100% 0 repeat-y, url(images/line-ft.gif) 0 0 repeat-y;
	}
	#ftnavi_01 .ftnav03 {
		left: 50%;
		width: 20%;
	}
	#ftnavi_01 div ul li p {
		font-size: 1.6em;
		margin-bottom: 5px;
		display: block;
	}
	#ftnavi_01 div ul li li {
		font-size: 1.4em;
		display: inline-block;
		margin-bottom: 5px;
	}
	#ftnavi_01 div ul li li::before {content: '・';}
	#ftnavi_01 div ul li p,
	#ftnavi_01 div ul li p a {color: #987748;}
	#ftnavi_01 div ul li li a {color: #000;}
	#ftnavi_01 .ftnav02 li {
		margin-right: 25px;
	}
    #ftnavi_01 div ul li li:last-child,
    #ftnavi_01 div ul li p:last-of-type {margin-bottom: -1px;}
    
	/* #suntoryCommonFt p#suntoryCommonFt_copy
	============================================================ */
	#suntoryCommonFt p#suntoryCommonFt_copy_local{
	position:absolute;
	bottom:13px;
	right:7px;
	font-family:'suntory syntax';
	font-size:10px;
	color:#aaa;
	}
	/* #suntoryCommonFt ul#suntoryCommonFt_txt_link
	============================================================ */
	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local{
	position:absolute;
	bottom:40px;
	right:220px;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local:after{content:""; clear:both; display:block;}
	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li{
	float:left;
	padding-right:12px;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li a{
	display:block;
	font-size:12px;
	letter-spacing:-0.5px;
	color:#46555e;
	overflow:visible;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li a.hover{
	text-decoration:underline;
	}
	/* #suntoryCommonFt p#suntoryCommonFt_notice
	============================================================ */
	#suntoryCommonFt p#suntoryCommonFt_notice_local{
	position:absolute;
	bottom:23px;
	left:10px;
	font-size:10px;
	line-height:15px;
	letter-spacing:-0.3px;
	color:#444;
	width:410px;
	}

	#suntoryCommonFt p#suntoryCommonFt_notice_local:before{
	background:url(//www.suntory.co.jp/sun_common/sun_navi/responsive/img/pc/pc.png) no-repeat 0 -120px;
	content:"";
	float:left;
	width:65px;
	height:32px;
	}

	#suntoryCommonFt p#suntoryCommonFt_notice_local.softdrink{line-height:29px;}
	#suntoryCommonFt p#suntoryCommonFt_notice_local.softdrink:before{background-position:-27px -120px;width:38px;}

}/** // min 768px **/

/** min 961x **/
@media screen and (min-width:961px) {
	#suntory_contents,
	#cont_header .wrap,
	#cont_footer .wrap {width: 100%;}
	#ftnavi_01 .ftnav02 {
		width: 42%;
		padding-right: 0;
	}
	#ftnavi_01 .ftnav03 {
		left: 50%;
		width: 20%;
	}
}/** // min 961x **/

/** min 1164px **/
@media screen and (min-width:1164px) {
	#suntory_contents {min-width: 1164px;}
	#cont_footer .wrap,
	#cont_header .wrap {width: 1164px;}
	#ftnavi_01 .ft_ttl {right: 50px;}
	#ftnavi_01 .ftnav02 {
		left: 0px;
		width: 500px;
		padding-left: 70px;
	}
	#ftnavi_01 .ftnav03 {
		left: 600px;
		width: 220px;
	}
}/** // min 1164px **/


/** max 767px **/
@media screen and (max-width:767px) {
	.pc {display: none;}

	/* header menu */
	/*********************/
	.nav_btn {position: absolute;}
	.nav_btn > span {
	display:block;
	position:relative;
	}
	.close span::before,
	.close span::after {
	content: '';
	display: block;
	position:absolute;
	height: 4px;
	transition: all 0.4s;
	}
	.active .nav_btn > span span {opacity: 0;}
	#cont_header nav li {font-size: 2em;}
	#cont_header nav li li {font-size: 1em;}
	#cont_header nav li a {
		padding: 15px 25px;
	}
	.close span {position: relative;}
	.close span::before,
	.close span::after {
		width: 20px;
		height: 4px;
		left: -24px;
		background-color: #fff;
	}
	.close span::before {
		top: 6px;
		-webkit-transform: translateY(7px) rotate(-225deg);
		transform: translateY(7px) rotate(-225deg);
	}
	.close span::after {
		top: 24px;
		-webkit-transform: translateY(-11px) rotate(225deg);
		transform: translateY(-11px) rotate(225deg);
	}
    .navi .navi02 > a {
        pointer-events: none;
    }
	.navi > li.sub > a{
		padding-right: 40px;
	}
	.navi > li.sub {position: relative;}
	.navi > li.sub ul {margin-right: -40px;}
	.navi > li.sub::after {
		content: '＋';
		font-size: 1.4em;
		text-align: center;
		padding: 0;
		display: block;
		position: absolute;
	}
	.navi > li.sub.open::after {content: '－';}
	.navi li li a {
		position: relative;
	}
	.navi li li a::before {
		content: '・';
		position: absolute;
		left: 30px;
	}
	.navi > li.close {text-align: center;}

	/* pro header */
	/********************/
	#cont_header .wrap .logo {padding: 12px 10px 8px 24px;}
	#cont_header .wrap .logo img {width: 125px;}
	/* menu button */
	#menu_btn_pro {
		color: #302920;
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1;
		padding: 5px 0;
		background-color: #fff;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
		top: 13px;
		right: 10px;
	}
	#menu_btn_pro > span {
		display: block;
		height: 34px;
		width: 100%;
		position: relative;
		padding:10px 10px 5px 40px;}
	#menu_btn_pro > span::before {
		width: 24px;
		height: 24px;
		display: block;
		content: url(images/btn-pronav.png);
		position: absolute;
		top: 5px;
		left: 10px;
		transition: 0.1s;
	}

	.active #menu_btn_pro > span::before {
		-webkit-transform: translateY(0px) rotate(90deg);
		transform: translateY(0px) rotate(90deg);
	}

	/* menu */
	#pro_navi p.company.sp {
		position: absolute;
		right: 5px;
		top: 5px;
	}

	.nav_wrap ul.navi {display: none;}
	#pro_navi .navi {border-top: 1px solid #fff;}
	#pro_navi .navi > li {border-top: dotted 1px rgba(255,255,255,0.2);}
	#pro_navi .navi > li:first-child {border-top: none;}
	/*#pro_navi li.store {padding:10px 20px;}*/
	/*#pro_navi li.store a {
		padding: 5px 10px 3px 35px;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
		display: inline-block;
	}*/
    #pro_navi li.store {padding: 10px 20px 5px;}
    #pro_navi li.store a {padding: 0;}
	#pro_navi li.company a {
		line-height: 0.8;
		padding:5px 10px;
	}
	#pro_navi .navi > li.close {
		background: none;
		background-color: #483d2f;
	}
	#pro_navi .navi > li.sub::after {
		color: #fff;
        border: 2px solid #fff;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
				border-radius: 50%;
		width: 40px;
		height: 40px;
		line-height: 32px;
		top: 10px;
        right: 10px;
	}
	/*#pro_navi .navi > li.sub.open::after {
		color: #fff;
		background-color: #483d2f;
	}*/
	#pro_navi li li img {display: none;}
	#pro_navi li ul {
		background-color: #483d2f;
		border-top: dotted 1px rgba(255,255,255,0.2);
	}
	#pro_navi li li {border-top: 1px solid #302920;}
	#pro_navi li li:first-child {border: none;}
	#pro_navi li li a {
		color: #fff;
		padding-left: 50px;
	}
	#pro_navi li.store span {
		font-size: 0.7em;
		padding-left: 5px;
	}
	.gotop {bottom: 10px;}

	/* #suntoryCommonFt p#suntoryCommonFt_copy
	============================================================ */
	#suntoryCommonFt p#suntoryCommonFt_copy_local {
	padding:11px 8px 20px 10px;
	font-family:'suntory syntax';
	font-size:8px;
	letter-spacing:-0.1px;
	color:#aaa;
	}
	/* #suntoryCommonFt ul#suntoryCommonFt_txt_link
	============================================================ */
	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local {
	margin:30px 0 20px 4px;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local:after{content:""; clear:both; display:block;}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li{
	float:left;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li:first-child:after{display:none;}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li a{
	display:block;
	padding:0 8px;
	font-size:11px;
	letter-spacing:-0.2px;
	color:#46555e;
	}

	#suntoryCommonFt ul#suntoryCommonFt_txt_link_local li a.hover{
	text-decoration:underline;
	}
	/* #suntoryCommonFt p#suntoryCommonFt_notice
	============================================================ */
	#suntoryCommonFt p#suntoryCommonFt_notice_local{
	margin:0 0 13px 10px;
	font-size:10px;
	line-height:14px;
	letter-spacing:-0.2px;
	color:#444;
	}

	#suntoryCommonFt p#suntoryCommonFt_notice_local:before{
	background:url(//www.suntory.co.jp/sun_common/sun_navi/responsive/img/sp/ft_notice.png) no-repeat 0 6px;
	background-size:56px 30px;
	content:"";
	float:left;
	width:65px;
	height:37px;
	}

	#suntoryCommonFt p#suntoryCommonFt_notice_local.softdrink{line-height:28px;}
	#suntoryCommonFt p#suntoryCommonFt_notice_local.softdrink:before{
	background-position:-25px 0;
	width:38px;
	}

}/** // max 767px **/

/** max 500px **/
@media screen and (max-width:500px) {
	#pro_navi li.store span {
		margin: 3px 0 0 -7px;
		display: block;
	}
}

/** min 768px **/
@media screen and (min-width:768px) {
	#ftnavi_02 {padding: 50px 0;}
	#ftnavi_02 p,
	#ftnavi_02 ul,
	#ftnavi_02 ul li {display: inline-block;}

	#ftnavi_02 p a,
	#ftnavi_02 li a {
		margin:0 10px;
		padding: 15px 0;
		width: 290px;
	}
}/** min 768px **/

/** max 767px **/
@media screen and (max-width:767px) {
	#ftnavi_02 {padding: 30px 0;}
	#ftnavi_02 p {
		margin-bottom: 35px;
	}
	#ftnavi_02 p,
	#ftnavi_02 ul li {
		display: inline-block;
		margin:0 15px 30px;
	}
	#ftnavi_02 p a,
	#ftnavi_02 li a {
		margin:0 10px;
		padding: 10px 25px;
	}
	#ftnavi_02 ul li a {padding:10px 15px;}
}/** max 767px **/