@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */

/*------------------------------------------------------------
[SP] main_visual
------------------------------------------------------------ */
#suntory_contents .main_visual {
	background: url(../img/bg_sp.webp) no-repeat center 32vw;
	background-size:auto 73.333333333333333vw;
	margin-bottom: 17.333333333333333vw;
	padding: 5.333333333333333vw 4vw 0;
	position: relative;
}
.no-webp #suntory_contents .main_visual {
	background: url(../img/bg_sp.jpg) no-repeat center 32vw;
	background-size:auto 73.333333333333333vw;
}
#suntory_contents .main_visual h1 {
	margin-bottom: 87.2vw;
	font-size: 8vw;
	line-height: 1;
	color: #0D347F;
	font-weight: normal;
	opacity: 0;
}
#suntory_contents .main_visual h1.active {
	animation:h1_move 1s ease;
	animation-fill-mode:forwards;
}
@keyframes h1_move{
	0%{
		transform: translate(-50px, 0);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .main_visual h1 span {
	margin-bottom: 3.2vw;
	font-size: 5.6vw;
	display: block;
}
#suntory_contents .main_visual .text {
	margin-bottom: 5.6vw;
	font-size: 4vw;
	line-height: 1.8;
}
#suntory_contents .main_visual .text.active {
	animation:text00_move 1s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes text00_move{
	0%{
		transform: translate(-50px, 0);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .main_visual .btn_message {
	width: 92vw;
	height: 16vw;
	position: relative;
	overflow: hidden;
}
#suntory_contents .main_visual .btn_message::before {
	content: '';
	width: 0;
	height: 16vw;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .main_visual .btn_message.active::before {
	animation:message_move .5s ease 1s;
	animation-fill-mode:forwards;
}
@keyframes message_move{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(92vw,0);
	}
}

#suntory_contents .main_visual .btn_message a {
	width: 92vw;
	height: 16vw;
	background: #004aa9;
	background: url(../img/svg/text_message.svg) no-repeat 20.533333333333333vw center,url(../img/svg/arrow_right.svg) no-repeat right 2.933333333333333vw center, linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	background-size: auto 4.8vw,5.333333333333333vw auto, auto auto;
	display: flex;
	font-size: 3.466666666666667vw;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	padding: 7.2vw 0 0 54.4vw;
	opacity: 0;
}
#suntory_contents .main_visual .btn_message.active a {
	animation:message_view 1s ease 1s;
	animation-fill-mode:forwards;
}
@keyframes message_view{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#suntory_contents .main_visual .img_00 {
	width: 85.6vw;
	height: 80vw;
	background: url(../img/mv2506.webp) no-repeat 0 0;
	background-size: auto 80vw;
	position: absolute;
	top: 25.066666666666667vw;
	left:10.4vw;
	opacity: 0;
}
/*.no-webp #suntory_contents .main_visual .img_00 {
	background: url(../img/mv.png) no-repeat 0 0;
	background-size: auto 80vw;
}*/
#suntory_contents .main_visual .img_00.active {
	animation:2s ease img00_move;
	animation-fill-mode:forwards;
}
@keyframes img00_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}

/*------------------------------------------------------------
[SP] section
------------------------------------------------------------ */
#suntory_contents .section_group {
	position: relative;
	width: 92vw;
	margin: 0 auto 10.933333333333333vw;
	padding-bottom: 20vw;
	border-left: 0.266666666666667vw #6692CB solid;
	border-bottom: 0.266666666666667vw #6692CB solid;
}
#suntory_contents .section_group .group_title {
	margin: 0 4vw 12vw;
	font-size: 7.466666666666667vw;
	opacity: 0;
}
#suntory_contents .section_group .group_title.active {
	animation:group_title_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes group_title_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .section {
	padding:0 4vw;
	width: auto;
	position: relative;
}
#suntory_contents #section01 {
	margin-bottom: 42.933333333333333vw;
}
#suntory_contents #section02 {
	margin-bottom: 18.933333333333333vw;
}

