@charset "utf-8";
#suntoryCommonHeader, #suntoryCommonFooter {
	position: relative !important;
	z-index: 1;
}
/* SP */
@media screen and (max-width:767px) {
	#suntory_contents {
		overflow: hidden;
	}
	#mv {
		position: relative;
	}
	.leadwrapper {
		background: url("../img/bggrade.png") repeat-x top center;
		background-size: 60px auto;
	}
	#lead {
		background: url("../img/mainbg_babble.png") top center;
		background-size: 840px auto;
	}
	#lead .leadinner {
		padding: 8% 0 15% 0;
		position: relative;
	}
	#lead .text01 {
		margin: 0 0 3% 0;
	}
	#lead .text02 {
		margin: 0 0 5% 0;
	}
	#lead .leadbottle {
		margin: 0 0 5% 0;
	}
	#lead .point {
		background: url("../img/subbg_babble.png") no-repeat center center #fff;
		background-size: 600px auto;
		padding: 5% 5% 8% 5%;
		margin: 0 5%;
	}
	#lead .point .pointinner .pic {
		margin: 0 0 2% 0;
	}
	#lead .point .pointinner .pointtext {
		font-size: 16px;
		line-height: 2;
		font-weight: bold;
		vertical-align: middle;
	}
	#lead .point.point01 {
		margin: 0 5% 5% 5%;
	}
	#lead .point.point02 {
		margin: 0 5% 5% 5%;
	}
	#lead .point.point03 .pic {
		margin: 0 0 5% 0;
	}
	#lead .point.point03 .pointtext {
		text-align: center;
	}
	#cm {
		background: url("../img/mainbg_babble2.png") top center #FFF000;
		background-size: 840px auto;
	}
	#cm .cminner {
		padding: 5% 0 15% 0;
		position: relative;
	}
	#cm .title {
		margin: 0 0 3% 0;
	}
	#cm .cm_movie {
		margin: 0 5%;
	}
	#cm .movie {
		background: #fff;
		padding: 5%;
		position: relative;
	}
	#cm .movie::before {
		content: '';
		width: 4px;
		height: 100%;
		position: absolute;
		top: 4px;
		right: -4px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #5CC1DC;
		background-size: 940px auto;
	}
	#cm .movie::after {
		content: '';
		width: 100%;
		height: 4px;
		position: absolute;
		bottom: -4px;
		left: 4px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #5CC1DC;
		background-size: 940px auto;
	}
	#cm .movie a {
		display: block;
		cursor: pointer;
	}
	#cm .movie .thumb {
		position: relative;
	}
	#cm .movie .thumb .play {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		margin: -30px 0 0 -30px;
	}
	#cm .movie.movie01 {
		margin: 0 0 5% 0;
	}
	#cm .movie .name {
		margin: 5% 0 0 0;
		font-size: 16px;
		text-align: center;
	}
	#graphic {
		background: url("../img/mainbg_babble.png") top center;
		background-size: 840px auto;
	}
	#graphic .graphicinner {
		padding: 5% 0 15% 0;
		position: relative;
	}
	#graphic .title {
		margin: 0 0 3% 0;
	}
	#graphic .gracphic_pic {
		background: #fff;
		padding: 5%;
		position: relative;
		margin: 0 5%;
	}
	#graphic .gracphic_pic::before {
		content: '';
		width: 4px;
		height: 100%;
		position: absolute;
		top: 4px;
		right: -4px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #0057A6;
		background-size: 940px auto;
	}
	#graphic .gracphic_pic::after {
		content: '';
		width: 100%;
		height: 4px;
		position: absolute;
		bottom: -4px;
		right: -4px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #0057A6;
		background-size: 940px auto;
	}
	#graphic .gracphic_pic .pic01 {
		margin: 0 0 5% 0;
	}
	#contentsfoot {
		padding: 8% 0 8% 0;
		background: #fff;
	}
	#contentsfoot .brandbnr {
		width: 60%;
		margin: 0 auto;
	}
}
/* PC */
@media screen and (min-width:768px) {
	.contents {
		min-width: 1164px;
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#mv {
		width: 100%;
		min-width: 1164px;
		height: 735px;
	}
	#mv .slide {
		height: 0;
		padding: 735px 0 0 0;
		overflow: hidden;
	}
	#mv .mv01 {
		background: url("../img/mv_slide01_pc.jpg") no-repeat center center #0057A6;
		background-size: 1920px auto;
	}
	#mv .mv02 {
		background: url("../img/mv_slide02_pc.jpg") no-repeat center center #0057A6;
		background-size: 1920px auto;
	}
	#mv .mvinner {
		margin: 0 auto;
		position: relative;
	}
	#mv .slick-dots {
		width: 100%;
		position: absolute;
		bottom: -60px;
		text-align: center;
		z-index: 10;
	}
	#mv .slick-dots li {
		display: inline-block;
		margin: 0 15px;
	}
	#mv .slick-dots li button {
		display: block;
		width: 12px;
		height: 0;
		overflow: hidden;
		padding: 12px 0 0 0;
		border: none;
		background: #004FA4;
		border-radius: 6px;
		cursor: pointer;
		transition: 0.2s;
		opacity: 1;
	}
	#mv .slick-dots li:hover button {
		opacity: 0.5;
	}
	#mv .slick-dots li.slick-active button {
		opacity: 0.5;
	}
	.leadwrapper {
		background: url("../img/bggrade.png") repeat-x top center;
	}
	#lead {
		background: url("../img/mainbg_babble.png") top center;
		background-size: 2040px auto;
	}
	#lead .leadinner {
		width: 900px;
		margin: 0 auto;
		padding: 180px 0 120px 0;
		position: relative;
	}
	#lead .leadtext {
		margin: 0 0 140px 0;
	}
	#lead .text01 {
		width: 418px;
		margin: 0 0 55px 0;
	}
	#lead .text02 {
		width: 348px;
	}
	#lead .leadbottle {
		width: 660px;
		position: absolute;
		top: 40px;
		right: -140px;
	}
	#lead .point {
		background: url("../img/subbg_babble.png") no-repeat center center #fff;
		background-size: 1000px auto;
		padding: 40px 65px;
	}
	#lead .point .pointinner {
		display: table;
	}
	#lead .point .pointinner .pic {
		display: table-cell;
		width: 180px;
	}
	#lead .point .pointinner .pointtext {
		display: table-cell;
		font-size: 20px;
		line-height: 2;
		font-weight: bold;
		vertical-align: middle;
		padding: 0 0 0 40px;
	}
	#lead .point.point01 {
		margin: 0 0 20px 0;
	}
	#lead .point.point02 {
		margin: 0 0 20px 0;
	}
	#lead .point.point03 .pointinner .pic {
		width: 300px;
	}
	#cm {
		background: url("../img/mainbg_babble2.png") top center #FFF000;
		background-size: 2040px auto;
	}
	#cm .cminner {
		width: 900px;
		margin: 0 auto;
		padding: 60px 0 90px 0;
		position: relative;
	}
	#cm .title {
		width: 720px;
		margin: 0 auto 50px auto;
	}
	#cm .cm_movie {
		width: 705px;
		margin: 0 auto;
	}
	#cm .movie {
		background: #fff;
		padding: 30px;
		position: relative;
	}
	#cm .movie::before {
		content: '';
		width: 10px;
		height: 100%;
		position: absolute;
		top: 10px;
		right: -10px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #5CC1DC;
		background-size: 1000px auto;
	}
	#cm .movie::after {
		content: '';
		width: 705px;
		height: 10px;
		position: absolute;
		bottom: -10px;
		left: 10px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #5CC1DC;
		background-size: 1000px auto;
	}
	#cm .movie a {
		display: block;
		cursor: pointer;
	}
	#cm .movie .thumb {
		position: relative;
	}
	#cm .movie .thumb .play {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80px;
		margin: -40px 0 0 -40px;
		transition: 0.2s;
	}
	#cm .movie a:hover .thumb .play {
		transform: scale(1.1);
	}
	#cm .movie.movie01 {
		margin: 0 0 30px 0;
	}
	#cm .movie .name {
		margin: 20px 0 0 0;
		font-size: 18px;
		text-align: center;
	}
	#graphic {
		background: url("../img/mainbg_babble.png") top center;
		background-size: 2040px auto;
	}
	#graphic .graphicinner {
		width: 900px;
		margin: 0 auto;
		padding: 60px 0 90px 0;
		position: relative;
	}
	#graphic .title {
		width: 720px;
		margin: 0 auto 50px auto;
	}
	#graphic .gracphic_pic {
		background: #fff;
		padding: 40px 60px;
		position: relative;
		width: 850px;
		margin: 0 auto;
	}
	#graphic .gracphic_pic::before {
		content: '';
		width: 10px;
		height: 100%;
		position: absolute;
		top: 10px;
		right: -10px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #0057A6;
		background-size: 1000px auto;
	}
	#graphic .gracphic_pic::after {
		content: '';
		width: 850px;
		height: 10px;
		position: absolute;
		bottom: -10px;
		right: -10px;
		z-index: 0;
		background: url("../img/subbg_babble.png") repeat-y top center #0057A6;
		background-size: 1000px auto;
	}
	#graphic .gracphic_pic .pic01 {
		margin: 0 0 30px 0;
	}
	#contentsfoot {
		padding: 70px 0 70px 0;
		background: #fff;
	}
	#contentsfoot .brandbnr {
		width: 470px;
		margin: 0 auto;
	}
}