@charset "utf-8";

/*------------------------------------------------------------
font&setting
------------------------------------------------------------ */

#suntory_contents a {
	color: #222;
	text-decoration: none;
}

#suntory_contents section a {
	color: #0078aa;
	text-decoration: underline;
}

#suntory_contents .indent {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#suntory_contents .grid {
	display: flex;
}

#suntory_contents figure {
	vertical-align: bottom;
}

#suntory_contents img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

/*------------------------------------------------------------
COMMON parts
------------------------------------------------------------ */
#suntory_contents .pagetitle {
	width: 100%;
	background-color: #f0f0f0;
	background-repeat: no-repeat;
}

#suntory_contents .pagetitle .inner {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}

#suntory_contents .pagetitle .inner h2,
#suntory_contents .pagetitle .inner h2 a {
	color: #136fc5;
	font-weight: bold;
	text-decoration: none;
}

#suntory_contents .pagetitle .inner p {
	line-height: 1.7;
}

#suntory_contents p.gototop {
	display: none;
	z-index: 1000;
	position: fixed;
}

#suntory_contents p.gototop a {
	display: block;
	background: #27b3d6 url(/company/quality/assets/img/arrow_up_white.png) no-repeat center center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@media screen and (max-width:767px) {

	/*------------------------------------------------------------
[SP] font&setting
------------------------------------------------------------ */
	body #suntory_contents {
		font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
		font-weight: normal;
		text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		color: #222;
		line-height: 1;
		background: #fff;
	}

	#suntory_contents .pc {
		display: none;
	}

	#suntory_contents .sp {
		display: block;
	}

	/*------------------------------------------------------------
[SP] header#ql_header
------------------------------------------------------------ */
	#suntory_contents #ql_header {
		padding: 0;
		position: relative;
		border-top: 1px solid #c8cdd2;
	}

	#suntory_contents #ql_header .inner {
		padding: 5.6vw 4vw;
	}

	#suntory_contents #ql_header p {
		font-size: 3.733333333vw;
		font-weight: bold;
	}

	#suntory_contents #ql_header h1 {
		margin: 4vw 0 0 0;
		font-size: 6.4vw;
		text-align: center;
		font-weight: bold;
	}

	#suntory_contents #ql_header a {
		text-decoration: none;
		color: #222;
	}

	#suntory_contents #ql_header .btn_menu {
		width: 6.4vw;
		height: 4.8vw;
		position: absolute;
		top: 10.13333333vw;
		right: 4.8vw;
		border: none;
		background: #fff;
	}

	#suntory_contents #ql_header .btn_menu .line {
		position: absolute;
		display: block;
		background-color: #3486d4;
		width: 6.4vw;
		height: 1px;
		left: 0;
		transition: 0.3s;
	}

	#suntory_contents #ql_header .btn_menu .line:nth-of-type(1) {
		top: 0;
	}

	#suntory_contents #ql_header .btn_menu .line:nth-of-type(2) {
		top: 48%;
	}

	#suntory_contents #ql_header .btn_menu .line:nth-of-type(3) {
		bottom: 0;
	}

	#suntory_contents #ql_header .btn_menu.close .line:nth-of-type(1) {
		top: 45%;
		transform: rotate(45deg);
	}

	#suntory_contents #ql_header .btn_menu.close .line:nth-of-type(2) {
		opacity: 0;
	}

	#suntory_contents #ql_header .btn_menu.close .line:nth-of-type(3) {
		top: 45%;
		transform: rotate(-45deg);
		bottom: auto;
	}

	/*------------------------------------------------------------
[SP] nav#gnavi
------------------------------------------------------------ */
	nav#gnavi .inner {
		width: 100%;
		background: #3486d4;
		padding: 0 0 4vw;
	}

	nav#gnavi {
		width: 100%;
		background: #fff;
		opacity: 0;
		height: 0;
		pointer-events: none;
		transform: translateY(-4vw);
		transition: all 0.3s ease-in-out;
	}

	nav#gnavi.show {
		opacity: 1;
		height: auto;
		pointer-events: auto;
		transform: translateY(0);
	}

	#gnavi ul li {
		border-bottom: 1px solid #85b6e5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav#gnavi li a {
		display: block;
		height: 16vw;
		color: #fff;
		text-align: center;
		line-height: 16vw;
		font-size: 4vw;
		text-decoration: none;
	}

	#suntory_contents nav#gnavi .inner li a span.win {
		background: url(/company/quality/assets/img/icon_external_wh.png) no-repeat;
		background-position: right center;
		background-size: 3.466666666667vw;
		padding-right: 4.8vw;
	}

	#suntory_contents nav#gnavi .inner .btn_close {
		text-align: center;
		display: block;
		margin: 4vw auto 0;
		padding: 0 5.6vw 0 9.6vw;
		font-size: 3.733333333vw;
		line-height: 9.6vw;
		color: #3486d4;
		border-radius: 4.8vw;
		border: none;
		background: #fff url(/company/quality/assets/img/icon_close.png) no-repeat left 4vw center;
		background-size: 3.2vw;
	}

	/*------------------------------------------------------------
[SP] pagetitle
------------------------------------------------------------ */
	#suntory_contents .pagetitle {
		background-position: right -2.4vw top;
		background-size: auto 48vw;
	}

	#suntory_contents #quality_policy .pagetitle {
		background-image: url(/company/quality/policy/img/ph_head_policy.jpg);
	}

	#suntory_contents #quality_important .pagetitle {
		background-image: url(/company/quality/important/img/ph_head_important.jpg);
	}

	#suntory_contents #important_lower .pagetitle {
		background-image: url(/company/quality/important/img/ph_head_important.jpg);
		background-position: right -7.2vw top;
		background-size: auto 21.6vw;
	}

	#suntory_contents #quality_activity .pagetitle {
		background-image: url(/company/quality/activity/img/ph_head_activity.jpg);
	}

	#suntory_contents #activity_lower .pagetitle {
		background-image: url(/company/quality/activity/img/ph_head_activity.jpg);
		background-position: right -7.2vw top;
		background-size: auto 21.6vw;
	}

	#suntory_contents #quality_ingredient .pagetitle,
	#suntory_contents #quality_words .pagetitle,
	#suntory_contents #quality_sitemap .pagetitle,
	#suntory_contents #quality_news .pagetitle {
		background-image: url(/company/quality/assets/img/ph_head_other.jpg);
		background-position: right -7.2vw top;
		background-size: auto 21.6vw;
	}

	#suntory_contents .pagetitle .inner {
		padding: 56vw 4vw 8vw;
	}

	#suntory_contents .pagetitle .inner h2 {
		width: 100%;
		font-size: 5.333333333vw;
		text-align: center;
	}

	#suntory_contents .pagetitle .inner p {
		width: 100%;
		font-size: 3.733333333vw;
		margin-top: 4.8vw;
	}

	#suntory_contents #activity_lower .pagetitle .inner,
	#suntory_contents #important_lower .pagetitle .inner,
	#suntory_contents #quality_ingredient .pagetitle .inner,
	#suntory_contents #quality_words .pagetitle .inner,
	#suntory_contents #quality_sitemap .pagetitle .inner,
	#suntory_contents #quality_news .pagetitle .inner {
		padding: 0 4.8vw;
		height: 21.6vw;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	#suntory_contents #activity_lower .pagetitle .inner h2,
	#suntory_contents #important_lower .pagetitle .inner h2,
	#suntory_contents #quality_ingredient .pagetitle .inner h2,
	#suntory_contents #quality_words .pagetitle .inner h2,
	#suntory_contents #quality_sitemap .pagetitle .inner h2,
	#suntory_contents #quality_news .pagetitle .inner h2 {
		text-align: left;
	}

	/*------------------------------------------------------------
[SP] article & section common
------------------------------------------------------------ */
	#suntory_contents article {
		width: 100%;
		padding: 0 0 12vw;
	}

	#suntory_contents article section,
	#suntory_contents article .seclevel {
		margin: 6.4vw 4vw 0;
		padding-top: 4vw;
	}

	#suntory_contents section h3.h3subtl {
		margin-bottom: 5.6vw;
		color: #136fc5;
		font-size: 5.333333333vw;
		line-height: 1.5;
		font-weight: bold;
		text-align: center;
	}

	#suntory_contents section p {
		font-size: 3.733333333vw;
		line-height: 1.7;
	}

	#suntory_contents section sup {
		font-size: 2.4vw;
		vertical-align: super;
		color: #222;
		margin: 0 0.4vw;
	}

	/*------------------------------------------------------------
[SP] aside questionnaire
------------------------------------------------------------ */
	#suntory_contents aside#questionnaire {
		padding: 0 4vw;
	}

	#suntory_contents aside#questionnaire .inner {
		padding: 8vw 0 12vw;
		border-top: 1px solid #ddd;
	}



	#suntory_contents #questionnaire p {
		margin-bottom: 5.6vw;
		text-align: center;
		line-height: 1.5;
		font-size: 4vw;
	}

	#suntory_contents #questionnaire .bt_questionnaire {
		width: 66.4vw;
		margin: 0 auto;
		height: 12.8vw;
	}

	#suntory_contents #questionnaire .bt_questionnaire a {
		display: block;
		width: 100%;
		font-size: 4.266666667vw;
		color: #FFF;
		line-height: 12.8vw;
		;
		text-align: center;
		background: #27b3d6;
		border-radius: 6.4vw;
		text-decoration: none;
	}

	/*------------------------------------------------------------
[SP] footer#quality_footer
------------------------------------------------------------ */
	#suntory_contents #quality_footer {
		background: #e5eef6;
	}

	#suntory_contents #quality_footer .inner {
		padding: 9.6vw 8vw 8vw;
	}

	#suntory_contents #quality_footer h5 {
		margin: 0 0 5.6vw;
		font-size: 4.266666667vw;
		font-weight: bold;
	}

	#suntory_contents #quality_footer ul {
		padding-left: 4vw;
	}

	#suntory_contents #quality_footer li {
		margin-top: 1.6vw;
	}

	#suntory_contents #quality_footer li a {
		font-size: 3.466666667vw;
		line-height: 9.6vw;
		display: block;
	}

	#suntory_contents p.gototop {
		bottom: 12vw;
		right: 2.4vw;
	}

	#suntory_contents p.gototop a {
		width: 12vw;
		height: 12vw;
		background-size: 4vw;
		border-radius: 6vw;
	}

	/*------------------------------------------------------------
[SP] page common
------------------------------------------------------------ */
	#suntory_contents figure figcaption {
		margin-top: 1.6vw;
		text-align: center;
		font-size: 3.2vw;
		line-height: 1.5;
	}

	#suntory_contents figure figcaption.left {
		text-align: left;
	}

	/*角丸ボタン小common bt_rounded*/
	#suntory_contents section .bt_rounded li {
		display: inline-block;
	}

	#suntory_contents section .bt_rounded li a {
		display: block;
		height: 9.6vw;
		border-radius: 4.8vw;
		font-size: 3.466666667vw;
		line-height: 9.6vw;
		color: #222;
		text-decoration: none;
		padding: 0 5.6vw 0 4vw;
		background: url(/company/quality/assets/img/arrow_r_blue.png) no-repeat right 2.4vw center;
		background-size: 1.866666667vw;
		background-color: #E5EEF6;
	}

}