#suntory_contents #section01::before {
	content: '';
	width: 96vw;
	height: 97.6vw;
	background: #F5F5F5;
	position: absolute;
	top: 14.666666666666667vw;
	left: -4vw;
	z-index: -1;
}
#suntory_contents #section02::before {
	content: '';
	width: 96vw;
	height: 137.6vw;
	background: #F5F5F5;
	position: absolute;
	top: 14.666666666666667vw;
	left: -4vw;
	z-index: -1;
}
#suntory_contents #section03::before {
	content: '';
	width: 96vw;
	height: 140.266666666666667vw;
	background: #F5F5F5;
	position: absolute;
	top: 14.666666666666667vw;
	left: -4vw;
	z-index: -1;
}

#suntory_contents .section h2 {
	font-size: 7.466666666666667vw;
	font-weight: normal;
	line-height: 1.25;
	height: 18.666666666666667vw;
	display: flex;
	align-items: center;
	margin-bottom: 8vw;
	opacity: 0;
}
#suntory_contents .section h2.active {
	animation:section_title_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes section_title_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .section#section01 h2 span {
	margin-right: 4.533333333333333vw;
	width: 21.6vw;
	height: 18.666666666666667vw;
	text-indent:-99999px;
	background: url(../img/svg/number01.svg) no-repeat 0 center;
	background-size:auto 18.666666666666667vw;
	display: inline-block;
	opacity: .7;
}
#suntory_contents .section#section02 h2 span {
	margin-right: 4.533333333333333vw;
	width: 25.866666666666667vw;
	height: 18.666666666666667vw;
	text-indent:-99999px;
	background: url(../img/svg/number02.svg) no-repeat 0 center;
	background-size:auto 18.666666666666667vw;
	display: inline-block;
	opacity: .7;
}
#suntory_contents .section#section03 h2 span {
	margin-right: 4.533333333333333vw;
	width: 26.133333333333333vw;
	height: 18.666666666666667vw;
	text-indent:-99999px;
	background: url(../img/svg/number03.svg) no-repeat 0 center;
	background-size:auto 18.666666666666667vw;
	display: inline-block;
	opacity: .7;
}
#suntory_contents .section .lead {
	margin-bottom: 8vw;
	font-size: 4vw;
	line-height: 1.8;
	letter-spacing: -.05em;
	opacity: 0;
}
#suntory_contents .section .lead.active {
	animation:lead_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes lead_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .btn_container {
	margin: 0 auto 12vw;
	padding: 0;
	width: 64vw;
	list-style: none;
	opacity: 0;
}
#suntory_contents .btn_container.active {
	animation:btn_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes btn_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}	
#suntory_contents .btn_container li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64vw;
	height: 13.6vw;
	background: #00B1DD url(../img/svg/arrow_right.svg) no-repeat right 3.2vw center;
	background-size:3.2vw auto;
	color: #fff;
	font-size: 4.266666666666667vw;
	text-decoration: none;
	padding-right: 3.2vw;
}
#suntory_contents .btn_container li + li {
	margin-top: 4vw;
}

#suntory_contents .btn_more a {
	margin: 0 auto 8vw;
	display: block;
	width: 48vw;
	height: 13.6vw;
	background: url(../img/svg/text_viewmore.svg) no-repeat 9.333333333333333vw center,
	url(../img/svg/arrow_right.svg) no-repeat right 3.2vw center #00B1DD;
	background-size:26.4vw auto,3.2vw auto;
	text-indent: -99999px;
	opacity: 0;
}
#suntory_contents .btn_more.active a {
	animation:btn_move .5s ease;
	animation-fill-mode:forwards;
	transition: 0.2s;
}

