@charset "utf-8";

/*------------------------------------------------------------
company/research COMMON
------------------------------------------------------------ */
#suntory_contents {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	color: #000;
}

#suntory_contents * {
	box-sizing: border-box;
}

#suntory_contents .logo {
	color: #006999;
	font-weight: bold;
	line-height: 1.2;
}

#suntory_contents .logo a {
	color: #006999;
	text-decoration: none;
}

#suntory_contents .mainbody figure {
	text-align: center;
}

#suntory_contents .mainbody figure img {
/*	width: auto;*/
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

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

	/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
	#suntory_contents {
		/* background: url(/company/research/assets/img/bg_under_sp.jpg)no-repeat center top / 100%; */
	}

	#suntory_contents .sp_item {
		display: block;
	}

	#suntory_contents .pc_item {
		display: none;
	}

	#suntory_contents .container {
		display: block;
		width: 100%;
		margin: 0;
		padding: 4.8vw 4vw 12vw;
	}

	/*------------------------------------------------------------
[SP] aside 
------------------------------------------------------------ */
	#suntory_contents .container aside {
		position: relative;
		padding: 3.2vw 0 0;
	}

	#suntory_contents .container aside .logo {
		font-size: 5.866666667vw;
	}

	/*------------------------------------------------------------
[SP] aside (modal menu)
------------------------------------------------------------ */
	#suntory_contents .container .btn_hamburger {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		width: 12vw;
		height: 12vw;
		padding: 3.2vw 2.4vw;
		background: #006399;
		border-radius: 1.6vw;
		z-index: 20;
	}

	#suntory_contents .container .btn_hamburger.fixed {
		position: fixed;
		right: 4vw;
		top: 4.8vw;
	}

	#suntory_contents .container .btn_hamburger span {
		display: block;
		width: 7.2vw;
		height: 1px;
		background: #fff;
	}

	#suntory_contents .container .btn_hamburger .second,
	#suntory_contents .container .btn_hamburger .third {
		margin: 2.4vw 0 0;
	}

	body.bodyfixed {
		overflow: hidden;
	}

	#suntory_contents .container aside #modal_menu {
		display: block;
		z-index: 10000;
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow-y: scroll;
		background: #F0F5F7;
		opacity: 0;
		visibility: hidden;
		transition: 0.3s;
	}

	#suntory_contents .container aside #modal_menu.active {
		opacity: 1;
		visibility: visible;
	}

	#suntory_contents .container aside #modal_menu .inner {
		padding: 8vw 6.4vw;
		position: relative;
	}

	#modal_menu .modal-close {
		display: block;
		position: absolute;
		right: 4vw;
		top: 7.2vw;
		cursor: pointer;
		width: 6.4vw;
		height: 6.4vw;
		background: url(/company/research/assets/img/close.svg) no-repeat center center / contain;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		font-size: 0;
	}

	#suntory_contents .container aside #modal_menu .logo {
		margin: 0 0 0 -2.4vw;
	}

	/* aside #modal_menu nav_primary
------------------------------------------------------------ */
	#suntory_contents aside #modal_menu .nav_primary {
		border-bottom: 1px solid #90BBD1;
		padding: 0 0 1.6vw;
		margin: 5.6vw 0 0;
	}

	#suntory_contents aside #modal_menu .nav_primary ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	#suntory_contents aside #modal_menu .nav_primary li+li {
		margin: 0 0 0 9.6vw;
	}

	#suntory_contents aside #modal_menu .nav_primary li a {
		display: block;
		position: relative;
		padding: 0 0 0 4vw;
		font-size: 4.8vw;
		line-height: 11.2vw;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents aside #modal_menu .nav_primary li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 1.6vw;
		height: 11.2vw;
		top: 0;
		left: 0;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 1.6vw;
	}

	/* aside #modal_menu nav_general
------------------------------------------------------------ */
	#suntory_contents aside #modal_menu .nav_general {
		display: block;
		margin: 4.8vw 0 0;
	}

	#suntory_contents aside #modal_menu .nav_general dl+dl {
		border-top: 1px solid #90BBD1;
		margin-top: 1.6vw;
		padding-top: 4.8vw;
	}

	#suntory_contents aside #modal_menu .nav_general dt {
		font-size: 4.266666667vw;
		line-height: 1;
		font-weight: bold;
		margin: 0 0 3.2vw;
	}

	#suntory_contents aside #modal_menu .nav_general dd li a {
		display: block;
		position: relative;
		padding: 2.666666667vw 0 2.666666667vw 3.6vw;
		font-size: 3.733333333vw;
		line-height: 1.5;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents aside #modal_menu .nav_general dd li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 1.6vw;
		height: 10.933333333333vw;
		top: 0;
		left: 0;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 1.6vw;
	}

	/*------------------------------------------------------------
[SP] footer
------------------------------------------------------------ */
	#suntory_contents .gototop a {
		display: block;
		width: 12vw;
		height: 12vw;
		border-radius: 6vw;
		background: rgba(0, 99, 153, .8) url(/company/research/assets/img/arrow_up_white.svg) no-repeat center center / 4.8vw;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		position: fixed;
		bottom: 12vw;
		right: 2.4vw;
		z-index: 10;
	}

	#suntory_contents footer {
		width: 100%;
		background: #F0F5F7;
		padding: 0;
	}

	#suntory_contents footer .inner {
		padding: 8vw 6.4vw;
		position: relative;
	}

	#suntory_contents footer .logo {
		margin: 0 0 0 -2.4vw;
		font-size: 5.066666667vw;
	}

	/* aside #modal_menu nav_primary
------------------------------------------------------------ */
	#suntory_contents footer .nav_primary {
		border-bottom: 1px solid #90BBD1;
		padding: 0 0 1.6vw;
		margin: 5.6vw 0 0;
	}

	#suntory_contents footer .nav_primary ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	#suntory_contents footer .nav_primary li+li {
		margin: 0 0 0 9.6vw;
	}

	#suntory_contents footer .nav_primary li a {
		display: block;
		position: relative;
		padding: 0 0 0 4vw;
		font-size: 4.8vw;
		line-height: 11.2vw;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents footer .nav_primary li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 1.6vw;
		height: 11.2vw;
		top: 0;
		left: 0;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 1.6vw;
	}

	/* footer nav_general
------------------------------------------------------------ */
	#suntory_contents footer .nav_general {
		display: block;
		margin: 4.8vw 0 0;
	}

	#suntory_contents footer .nav_general dl+dl {
		border-top: 1px solid #90BBD1;
		margin-top: 1.6vw;
		padding-top: 4.8vw;
	}

	#suntory_contents footer .nav_general dt {
		font-size: 4.266666667vw;
		line-height: 1;
		font-weight: bold;
		margin: 0 0 3.2vw;
	}

	#suntory_contents footer .nav_general dd li a {
		display: block;
		position: relative;
		padding: 2.666666667vw 0 2.666666667vw 3.6vw;
		font-size: 3.733333333vw;
		line-height: 1.5;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents footer .nav_general dd li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 1.6vw;
		height: 10.933333333333vw;
		top: 0;
		left: 0;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 1.6vw;
	}

	/*------------------------------------------------------------
[SP] article.mainbody
------------------------------------------------------------ */
	#suntory_contents .container article.mainbody {
		width: 100%;
		margin: 12vw 0 0;
	}

	#suntory_contents .container article.mainbody .inner {
		padding: 8vw 0 0;
	}


}

