@charset "utf-8";
#suntoryCommonHeader, #suntoryCommonFooter {
	position: relative !important;
	z-index: 1;
}
/* SP */
@media screen and (max-width:767px) {
	#suntory_contents {
		overflow: hidden;
		padding: 5% 0 0 0;
	}
	#mv {
		background: url("../img/mv_bg_sp.jpg") no-repeat center top;
		background-size: 100% auto;
		padding: 8% 0 8% 0;
	}
	#mv .mvinner {
		position: relative;
		margin: 0 0 8% 0;
	}
	#mv .mvpic {
		margin: -8% 0 0 0;
		position: relative;
	}
	#mv .mvtext {
		width: 35%;
		position: absolute;
		bottom: 14%;
		right: 10%;
	}
	#mv .mvarrow {
		width: 24%;
		position: absolute;
		bottom: 12%;
		left: 39%;
	}
	#mv .mvstepbtn {
		width: 85%;
		margin: 0 auto 8% auto;
	}
	#mv .mvhowto .titlewrapper {
		margin: 0 auto 3% auto;
		position: relative;
	}
	#mv .mvhowto .titlewrapper .titlebg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.mvhowto {
		margin: 0 0 8% 0;
	}
	.howtomovie {
		width: 84%;
		margin: 0 auto;
	}
	.howtomovie a {
		display: block;
		cursor: pointer;
	}
	.howtomovie .thumb {
		position: relative;
	}
	.howtomovie .play {
		display: block;
		width: 20%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -10% 0 0 -10%;
	}
	.mvbrandbtn {
		width: 30%;
		margin: 0 auto 8% auto;
	}
	.mvlead .leadtext {
		width: 100%;
		margin: 0 0 2% 0;
	}
	.mvlead .leadnote {
		font-size: 12px;
		color: #666;
		margin: 0 10% 8% 10%;
	}
	.mvlead .leadpic .pictext {
		margin: 0 0 -5% 0;
	}
	.mvlead .leadpic .pic {
		margin: 0 0 -5% 0;
	}
	.mvchara {
		width: 100%;
		margin: 0;
	}
	.mvchara .chara02 {
		margin: 0 auto;
		width: 54%;
	}
	.contentsarrow.arrow01 {
		margin: 5% 0 8% 0;
	}
	#lead {
		margin: 0 0 8% 0;
	}
	#step .steptitle {
		margin: 0 0 3% 0;
	}
	#step .movie {
		margin: 0 auto 10% auto;
	}
	.movie {
		width: 84%;
		margin: 0 auto;
	}
	.movie a {
		display: block;
		cursor: pointer;
	}
	.movie .thumb {
		position: relative;
	}
	#step .movie .thumb {
		border: 1px solid #55b9d3;
	}
	.movie .play {
		display: block;
		width: 20%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -10% 0 0 -10%;
	}
	.movie .caption {
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #004795;
		margin: 2% 0 0 0;
	}
	.steplist {
		margin: 0 0 5% 0;
	}
	.steplist .steparrow {
		margin: 3% 0
	}
	.steppic .steppicbottle {
		position: relative;
		margin: 0 0 5% 0;
	}
	.steppic .steppicbottle .num16 {
		width: 32%;
		position: absolute;
		bottom: 32%;
		right: 8%;
	}
	.steppic .steppicbottle .text {
		width: 32%;
		position: absolute;
		bottom: 17%;
		right: 9%;
	}
	.steppic .steppicbottle .arrow {
		width: 23%;
		position: absolute;
		bottom: 14%;
		right: 38%;
	}
	.stepbottom .title {
		margin: 0 0 3% 0;
	}
	.stepbottom .text {
		margin: 0;
	}
	.contentsarrow.arrow02 {
		margin: 8% 0 5% 0;
	}
	#newbottle .title {
		margin: 0 0 3% 0;
	}
	#newbottle .text {
		margin: 0;
	}
	#newbottle .pic {
		margin: 0 0 5% 0;
	}
	.contentsarrow.arrow03 {
		margin: 5% 0 5% 0;
	}
	#movie {
		background: url("../img/movie_bg_sp.jpg") no-repeat center top;
		background-size: 100% auto;
		margin: 0 0 5% 0;
	}
	#movie .moviewrapper {
		padding: 9% 0 10% 0;
		background: url("../img/movie_bg_bottom_sp.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	#movie .movieinner .cm {
		margin: 0 auto 6% auto;
	}
	#movie .movieinner .title {
		margin: 0 0 1% 0;
	}
	#movie .movieinner .cm .movie01 {
		margin: 0 auto 3% auto;
	}
	#movie .movieinner .special {
		margin: 0 auto 6% auto;
	}
	#movie .movieinner .webmovie {
		margin: 0 auto 6% auto;
	}
	#movie .movieinner .webmovie .movie01 {
		margin: 0 auto 3% auto;
	}
	#movie .movieinner .graphic .graphiclist {
		margin: 0 7%;
	}
	#movie .movieinner .graphic .graphiclist .graphic01 {
		margin: 0 0 3% 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic02 {
		margin: 0 0 3% 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic03 {
		margin: 0 0 3% 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic04 {
		margin: 0 0 3% 0;
	}
	.bottombottle .bottombottleinner {
		position: relative;
	}
	.bottombottle .text {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#contentsfoot {
		padding: 12% 0;
	}
	#contentsfoot .brandbnr .bnr {
		width: 50%;
		margin: 0 auto 3% auto;
	}
	#contentsfoot .brandbnr .text {
		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;
		background: url("../img/mv_bg_pc.jpg") no-repeat center top;
		background-size: 1300px auto;
		padding: 0 0 60px 0;
		margin: 0 0 70px 0;
	}
	#mv .mvinner {
		width: 1164px;
		margin: 0 auto;
		padding: 80px 0 80px 0;
		position: relative;
	}
	#mv .mvtitle {
		width: 625px;
		position: absolute;
		top: 128px;
		left: 406px;
	}
	#mv .mvtext {
		width: 186px;
		position: absolute;
		top: 316px;
		right: -10px;
	}
	#mv .mvarrow {
		width: 242px;
		position: absolute;
		top: 572px;
		left: 442px;
	}
	#mv .mvstepbtn {
		width: 532px;
		margin: -20px auto 55px auto;
	}
	#mv .mvstepbtn a {
		display: block;
		transition: 0.2s;
	}
	#mv .mvstepbtn a:hover {
		transform: translateY(10px);
	}
	#mv .mvhowto .titlewrapper {
		width: 830px;
		margin: 0 auto 20px auto;
		position: relative;
	}
	#mv .mvhowto .titlewrapper .titlebg {
		width: 830px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.mvhowto {
		margin: 0 0 65px 0;
	}
	.howtomovie {
		width: 824px;
		margin: 0 auto;
	}
	.howtomovie a {
		display: block;
		cursor: pointer;
	}
	.howtomovie .thumb {
		position: relative;
	}
	.howtomovie .play {
		display: block;
		width: 148px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -74px 0 0 -74px;
		transition: 0.2s;
	}
	.howtomovie a:hover .play {
		transform: scale(1.2);
	}
	.mvbrandbtn {
		width: 204px;
		margin: 0 auto 65px auto;
	}
	.mvbrandbtn a {
		display: block;
		transition: 0.2s;
	}
	.mvbrandbtn a:hover {
		transform: scale(1.1);
	}
	.mvlead {
		width: 1164px;
		margin: 0 auto 60px auto;
		position: relative;
	}
	.mvlead .leadtext {
		width: 576px;
		margin: 0 0 0 40px;
	}
	.mvlead .leadpic {
		width: 506px;
		position: absolute;
		top: -30px;
		right: 30px;
	}
	.mvlead .leadpic .pic {
		width: 735px;
		position: absolute;
		top: 315px;
		left: 0;
	}
	.mvlead .leadnote {
		font-size: 14px;
		color: #666;
		margin: 20px 0 0 70px;
	}
	.mvchara {
		width: 752px;
		margin: 0 auto;
	}
	.mvchara .chara01 {
		float: left;
		width: 400px;
		margin: 0 -48px 0 0;
	}
	.mvchara .chara02 {
		margin: 0 auto;
		width: 430px;
		padding: 0 0 0 40px;
	}
	#lead {
		width: 1164px;
		margin: 0 auto 60px auto;
	}
	#step .steptitle {
		width: 1164px;
		margin: 0 auto 60px auto;
	}
	.movie {
		width: 824px;
		margin: 0 auto;
	}
	.movie a {
		display: block;
		cursor: pointer;
	}
	.movie .thumb {
		position: relative;
	}
	.movie .play {
		display: block;
		width: 148px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -74px 0 0 -74px;
		transition: 0.2s;
	}
	.movie a:hover .play {
		transform: scale(1.2);
	}
	.movie .caption {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #004795;
		margin: 15px 0 0 0;
	}
	#step .movie .thumb {
		border: 1px solid #55b9d3;
	}
	#step .stepbox {
		width: 1124px;
		margin: 80px auto 0 auto;
	}
	#step .steplist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 40px 0;
	}
	#step .steplist li {
		width: 510px;
		position: relative;
	}
	.step01 {
		padding: 0 0 90px 0;
	}
	.step01 .steparrow {
		width: 188px;
		position: absolute;
		top: 170px;
		left: 460px;
	}
	.step02 {
		padding: 0 0 90px 0;
	}
	.step02 .steparrow {
		width: 188px;
		position: absolute;
		bottom: -47px;
		right: 460px;
	}
	.step03 .steparrow {
		width: 188px;
		position: absolute;
		top: 170px;
		left: 460px;
	}
	.steppic .steppicbottle {
		background: url("../img/step_bottle_pc.png") no-repeat center center;
		background-size: 1300px auto;
		position: relative;
		margin: 0 0 80px 0;
	}
	.steppic .bottle {
		display: none;
	}
	.steppic .stepbottleinner {
		width: 1164px;
		height: 1054px;
		margin: 0 auto;
		position: relative;
	}
	.steppic .steppicbottle .num16 {
		width: 360px;
		position: absolute;
		top: 102px;
		right: 80px;
	}
	.steppic .steppicbottle .chara {
		width: 422px;
		position: absolute;
		top: 532px;
		right: 52px;
	}
	.steppic .steppicbottle .arrow {
		width: 320px;
		position: absolute;
		bottom: 135px;
		left: 416px;
	}
	.stepbottom {
		min-width: 1164px;
		padding: 0 0 484px 0;
		background: url("../img/step_bottompic_pc.png") no-repeat center bottom;
		background-size: 1300px auto;
	}
	.stepbottom .title {
		width: 1164px;
		margin: 0 auto 20px auto;
	}
	.stepbottom .text {
		width: 1164px;
		margin: 0 auto;
	}
	#newbottle .title {
		width: 1164px;
		margin: 0 auto;
	}
	#newbottle .text {
		width: 1164px;
		margin: 0 auto 20px auto;
	}
	#newbottle .pic {
		width: 1164px;
		margin: 0 auto 150px auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#newbottle .pic .pic01 {
		width: 582px;
	}
	#newbottle .pic .pic02 {
		width: 582px;
	}
	#movie {
		background: url("../img/movie_bg_pc.jpg") no-repeat center top;
		background-size: 1300px auto;
		min-width: 1164px;
	}
	#movie .moviewrapper {
		min-width: 1164px;
		padding: 160px 0 60px 0;
		background: url("../img/movie_bg_bottom_pc.jpg") no-repeat center bottom;
		background-size: 1300px auto;
	}
	#movie .movieinner {
		width: 1164px;
		margin: 0 auto;
	}
	#movie .movieinner .cm {
		width: 824px;
		margin: 0 auto 160px auto;
	}
	#movie .movieinner .cm .title {
		width: 400px;
		margin: 0 0 10px 0;
	}
	#movie .movieinner .cm .movie01 {
		margin: 0 0 60px 0;
	}
	#movie .movieinner .special {
		width: 824px;
		margin: 0 auto 160px auto;
	}
	#movie .movieinner .special .title {
		width: 400px;
		margin: 0 0 10px 0;
	}
	#movie .movieinner .webmovie {
		width: 824px;
		margin: 0 auto 160px auto;
	}
	#movie .movieinner .webmovie .title {
		width: 400px;
		margin: 0 0 10px 0;
	}
	#movie .movieinner .webmovie .movie01 {
		margin: 0 0 60px 0;
	}
	#movie .movieinner .graphic {
		width: 1024px;
		margin: 0 auto 150px auto;
	}
	#movie .movieinner .graphic .title {
		width: 400px;
		margin: 0 0 10px 0;
	}
	#movie .movieinner .graphic .graphiclist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#movie .movieinner .graphic .graphiclist .graphic01 {
		width: 100%;
		margin: 0 0 20px 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic02 {
		width: 500px;
		margin: 0 0 20px 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic03 {
		width: 500px;
		margin: 0 0 20px 0;
	}
	#movie .movieinner .graphic .graphiclist .graphic04 {
		width: 500px;
	}
	#movie .movieinner .graphic .graphiclist .graphic05 {
		width: 500px;
	}
	.bottombottle {
		background: url("../img/bottom_pic_pc.png") no-repeat center bottom;
		background-size: 1300px auto;
		min-width: 1164px;
		margin: 0 0 175px 0;
	}
	.bottombottle .bottombottleinner {
		width: 1164px;
		height: 980px;
		margin: 0 auto;
		position: relative;
	}
	.bottombottle .text {
		position: absolute;
		top: 202px;
		right: 95px;
		width: 502px;
	}
	#contentsfoot {
		padding: 0 0 230px 0;
	}
	#contentsfoot .brandbnr .bnr {
		width: 596px;
		margin: 0 auto 20px auto;
		transition: 0.2s;
	}
	#contentsfoot .brandbnr .text {
		width: 676px;
		margin: 0 auto;
	}
	#contentsfoot .brandbnr a {
		width: 676px;
		margin: 0 auto;
		display: block;
	}
	#contentsfoot .brandbnr a:hover .bnr {
		transform: scale(1.05);
	}
}