#suntory_contents .img_wrap01 {
	margin: 0 0 0 5.866666666666667vw;
	width: 59.2vw;
	position: relative;
}
#suntory_contents .img_wrap01::after {
	content: '';
	width: 58.666666666666667vw;
	height: 0.4vw;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 44.8vw;
	left: 4vw;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active::after {
	animation:img_bar_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes img_bar_move {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

#suntory_contents .section .img_cover01 {
	width: 59.2vw;
	height: 42.133333333333333vw;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover01::before {
	content: '';
	width: 0;
	height: 42.133333333333333vw;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap01.active .img_cover01::before {
	animation:img_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes img_move{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(59.2vw,0);
	}
}
#suntory_contents .section .img_01_01 {
	width: 59.2vw;
	height: 42.133333333333333vw;
	overflow: hidden;
	background: url(../img/ph_top_01.webp) no-repeat 0 0;
	background-size:59.2vw auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active .img_01_01 {
	animation:img_view 1s ease;
	animation-fill-mode:forwards;
}
@keyframes img_view {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.no-webp #suntory_contents .section .img_01_01 {
	background: url(../img/ph_top_01.jpg) no-repeat 0 0;
	background-size:59.2vw auto;
}


#suntory_contents .section .img_01_02 {
	width: 16vw;
	height: 49.6vw;
	background: url(../img/ph_top_01bottle.webp) no-repeat 0 0;
	background-size:16vw auto;
	position: absolute;
	top: 19.466666666666667vw;
	left: 56.266666666666667vw;
	z-index: 10;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active .img_01_02 {
	animation:img_view2 1s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes img_view2 {
	0%{
		opacity: 0;
		transform: translate(-40px,0);
	}
	100%{
		opacity: 1;
		transform: translate(0,0);
	}
}
.no-webp #suntory_contents .section .img_01_02 {
	background: url(../img/ph_top_01bottle.png) no-repeat 0 0;
	background-size:16vw auto;
}

#suntory_contents .section .img_02_01 {
	margin: 0 auto 12.266666666666667vw;
	width: 82.933333333333333vw;
	height: 49.333333333333333vw;
	background: url(../img/img_02.webp) no-repeat 0 0;
	background-size:82.933333333333333vw auto;
	text-indent: -99999px;
	opacity: 0;
}
#suntory_contents .img_02_01.active {
	animation:fig_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes fig_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
.no-webp #suntory_contents .section .img_02_01 {
	background: url(../img/img_02.png) no-repeat 0 0;
	background-size:82.933333333333333vw auto;
}

#suntory_contents .img_wrap02 {
	margin: 0 0 0 1.2vw;
	width: 78.133333333333333vw;
	position: relative;
}
#suntory_contents .section .img_cover02 {
	width: 78.133333333333333vw;
	height: 44vw;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover02::before {
	content: '';
	width: 0;
	height: 44vw;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap02.active .img_cover02::before {
	animation:img_move2 .5s ease 1s;
	animation-fill-mode:forwards;
}
@keyframes img_move2{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(78.133333333333333vw,0);
	}
}

#suntory_contents .img_wrap02::after {
	content: '';
	width: 77.866666666666667vw;
	height: 0.533333333333333vw;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 46.933333333333333vw;
	bottom: 10px;
	left: 4.533333333333333vw;
	opacity: 0;
}
#suntory_contents .section .img_wrap02.active::after {
	animation:img_bar_move .5s ease 1.5s;
	animation-fill-mode:forwards;
}
#suntory_contents .section .img_02_02 {
	width: 78.133333333333333vw;
	height: 44vw;
	overflow: hidden;
	background: url(../img/ph_top_02.webp) no-repeat 0 0;
	background-size:78.133333333333333vw auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap02.active .img_02_02 {
	animation:img_view 1s ease 1s;
	animation-fill-mode:forwards;
}
.no-webp #suntory_contents .section .img_02_02 {
	background: url(../img/ph_top_02.jpg) no-repeat 0 0;
	background-size:78.133333333333333vw auto;
}

#suntory_contents .img_wrap03 {
	margin: 0 0 0 16vw;
	width: 48vw;
	position: relative;
}
#suntory_contents .img_wrap03::after {
	content: '';
	width: 48vw;
	height: 0.533333333333333vw;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 53.066666666666667vw;
	left: 4vw;
	opacity: 0;
}
#suntory_contents .section .img_wrap03.active::after {
	animation:img_bar_move .5s ease 1s;
	animation-fill-mode:forwards;
}