/*---end max-width:767px --- */
@media print,
screen and (min-width: 768px) {

	/*------------------------------------------------------------
[PC] font&setting
------------------------------------------------------------ */
	body #suntory_contents {
		font-family: YuGothic, "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
		font-weight: 500;
		min-width: 960px;
		font-feature-settings: "palt";
		letter-spacing: 0.05em;
		color: #222;
		line-height: 1;
		background: #fff;
		border-bottom: 4px solid #fff;
	}

	#suntory_contents .pc {
		display: block;
	}

	#suntory_contents .sp {
		display: none;
	}

	#suntory_contents #ql_header .inner,
	#suntory_contents #gnavi .inner,
	#suntory_contents .pagetitle .inner,
	#suntory_contents #quality_footer .inner {
		width: 1160px;
		margin: 0 auto;
	}


	/*------------------------------------------------------------
[PC] header#ql_header
------------------------------------------------------------ */
	#suntory_contents #ql_header {
		padding: 25px 0 40px;
	}

	#suntory_contents #ql_header p {
		font-size: 18px;
		font-weight: bold;
	}

	#suntory_contents #ql_header h1 {
		margin: 6px 0 0 0;
		font-size: 36px;
		text-align: center;
		font-weight: bold;
	}

	#suntory_contents #ql_header a {
		text-decoration: none;
		color: #222;
	}

	#suntory_contents #ql_header .btn_menu,
	#suntory_contents #gnavi .btn_close {
		display: none;
	}

	/*------------------------------------------------------------
[PC] nav#gnavi
------------------------------------------------------------ */
	nav#gnavi {
		display: block;
		width: 100%;
		height: 70px;
		padding: 4px 5px;
		background: #3486d4;
	}

	nav#gnavi .inner ul {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		background: url(/company/quality/assets/img/bg_nav_side.png) no-repeat right center;
		background-size: 1px;
	}

	nav#gnavi .inner li {
		width: 25%;
		padding: 0 3px 0 4px;
		background: url(/company/quality/assets/img/bg_nav_side.png) no-repeat left center;
		background-size: 1px;
	}

	nav#gnavi .inner li a {
		display: block;
		height: 62px;
		color: #fff;
		text-align: center;
		line-height: 62px;
		text-decoration: none;
	}

	#suntory_contents nav#gnavi .inner li a span.win {
		background: url(/company/quality/assets/img/icon_external_wh.png) no-repeat;
		background-position: right center;
		background-size: 13px;
		padding-right: 18px;
	}

	#quality_policy nav#gnavi .inner li.nav_policy a,
	#quality_activity nav#gnavi .inner li.nav_activity a,
	#activity_lower nav#gnavi .inner li.nav_activity a,
	#quality_important nav#gnavi .inner li.nav_important a,
	#important_lower nav#gnavi .inner li.nav_important a,
	nav#gnavi .inner li a:hover {
		background: #5d9edd;
	}


	/*------------------------------------------------------------
[PC] pagetitle
------------------------------------------------------------ */
	#suntory_contents .pagetitle {
		background-position: center top;
		background-size: 1310px;
	}

	#suntory_contents #quality_policy .pagetitle {
		background-image: url(/company/quality/policy/img/ph_head_policy.jpg);
	}

	#suntory_contents #quality_important .pagetitle {
		background-image: url(/company/quality/important/img/ph_head_important.jpg);
	}

	#suntory_contents #important_lower .pagetitle {
		background-image: url(/company/quality/important/img/ph_head_important.jpg);
		background-size: 786px;
		background-position: calc(50% + 232px) top;
	}

	#suntory_contents #quality_activity .pagetitle {
		background-image: url(/company/quality/activity/img/ph_head_activity.jpg);
	}

	#suntory_contents #activity_lower .pagetitle {
		background-image: url(/company/quality/activity/img/ph_head_activity.jpg);
		background-size: 786px;
		background-position: calc(50% + 232px) top;
	}

	#suntory_contents #quality_ingredient .pagetitle,
	#suntory_contents #quality_words .pagetitle,
	#suntory_contents #quality_sitemap .pagetitle,
	#suntory_contents #quality_news .pagetitle {
		background-image: url(/company/quality/assets/img/ph_head_other.jpg);
		background-size: 786px;
		background-position: calc(50% + 232px) top;
	}

	#suntory_contents .pagetitle .inner {
		height: 300px;
		padding-left: 30px;
	}

	#suntory_contents #activity_lower .pagetitle .inner,
	#suntory_contents #important_lower .pagetitle .inner,
	#suntory_contents #quality_ingredient .pagetitle .inner,
	#suntory_contents #quality_words .pagetitle .inner,
	#suntory_contents #quality_sitemap .pagetitle .inner,
	#suntory_contents #quality_news .pagetitle .inner {
		height: 180px;
	}

	#suntory_contents .pagetitle .inner h2 {
		margin-bottom: 23px;
		font-size: 34px;
	}

	#suntory_contents .pagetitle .inner h2 a {
		color: #136fc5;
		font-weight: bold;
		text-decoration: none;
	}

	#suntory_contents .pagetitle .inner h2 a:hover {
		opacity: 0.85;
	}

	#suntory_contents #activity_lower .pagetitle .inner h2,
	#suntory_contents #important_lower .pagetitle .inner h2,
	#suntory_contents #quality_ingredient .pagetitle .inner h2,
	#suntory_contents #quality_words .pagetitle .inner h2,
	#suntory_contents #quality_sitemap .pagetitle .inner h2,
	#suntory_contents #quality_news .pagetitle .inner h2 {
		margin-bottom: 0;
	}

	#suntory_contents .pagetitle .inner p {
		width: 52%;
		min-width: 480px;
	}
	#suntory_contents #quality_policy .inner p {
				width: 50.5%;
	}

	/*------------------------------------------------------------
[PC] article & section common
------------------------------------------------------------ */
	#suntory_contents article {
		width: 100%;
		padding: 0 0 100px 0;
		margin: 0 auto;
	}

	#suntory_contents article section,
	#suntory_contents .seclevel {
		width: 900px;
		margin: 50px auto 0;
		padding-top: 30px;
	}

	#suntory_contents section h3.h3subtl {
		margin-bottom: 40px;
		color: #136fc5;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}

	#suntory_contents section p {
		font-size: 15px;
		line-height: 1.7;
	}

	#suntory_contents section sup {
		font-size: 10px;
		vertical-align: super;
		color: #222;
		margin: 0 2px;
	}

	#suntory_contents a:hover {
		opacity: 0.7;
	}

	#suntory_contents a.win {
		background: url(/company/quality/assets/img/icon_external.png) no-repeat;
		background-position: right center;
		background-size: 13px;
		padding-right: 18px;
	}

	#suntory_contents a span.win {
		background: url(/company/quality/assets/img/icon_external.png) no-repeat;
		background-position: right center;
		background-size: 13px;
		padding-right: 18px;
	}


	/*------------------------------------------------------------
[PC] aside questionnaire
------------------------------------------------------------ */
	#suntory_contents #questionnaire .inner {
		border-top: 1px solid #ddd;
		padding: 50px 0;
		margin: 0 auto;
		width: 960px;
	}

	#suntory_contents #questionnaire p {
		text-align: center;
		margin-bottom: 30px;
	}

	#suntory_contents #questionnaire .bt_questionnaire {
		width: 250px;
		margin: 0 auto;
		height: 50px;
	}

	#suntory_contents #questionnaire .bt_questionnaire a {
		display: block;
		width: 100%;
		font-size: 18px;
		color: #FFF;
		line-height: 50px;
		text-align: center;
		background: #27b3d6;
		border-radius: 25px;
		text-decoration: none;
	}

	/*------------------------------------------------------------
[PC] footer#quality_footer
------------------------------------------------------------ */
	#suntory_contents p.gototop {
		display: none;
		z-index: 1000;
		position: fixed;
		bottom: 4em;
		right: 1em;
	}

	#suntory_contents p.gototop a {
		display: block;
		background-color: #27b3d6;
		background-image: url(/company/quality/assets/img/arrow_up_white.png);
		background-position: center center;
		background-repeat: no-repeat;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#suntory_contents #quality_footer {
		width: 100%;
		background: #e5eef6;
		padding: 50px 5px;
	}

	#suntory_contents #quality_footer .inner {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#suntory_contents #quality_footer h5 {
		width: 100%;
		margin: 0 0 30px;
		font-size: 18px;
		font-weight: bold;
	}

	#suntory_contents #quality_footer ul {
		width: 25%;
	}

	#suntory_contents #quality_footer ul:first-of-type {
		margin-left: 50px;
	}

	#suntory_contents #quality_footer ul:last-of-type {
		width: auto;
	}

	#suntory_contents #quality_footer li a {
		font-size: 14px;
	}

	#suntory_contents #quality_footer li+li {
		margin-top: 20px;
	}


	#suntory_contents p.gototop a {
		width: 70px;
		height: 70px;
		background-size: 25px;
		border-radius: 35px;
	}

	/*------------------------------------------------------------
[PC] page common
------------------------------------------------------------ */
	#suntory_contents figure figcaption {
		margin-top: 6px;
		text-align: center;
		font-size: 13px;
		line-height: 1.5;
	}

	#suntory_contents figure figcaption.left {
		text-align: left;
	}

	/*角丸ボタン小common bt_rounded*/
	#suntory_contents section .bt_rounded li {
		display: inline-block;
	}

	#suntory_contents section .bt_rounded li a {
		display: block;
		height: 32px;
		border-radius: 16px;
		font-size: 15px;
		line-height: 32px;
		color: #222;
		text-decoration: none;
		padding: 0 23px 0 15px;
		background: url(/company/quality/assets/img/arrow_r_blue.png) no-repeat right 10px center;
		background-size: 7px;
		background-color: #E5EEF6;
	}

	#suntory_contents section .bt_rounded li a:hover {
		opacity: 0.6;
	}


}

/*---end min-width:768px --- */
@media screen and (min-width: 768px) and (max-width: 1164px) {

	/*------------------------------------------------------------
[PC narrow] setting
------------------------------------------------------------ */
	#suntory_contents #ql_header .inner,
	#suntory_contents #gnavi .inner,
	#suntory_contents .pagetitle .inner,
	#suntory_contents #quality_footer .inner {
		min-width: 950px;
		width: 100%;
		margin: 0 auto;
	}

	#suntory_contents #activity_lower .pagetitle,
	#suntory_contents #important_lower .pagetitle,
	#suntory_contents #quality_ingredient .pagetitle,
	#suntory_contents #quality_words .pagetitle,
	#suntory_contents #quality_sitemap .pagetitle,
	#suntory_contents #quality_news .pagetitle {
		background-position: right -45px top;
	}

}

/*---end min-width: 980px --- */