@charset "utf-8";

#suntory_contents #static {
	order: 1;
	margin: 8vw 4vw
}

#suntory_contents .title_block {
	margin: 0;
	width: 92vw;
	padding: 5.6vw 4vw 4vw;
	background: #E8F9EC;
	border-radius: 2.4vw;
}

#suntory_contents .title_block .main_copy {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 0 2.4vw 0 0;
}

#suntory_contents .title_block .main_copy .icon_line {
	display: block;
	width: 12.8vw;
	height: 12.8vw;
	margin-right: 2.4vw;
	font-size: 0;
	color: #fff;
	background: url(/customer/common2023/img/line/icon_line.svg) no-repeat center center / 12.8vw;
}

#suntory_contents .title_block .main_copy h1 {
	font-size: 4.8vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
}

#suntory_contents .title_block p.lead {
	margin: 4vw 0 0;
	font-size: 3.733333333vw;
	line-height: 1.5;
	text-align: center;
}

#suntory_contents .title_block p.notice {
	margin: 4vw 0 0;
	font-size: 4.266666667vw;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
}

#suntory_contents .line_entory {
	width: 100%;
	margin: 6.4vw 0 0;
	padding: 5.6vw 0 4.8vw;
	background: #fff;
	border-radius: 2.4vw;
	position: relative;
}

#suntory_contents .line_entory .free {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 14.4vw;
	height: 14.4vw;
	left: 2.4vw;
	top: -3.2vw;
	background: url(/customer/common2023/img/line/img_free.svg) no-repeat left center / 14.4vw;
	color: #FFF;
	font-weight: bold;
	font-size: 4.8vw;
}

#suntory_contents .line_entory h2 {
	padding: 0 0 0 8vw;
	font-size: 4.8vw;
	line-height: 1;
	font-weight: bold;
	color: #007EA8;
	text-align: center;
}

#suntory_contents .line_entory .line_id {
	margin: 2.4vw 0 0;
	font-size: 4vw;
	line-height: 1;
	font-weight: bold;
	color: #007EA8;
	text-align: center;
}

#suntory_contents .line_entory .note {
font-size: 0;
}

#suntory_contents .line_entory .btn_add_friend a {
	/* margin: 4vw auto 0;
	display: block;
	width: 51.466666666666667vw;
	height: 16vw;
	background: url(/customer/common2023/img/line/line_add_friend.png) no-repeat center center;
	background-size: auto 16vw;
	text-indent: -99999px */
	margin: 4vw auto 0;
	padding-top: 16vw;
	width: 51.466666666666667vw;
	display: block;
	text-align: center;
	background: url(/customer/common2023/img/line/line_add_friend.png) no-repeat center 0;
	background-size: auto 16vw;
	text-decoration: none;
}
#suntory_contents .line_entory .btn_add_friend a .note_add_friend {
	margin: 2vw auto 0;
	font-size: 3.733333333333333vw;
	font-weight: 700;
	color: #000;
	text-align: center;
	display: inline-flex;
	background: url(/customer/common2023/img/i_ex_bk.svg) no-repeat right center;
    background-size: 3.2vw auto;
    padding-right: 4vw;
}


#suntory_contents .howto_block {
	margin: 8vw 0 0;
}

#suntory_contents .howto_block h2 {
	display: block;
	width: 100%;
	font-size: 4.266666667vw;
	font-weight: bold;
	line-height: 9.6vw;
	text-align: center;
	border: 2px solid #06C755;
	border-radius: 4.8vw;
}

#suntory_contents .howto_block figure {
	display: block;
	width: 84vw;
	margin: 5.6vw auto 0;
	position: relative;
}

#suntory_contents .howto_block figure img {
	width: 100%;
	height: auto;
}

#suntory_contents .howto_block figcaption {
	display: block;
	position: absolute;
	left: 28vw;
	top: 0;
	font-size: 3.733333333vw;
	line-height: 1.5;
	font-weight: bold;
}

#suntory_contents .recommend_block,
#suntory_contents .select_block {
	margin: 12vw 0 0;
}

#suntory_contents .select_block h3,
#suntory_contents .recommend_block h3 {
	display: block;
	width: 100%;
	font-size: 4vw;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

#suntory_contents .select_block ol {
	margin: 0 0 0 4vw;
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
}

#suntory_contents .select_block ol li {
	margin: 6.4vw auto 0;
	padding-left: 9.6vw;
	position: relative;
	color: #007EA8;
	font-weight: bold;
	font-size: 4vw;
	line-height: 8vw;
}
#suntory_contents .select_block ol li + li {
		margin: 4vw auto 0;
	}