#suntory_contents .section .img_03_01 {
	width: 48vw;
	height: 49.866666666666667vw;
	background: url(../img/ph_top_03.webp) no-repeat 0 0;
	background-size:48vw auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap03.active .img_03_01 {
	animation:img_view 1s ease .5s;
	animation-fill-mode:forwards;
}
#suntory_contents .section .img_cover03 {
	width: 48vw;
	height: 49.866666666666667vw;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover03::before {
	content: '';
	width: 0;
	height: 49.866666666666667vw;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap03.active .img_cover03::before {
	animation:img_move3 .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes img_move3{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(48vw,0);
	}
}

.no-webp #suntory_contents .section .img_03_01 {
	background: url(../img/ph_top_03.jpg) no-repeat 0 0;
	background-size:48vw auto;
}
.btn_promotion a {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56vw;
	height: 16vw;
	background: #004AA9 url(../img/svg/arrow_right.svg) no-repeat right 3.2vw center;
	background-size:3.2vw auto;
	color: #fff;
	font-size: 4.266666666666667vw;
	text-decoration: none;
	padding-right: 3.2vw;
}


/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {

/*------------------------------------------------------------
[PC] main_visual
------------------------------------------------------------ */
#suntory_contents .main_visual {
	background: url(../img/bg_pc.webp) repeat-x center bottom;
	background-size:auto 550px;
	margin-bottom: 0;
	padding: 0;
	position: relative;
	min-height: 695px;
}
.no-webp #suntory_contents .main_visual {
	background: url(../img/bg_pc.jpg) repeat-x center bottom;
	background-size:auto 550px;
}
#suntory_contents .main_visual .inner {
	margin: 0 auto;
	width: 1160px;
	min-height: 695px;
	position: relative;
}
#suntory_contents .main_visual h1 {
	margin-bottom: 35px;
	font-size: 56px;
	line-height: 1;
	color: #0D347F;
	opacity: 0;
}
#suntory_contents .main_visual h1.active {
	animation:h1_move 1s ease;
	animation-fill-mode:forwards;
}
@keyframes h1_move{
	0%{
		transform: translate(-50px, 0);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .main_visual h1 span {
	margin-bottom: 20px;
	font-size: 40px;
	display: block;
}
#suntory_contents .main_visual .text {
	width: 560px;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0;
}
#suntory_contents .main_visual .text.active {
	animation:text00_move 1s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes text00_move{
	0%{
		transform: translate(-50px, 0);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .main_visual .btn_message {
	width: 400px;
	height: 100px;
	position: relative;
	overflow: hidden;
}
#suntory_contents .main_visual .btn_message::before {
	content: '';
	width: 0;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .main_visual .btn_message.active::before {
	animation:message_move .5s ease 1s;
	animation-fill-mode:forwards;
}
@keyframes message_move{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(400px,0);
	}
}
#suntory_contents .main_visual .btn_message a {
	width: 400px;
	height: 100px;
	background: #004aa9;
	background: url(../img/svg/text_message.svg) no-repeat 115px 25px,url(../img/svg/arrow_right.svg) no-repeat right 15px center, linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	background-size: auto 26px,18px auto, auto auto;
	display: flex;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	padding: 60px 0 0 160px;
	opacity: 0;
}
#suntory_contents .main_visual .btn_message a:hover {
	background: url(../img/svg/text_message.svg) no-repeat 115px 25px,url(../img/svg/arrow_right.svg) no-repeat right 15px center, linear-gradient(to right,  #21C3EE 0%,#21C3EE 100%);
	background-size: auto 26px,18px auto, auto auto;
}
#suntory_contents .main_visual .btn_message.active a {
	animation:message_view 1s ease 1s;
	animation-fill-mode:forwards;
}
@keyframes message_view{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#suntory_contents .main_visual .img_00 {
	width: 684px;
	height: 640px;
	background: url(../img/mv2506.webp) no-repeat 0 0;
	background-size: auto 640px;
	position: absolute;
	top: 0;
	left:588px;
	opacity: 0;
}
/*.no-webp #suntory_contents .main_visual .img_00 {
	background: url(../img/mv.png) no-repeat 0 0;
	background-size: auto 640px;
	opacity: 0;
	transform: translate(0,40px);
	transition: all 1s;
}*/
#suntory_contents .main_visual .img_00.active {
	animation:2s ease img00_move;
	animation-fill-mode:forwards;
}
@keyframes img00_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}