@media print,
screen and (min-width: 768px) {

	/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
	#suntory_contents {
		font-family: YuGothic, "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
		font-weight: 500;
		/* background: url(/company/research/assets/img/bg_under_pc.jpg)no-repeat center top / 1160px, url(/company/research/assets/img/bg_under_pc_repeat.png)repeat-x center top / 5px; */
	}

	#suntory_contents .sp_item {
		display: none;
	}

	#suntory_contents .pc_item {
		display: block;
	}

	#suntory_contents .container {
		width: 1000px;
		margin: 0 auto;
		padding: 40px 0 80px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	/*------------------------------------------------------------
[PC] aside
------------------------------------------------------------ */
	#suntory_contents .container aside {
		width: 260px;
	}

	#suntory_contents .container aside .logo {
		font-size: 26px;
		letter-spacing: 0.01em;
		font-feature-settings: "palt";
	}

	#suntory_contents aside #modal_menu .logo,
	#suntory_contents aside .modal-close,
	#suntory_contents .container .btn_hamburger {
		display: none;
	}

	/* aside nav_primary
------------------------------------------------------------ */
	#suntory_contents aside .nav_primary {
		width: 260px;
		margin: 15px 0 0;
		padding: 15px;
		background: rgba(0, 99, 153, 0.1);
	}

	#suntory_contents aside .nav_primary li {
		background: #5BC2DC;
	}

	#suntory_contents aside .nav_primary li+li {
		margin: 8px 0 0;
	}

	#suntory_contents aside .nav_primary li a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		width: 230px;
		height: 56px;
		padding: 0 0 0 25px;
		text-decoration: none;
		color: #000;
		font-size: 18px;
		line-height: 1;
		background: #fff no-repeat right top / auto 56px;
	}

	#suntory_contents aside .nav_primary li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 7px;
		height: 100%;
		top: 0;
		left: 10px;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 7px;
	}

	#suntory_contents aside .nav_primary .nav01 a {
		background-image: url(/company/research/assets/img/ph_flavour.jpg);
	}

	#suntory_contents aside .nav_primary .nav02 a {
		background-image: url(/company/research/assets/img/ph_health.jpg);
	}

	#suntory_contents aside .nav_primary .nav03 a {
		background-image: url(/company/research/assets/img/ph_water_eco.jpg);
	}

	#suntory_contents aside .nav_primary li a:hover {
		opacity: .75;
	}

	#suntory_contents #flavour aside .nav_primary .nav01 a,
	#suntory_contents #health aside .nav_primary .nav02 a,
	#suntory_contents #water_eco aside .nav_primary .nav03 a {
		background-color: #006399;
		color: #fff;
	}

	#suntory_contents #flavour aside .nav_primary .nav01 a::before,
	#suntory_contents #health aside .nav_primary .nav02 a::before,
	#suntory_contents #water_eco aside .nav_primary .nav03 a::before {
		background-image: url(/company/research/assets/img/triangle_right_wh.svg);
	}

	/* aside nav_general
------------------------------------------------------------ */
	#suntory_contents aside .nav_general {
		width: 260px;
		margin: 20px 0 0;
		padding: 15px;
		background: #F0F5F7;
	}

	#suntory_contents aside .nav_general dl+dl {
		border-top: 1px solid #90BBD1;
		margin-top: 15px;
		padding-top: 15px;
	}

	#suntory_contents aside .nav_general dt {
		font-size: 16px;
		line-height: 1;
		font-weight: bold;
		margin: 0 0 10px;
	}

	#suntory_contents aside .nav_general dd li a {
		display: block;
		position: relative;
		padding: 5px 5px 5px 18px;
		font-size: 15px;
		line-height: 1.4;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents aside .nav_general dd li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 7px;
		height: 31px;
		top: 0;
		left: 5px;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 7px;
	}

	#suntory_contents aside .nav_general dd li a:hover {
		text-decoration: underline;
	}

	#suntory_contents #msg01 aside .nav_general .nav_g01 a,
	#suntory_contents #msg02 aside .nav_general .nav_g02 a,
	#suntory_contents #msg03 aside .nav_general .nav_g03 a,
	#suntory_contents #outline aside .nav_general .nav_g04 a,
	#suntory_contents #system aside .nav_general .nav_g05 a,
	#suntory_contents #location aside .nav_general .nav_g06 a,
	#suntory_contents #history aside .nav_general .nav_g07 a,
	#suntory_contents #frontier aside .nav_general .nav_g08 a {
		background-color: #006399;
		color: #fff;
	}

	#suntory_contents #msg01 aside .nav_general .nav_g01 a::before,
	#suntory_contents #msg02 aside .nav_general .nav_g02 a::before,
	#suntory_contents #msg03 aside .nav_general .nav_g03 a::before,
	#suntory_contents #outline aside .nav_general .nav_g04 a::before,
	#suntory_contents #system aside .nav_general .nav_g05 a::before,
	#suntory_contents #location aside .nav_general .nav_g06 a::before,
	#suntory_contents #history aside .nav_general .nav_g07 a::before,
	#suntory_contents #frontier aside .nav_general .nav_g08 a::before {
		background-image: url(/company/research/assets/img/triangle_right_wh.svg);
	}

	/*------------------------------------------------------------
[PC] article.mainbody
------------------------------------------------------------ */
	#suntory_contents .container article.mainbody {
		width: 690px;
		margin: 0;
		background: #fff;
		border: 1px solid #ddd;
	}

	#suntory_contents .container article.mainbody .inner {
		padding: 40px;
	}

	/*------------------------------------------------------------
[PC] footer
------------------------------------------------------------ */
	#suntory_contents .gototop a {
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 30px;
		background: rgba(0, 99, 153, .8) url(/company/research/assets/img/arrow_up_white.svg) no-repeat center center / 20px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		position: fixed;
		bottom: 110px;
		right: 30px;
		z-index: 10;
	}

	#suntory_contents footer {
		width: 100%;
		background: #F0F5F7;
		padding: 30px 0 40px;
		border-bottom: 2px solid #fff;
	}

	#suntory_contents footer .inner {
		display: block;
		position: relative;
		width: 1000px;
		margin: 0 auto;
		padding: 0 0 0 270px;
	}

	#suntory_contents footer .logo {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 20px;
		letter-spacing: 0.01em;
		font-feature-settings: "palt";
	}

	/* footer nav_primary
------------------------------------------------------------ */
	#suntory_contents footer .nav_primary {
		border-bottom: 1px solid #90BBD1;
		padding: 4px 0 20px;
	}

	#suntory_contents footer .nav_primary ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	#suntory_contents footer .nav_primary li+li {
		margin: 0 0 0 50px;
	}

	#suntory_contents footer .nav_primary li a {
		display: block;
		position: relative;
		padding: 0 0 0 15px;
		font-size: 18px;
		line-height: 1;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents footer .nav_primary li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 7px;
		height: 100%;
		top: 0;
		left: 0;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 7px;
	}

	#suntory_contents footer .nav_primary li a:hover {
		text-decoration: underline;
	}


	/* footer nav_general
------------------------------------------------------------ */
	#suntory_contents footer .nav_general {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 25px 0 0;
	}

	#suntory_contents footer .nav_general dl+dl {
		margin: 0 0 0 90px;
	}

	#suntory_contents footer .nav_general dt {
		font-size: 16px;
		line-height: 1;
		font-weight: bold;
		margin: 0 0 20px;
	}

	#suntory_contents footer .nav_general dd li+li {
		margin: 13px 0 0;
	}

	#suntory_contents footer .nav_general dd li a {
		display: block;
		position: relative;
		padding: 0 0 0 18px;
		font-size: 14px;
		line-height: 1.5;
		text-decoration: none;
		color: #000;
	}

	#suntory_contents footer .nav_general dd li a::before {
		content: "";
		display: block;
		position: absolute;
		width: 7px;
		height: 21px;
		top: 0;
		left: 5px;
		background: url(/company/research/assets/img/triangle_right_blue.svg) no-repeat left center / 7px;
	}

	#suntory_contents footer .nav_general dd li a:hover {
		text-decoration: underline;
	}




}