#suntory_contents .select_block ol li::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 8vw;
	height: 8vw;
	counter-increment: item;
	content: counter(item)'';
	padding: 0;
	color: #fff;
		font-size: 4vw;
	text-align: center;
	line-height: 8vw;
	background: #007EA8;
	border-radius: 4vw;
}

#suntory_contents .recommend_block ul {
	list-style-type: none;
	padding-left: 0;
}
#suntory_contents .recommend_block li {
	display: flex;
justify-content: center;
align-items: center;
		width: 80.8vw;
	height: 16.8vw;
		width: 80.8vw;
	padding: 0 3.2vw 0.8vw 0;
	margin: 4vw auto 0;
background: url(/customer/common2023/img/line/img_baloon_sp.svg) no-repeat center center / 80.8vw;
font-size: 3.733333333vw;
line-height: 1.5;
text-align: center;
}



@media print,
screen and (min-width: 768px) {
	#suntory_contents .pc_item {
		display: block
	}

	#suntory_contents #static {
		order: 2;
		margin: 0 auto 80px;
		width: 960px
	}

	#suntory_contents .title_block {
		display: block;
		width: 960px;
		padding: 30px 10px 40px;
			border-radius: 10px;
	}

#suntory_contents .title_block .main_copy .icon_line {
	width: 80px;
	height: 80px;
	margin-right: 30px;
	background-size:  80px;
}
#suntory_contents .title_block .main_copy h1 {
	font-size: 32px;
}
#suntory_contents .title_block p.lead {
	margin: 40px 0 0;
	font-size: 16px;
}
#suntory_contents .title_block p.notice {
	margin: 20px 0 0;
	font-size: 18px;
}
#suntory_contents .line_entory {
	display: flex;
	flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
	width: 760px;
	height: 130px;
	margin: 40px auto 0;
	padding: 0 0 0 265px;
	border-radius: 10px;
	position: relative;
}
#suntory_contents .line_entory .free {
	width: 88px;
	height: 88px;
	left: 30px;
	top: -20px;
	background: url(/customer/common2023/img/line/img_free.svg) no-repeat left center / 88px;
	font-size: 28px;
}
#suntory_contents .line_entory .line_qr {
	display: block;
	position: absolute;
	width:100px;
	height:100px;
	left: 150px;
	top: 15px;
}
#suntory_contents .line_entory .line_qr img {
	width: 100%;
	height: auto;
	}

#suntory_contents .line_entory h2 {
	padding: 0;
	text-align: left;
	font-size: 26px;
}
#suntory_contents .line_entory .line_id {
	margin: 12px 0 0;
	text-align: left;
	font-size: 20px;
}
#suntory_contents .line_entory .line_id .note {
	display: inline-block;
	margin: 0 0 0 5px;
	font-size: 15px;
	font-weight: normal;
		color: #222;
}
	#suntory_contents .glossary .btn_add_friend {
		display: none
	}

#suntory_contents .howto_block {
	margin: 40px 0 0;
}

#suntory_contents .howto_block h2 {
	font-size: 18px;
	line-height: 40px;
	border-radius: 20px;
}

#suntory_contents .howto_block figure {
	display: block;
	width: 585px;
	margin: 30px auto 0;
	position: relative;
}

#suntory_contents .howto_block figure img {
	width: 100%;
	height: auto;
}

#suntory_contents .howto_block figcaption {
	display: block;
	position: absolute;
	top: 8px;
	left: 200px;
	font-size: 15px;
	line-height: 1;
}
#suntory_contents .recommend_block,
#suntory_contents .select_block {
	margin: 60px 0 0;
}

#suntory_contents .select_block h3,
#suntory_contents .recommend_block h3 {
	font-size: 16px;
}

#suntory_contents .select_block ol {
		margin: 20px  0 0;
		display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}

#suntory_contents .select_block ol li {
	width: auto;
	margin:0;
	padding-left: 38px;
	font-size: 16px;
	line-height: 30px;
}

#suntory_contents .select_block ol li::before {
	width: 30px;
	height: 30px;
		font-size: 16px;
	line-height: 30px;
	border-radius: 15px;
}
#suntory_contents .select_block ol li + li {
		margin: 0 0 0 50px;
	}

#suntory_contents .recommend_block ul {
	margin: 20px 0 0;
		display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#suntory_contents .recommend_block li {
	display: flex;
justify-content: center;
align-items: center;
		width: 268px;
	height: 78px;
	padding: 0 20px 3px 0;
	margin: 0;
	background-image: url(/customer/common2023/img/line/img_baloon_pc.svg);
	background-size: 268px;
font-size: 15px;
}
#suntory_contents .recommend_block li + li {
		margin: 0 0 0 15px;
	}



}