/*------------------------------------------------------------
[PC] section
------------------------------------------------------------ */
#suntory_contents .section_group {
	position: relative;
	width: 1160px;
	margin: 0 auto 40px;
	padding-bottom: 180px;
	border-left: 1px #6692CB solid;
	border-bottom: 1px #6692CB solid;
}
#suntory_contents .section_group .group_title {
	margin: 0 30px 87px;
	font-size: 45px;
	opacity: 0;
}
#suntory_contents .section_group .group_title.active {
	animation:group_title_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes group_title_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}

#suntory_contents .section {
	padding:0;
	width: auto;
	position: relative;
}
#suntory_contents #section01 {
	margin-bottom: 220px;
}
#suntory_contents #section02 {
	margin-bottom: 240px;
}

#suntory_contents #section01::before {
	content: '';
	width: 863px;
	height: 342px;
	background: #F5F5F5;
	position: absolute;
	top: 80px;
	left: 0;
	z-index: -1;
}
#suntory_contents #section01::after {
	content: '';
	width: 100vw;
	height: 342px;
	background: #F5F5F5;
	position: absolute;
	top: 80px;
	left: -100vw;
	z-index: -1;
}

#suntory_contents #section02::before {
	content: '';
	width: 820px;
	height: 724px;
	background: #F5F5F5;
	position: absolute;
	top: -40px;
	left: 382px;
	z-index: -1;
}
#suntory_contents #section03::before {
	content: '';
	width: 1088px;
	height: 360px;
	background: #F5F5F5;
	position: absolute;
	top: 80px;
	left: 72px;
	z-index: -1;
}
#suntory_contents #section03::after {
	content: '';
	width: 100vw;
	height: 360px;
	background: #F5F5F5;
	position: absolute;
	top: 80px;
	left: 1088px;
	z-index: -1;
}

#suntory_contents .section h2 {
	font-size:40px;
	font-weight: normal;
	line-height: 1.25;
	height: 100px;
	display: flex;
	align-items: center;
	margin-bottom: 50px;
	margin: 0 0 50px 32px;
	opacity: 0;
}
#suntory_contents .section h2.active {
	animation:section_title_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes section_title_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .section#section02 h2 {
	margin:0 0 50px 174px;
}
#suntory_contents .section#section03 h2 {
	margin:0 0 40px 472px;
}
#suntory_contents .section#section01 h2 span {
	margin-right: 30px;
	width: 119px;
	height: 100px;
	text-indent:-99999px;
	background: url(../img/svg/number01.svg) no-repeat 0 center;
	background-size:auto 100px;
	display: inline-block;
}
#suntory_contents .section#section02 h2 span {
	margin-right: 30px;
	width: 140px;
	height: 100px;
	text-indent:-99999px;
	background: url(../img/svg/number02.svg) no-repeat 0 center;
	background-size:auto 100px;
	display: inline-block;
}
#suntory_contents .section#section03 h2 span {
	margin-right: 30px;
	width: 141px;
	height: 100px;
	text-indent:-99999px;
	background: url(../img/svg/number03.svg) no-repeat 0 center;
	background-size:auto 100px;
	display: inline-block;
}
#suntory_contents .section .lead {
	margin: 0 0 80px 72px;
	width: 540px;;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: -.05em;
	opacity: 0;
}
#suntory_contents .section .lead.active {
	animation:lead_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes lead_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}

#suntory_contents .section#section02 .lead {
	margin: 0 0 35px 522px;
	width: 360px;
}
#suntory_contents .section#section03 .lead {
	margin: 0 0 80px 514px;
	width: 470px;
}
#suntory_contents .btn_container {
	margin: 0 0 0 72px;
	padding: 0;
	width: auto;
	list-style: none;
	display: flex;
	opacity: 0;
}
#suntory_contents .btn_container.active {
	animation:btn_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes btn_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
#suntory_contents .section#section03 .btn_container {
	margin: 0 0 0 120px;
}
#suntory_contents .btn_container li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 50px;
	background: #00B1DD url(../img/svg/arrow_right.svg) no-repeat right 12px center;
	background-size:12px auto;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	padding-right: 12px;
	 transition: 0.2s;
}
#suntory_contents .btn_container li a:hover {
	background: #21C3EE url(../img/svg/arrow_right.svg) no-repeat right 12px center;
	background-size:12px auto;
}


#suntory_contents .section#section03 .btn_container li a {
	width: 230px;
	transition: 0.2s;
}
#suntory_contents .btn_container li + li {
	margin: 0 0 0 40px;
}

#suntory_contents .btn_more a {
	margin: 0;
	width: 180px;
	height: 50px;
	background: url(../img/svg/text_viewmore.svg) no-repeat 30px center,
	url(../img/svg/arrow_right.svg) no-repeat right 12px center #00B1DD;
	background-size:107px auto,12px auto;
	position: absolute;
	top: 150px;
	left: 910px;
	opacity: 0;
}
#suntory_contents .btn_more.active a {
	animation:btn_move .5s ease .5s;
	animation-fill-mode:forwards;
}

#suntory_contents .btn_more a:hover {
	background: url(../img/svg/text_viewmore.svg) no-repeat 30px center,
	url(../img/svg/arrow_right.svg) no-repeat right 12px center #21C3EE;
	background-size:107px auto,12px auto;
}

#suntory_contents .img_wrap01 {
	margin: 0;
	width: 300px;
	position: absolute;
	top: 0;
	left: 736px;
}
#suntory_contents .img_wrap01::after {
	content: '';
	width: 300px;
	height: 2px;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 226px;
	left: 20px;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active::after {
	animation:img_bar_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes img_bar_move {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#suntory_contents .section .img_cover01 {
	width: 300px;
	height: 214px;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover01::before {
	content: '';
	width: 0;
	height: 214px;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap01.active .img_cover01::before {
	animation:img_move .5s ease;
	animation-fill-mode:forwards;
}
@keyframes img_move{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(300px,0);
	}
}
#suntory_contents .section .img_01_01 {
	width: 300px;
	height: 214px;
	overflow: hidden;
	background: url(../img/ph_top_01.webp) no-repeat 0 0;
	background-size:300px auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active .img_01_01 {
	animation:img_view 1s ease;
	animation-fill-mode:forwards;
}
@keyframes img_view {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.no-webp #suntory_contents .section .img_01_01 {
	background: url(../img/ph_top_01.jpg) no-repeat 0 0;
	background-size:300px auto;
}

#suntory_contents .section .img_01_02 {
	width: 80px;
	height: 247px;
	background: url(../img/ph_top_01bottle.webp) no-repeat 0 0;
	background-size:80px auto;
	position: absolute;
	top: 99px;
	left: 285px;
	z-index: 10;
	opacity: 0;
}
#suntory_contents .section .img_wrap01.active .img_01_02 {
	animation:img_view2 1s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes img_view2 {
	0%{
		opacity: 0;
		transform: translate(-40px,0);
	}
	100%{
		opacity: 1;
		transform: translate(0,0);
	}
}
.no-webp #suntory_contents .section .img_01_02 {
	background: url(../img/ph_top_01bottle.png) no-repeat 0 0;
	background-size:80px auto;
}
/*★*/
#suntory_contents .section .img_02_01 {
	margin: 0 0 0 522px;
	width: 600px;
	height: 355px;
	background: url(../img/img_02.webp) no-repeat center 0;
	background-size:540px auto;
	text-indent: -99999px;
	opacity: 0;
}
#suntory_contents .img_02_01.active {
	animation:fig_move .5s ease .5s;
	animation-fill-mode:forwards;
}
@keyframes fig_move{
	0%{
		transform: translate(0, 40px);
		opacity: 0;
	}
	100%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
.no-webp #suntory_contents .section .img_02_01 {
	background: url(../img/img_02.png) no-repeat 0 0;
	background-size:600px auto;
}
#suntory_contents .img_wrap02 {
	margin: 0;
	width: 390px;
	position: absolute;
	top: 276px;
	left: 82px;
}

#suntory_contents .section .img_cover02 {
	width: 390px;
	height: 214px;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover02::before {
	content: '';
	width: 0;
	height: 214px;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap02.active .img_cover02::before {
	animation:img_move2 .5s ease;
	animation-fill-mode:forwards;
}
@keyframes img_move2{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(390px,0);
	}
}

#suntory_contents .img_wrap02::after {
	content: '';
	width: 390px;
	height: 2px;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 232px;
	bottom: 10px;
	left: 20px;
	opacity: 0;
}
#suntory_contents .section .img_wrap02.active::after {
	animation:img_bar_move .5s ease .5s;
	animation-fill-mode:forwards;
}
#suntory_contents .section .img_02_02 {
	width: 390px;
	height: 220px;
	overflow: hidden;
	background: url(../img/ph_top_02.webp) no-repeat 0 0;
	background-size:390px auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap02.active .img_02_02 {
	animation:img_view 1s ease;
	animation-fill-mode:forwards;
}
.no-webp #suntory_contents .section .img_02_02 {
	background: url(../img/ph_top_02.jpg) no-repeat 0 0;
	background-size:390px auto;
}
#suntory_contents .img_wrap03 {
	margin: 0;
	width: 240px;
	position: absolute;
	top: -60px;
	left: 154px;
}
#suntory_contents .img_wrap03::after {
	content: '';
	width: 240px;
	height: 2px;
	background: #004aa9;
	background: linear-gradient(to right,  #004aa9 0%,#1fcfff 100%);
	position: absolute;
	top: 262px;
	left: 20px;
	opacity: 0;
}
#suntory_contents .section .img_wrap03.active::after {
	animation:img_bar_move .5s ease .5s;
	animation-fill-mode:forwards;
}
#suntory_contents .section .img_03_01 {
	width: 240px;
	height: 250px;
	background: url(../img/ph_top_03.webp) no-repeat 0 0;
	background-size:240px auto;
	opacity: 0;
}
#suntory_contents .section .img_wrap03.active .img_03_01 {
	animation:img_view 1s ease;
	animation-fill-mode:forwards;
}
#suntory_contents .section .img_cover03 {
	width: 240px;
	height: 250px;
	position: relative;
	overflow: hidden;
}
#suntory_contents .section .img_cover03::before {
	content: '';
	width: 0;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
	background: #21C3EE;
	z-index: 10;
}
#suntory_contents .section .img_wrap03.active .img_cover03::before {
	animation:img_move3 .5s ease;
	animation-fill-mode:forwards;
}
@keyframes img_move3{
	0%{
		width: 0;
	}
	50%{
		width: 100%;
		transform: translate(0,0);
	}
	100%{
		width: 100%;
		transform: translate(240px,0);
	}
}

.no-webp #suntory_contents .section .img_03_01 {
	background: url(../img/ph_top_03.jpg) no-repeat 0 0;
	background-size:240px auto;
}

.btn_promotion a {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 270px;
	height: 70px;
	background: #004AA9 url(../img/svg/arrow_right.svg) no-repeat right 12px center;
	background-size:12px auto;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	padding-right: 12px;
}
.btn_promotion a:hover {
	background: #0E7AC4 url(../img/svg/arrow_right.svg) no-repeat right 12px center;
	background-size:12px auto;
}




}