/* ------------------------------------------------

#0. Base update

------------------------------------------------ */

body {

	min-width: 980px;

}

#sbf_waste {

	width:960px;

	margin:0 auto;

	line-height: 1;

	padding: 1em 10px;

}

body#ir #sbf_waste {

	padding: 1em 10px 0;

}

#sbf_waste ul {

	margin:0 auto 3px;

	text-align:left;

}

#sbf_waste li {

	display:inline;

	font-size: 0.688em;

	line-height: 1;

	color: #000;

}

#sbf_waste li a {

	color: #000;

	line-height: 1;

	text-decoration: none;

}

#sbf_waste li a:hover {

	text-decoration: underline;

}

#sbf_wrap {

	background: #B8E3F0;

}

#sbf_wrap_inr {

	background: #B8E3F0;

	padding-bottom: 3px;

}

#sbf_main_cnt {

	background: #B8E3F0;

	padding-top: 12px;

}

#sbf_symbol {

	padding-top: 0;

	background: none;

}

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

	body {

		background-color: #B8E3F0;

		min-width: 320px;

	}

	#sbf_waste {/* breadcrumb list area */

		display: none;

	}

	#sbf_wrap_inr {

		padding-bottom: 0;

	}

	#sbf_symbol {

		/*min-height: 0;*/

		/*padding-top: 0;*/

	}

	.btn_EN{

		display: none;

	}



}



/* ------------------------------------------------

#1. Header and Footer

------------------------------------------------ */

header.sbfinc #utility > ul > li, header.sbfinc #globalnavi > ul, header.sbfinc #spmenuswitch a span, #spmenu.sbfinc .menu a, #spmenu.sbfinc .utility li, #spmenu.sbfinc .siteutility li, #totop.sbfinc > div a, footer.sbfinc #siteutility li, footer.sbfinc p {

  font-family: 'suntory syntax', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;

}



html {

  overflow-y: scroll;

}



body {

  min-width: 980px !important;

  overflow: hidden;

}

.sp body {

  min-width: 0 !important;

}



header.sbfinc, #spmenu.sbfinc, #totop.sbfinc, footer.sbfinc {

  -webkit-text-size-adjust: 100%;

  -moz-text-size-adjust: 100%;

  -ms-text-size-adjust: 100%;

  -o-text-size-adjust: 100%;

  text-size-adjust: 100%;

  box-sizing: border-box;

}

header.sbfinc *, #spmenu.sbfinc *, #totop.sbfinc *, footer.sbfinc * {

  -webkit-text-size-adjust: 100%;

  -moz-text-size-adjust: 100%;

  -ms-text-size-adjust: 100%;

  -o-text-size-adjust: 100%;

  text-size-adjust: 100%;

  box-sizing: border-box;

}

header.sbfinc a, #spmenu.sbfinc a, #totop.sbfinc a, footer.sbfinc a {

  text-decoration: none;

}



header.sbfinc {

  position: relative;

  display: block;

  z-index: 100;

}

header.sbfinc > div {

  background: #5bc2dc;

}

header.sbfinc > div > div {

  position: relative;

  width: 100%;

  max-width: 1236px;

  margin: auto;

  padding: 0px 20px;

  height: 90px;

}

.sp header.sbfinc > div > div {

  padding: 0px 10px;

}

.sp header.sbfinc > div > div {

  height: 55px;

}

header.sbfinc #logo {

  position: absolute;

  left: 20px;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}

.sp header.sbfinc #logo {

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

header.sbfinc #logo h1 {

  margin: 0px;

  padding: 0px;

}

header.sbfinc #logo a {

  display: inline-block;

  -webkit-transition: opacity 0.2s, background 0.2s;

  transition: opacity 0.2s, background 0.2s;

  cursor: pointer;

  backface-visibility: hidden;

}

header.sbfinc #logo a:hover {

  opacity: 0.7;

}

header.sbfinc #logo .text {

  display: block;

  width: 162px;

  height: 36px;

  text-indent: -10000px;

  background: url(/softdrink/common/rwd/images/logonega.svg) no-repeat center center;

  background-size: 100% auto;

  overflow: hidden;

}

.sp header.sbfinc #logo .text {

  width: 120px;

  height: 26px;

}

header.sbfinc #utility {

  position: absolute;

  bottom: 55px;

  right: 20px;

}

.sp header.sbfinc #utility {

  bottom: 50%;

  right: auto;

  left: 10px;

  -webkit-transform: translateY(50%);

  transform: translateY(50%);

}

header.sbfinc #utility > ul {

  font-size: 0;

}

header.sbfinc #utility > ul > li {

  display: inline-block;

  font-size: 11px;

  line-height: 12.1px;

  letter-spacing: 1px;

  font-weight: 500;

}

header.sbfinc #utility > ul > li > a {

  position: relative;

  display: inline-block;

  margin-left: 26px;

  color: #ffffff;

  -webkit-transition: opacity 0.2s, background 0.2s;

  transition: opacity 0.2s, background 0.2s;

  cursor: pointer;

  overflow: visible;

}

header.sbfinc #utility > ul > li > a:hover {

  opacity: 0.7;

}

.sp header.sbfinc #utility > ul > li > a {

  margin-top: 26px;

  margin-left: 0px;

  font-weight: 700;

}

header.sbfinc #utility > ul > li > a:after {

  content: "";

  display: block;

  position: absolute;

  left: -26px;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}

.sp header.sbfinc #utility > ul > li > a:after {

  left: 50%;

  top: -23px;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

}

header.sbfinc #utility .language {

  position: relative;

}

header.sbfinc #utility .language > a:after {

  width: 20px;

  height: 20px;

  background: url(/softdrink/common/rwd/images/languagenega.png);

}

header.sbfinc #utility .language ul {

  position: absolute;

  top: calc(100% + 10px);

  left: 50%;

  min-width: 200px;

  padding: 20px 30px;

  z-index: 20;

  opacity: 0;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  -webkit-transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  pointer-events: none;

}

.sp header.sbfinc #utility .language ul {

  left: 0px;

  -webkit-transform: translateX(0%);

  transform: translateX(0%);

}

header.sbfinc #utility .language ul:after {

  content: "";

  display: block;

  position: absolute;

  width: 100%;

  height: 20px;

  bottom: 100%;

  right: 0px;

}

header.sbfinc #utility .language ul:before {

  content: "";

  display: block;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  background: #ffffff;

  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);

  opacity: 0;

  z-index: -1;

  -webkit-transform: scale(0.9);

  transform: scale(0.9);

  -webkit-transform-origin: top;

  transform-origin: top;

  -webkit-transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

}

header.sbfinc #utility .language ul li {

  display: block;

  padding: 10px 0px;

}

header.sbfinc #utility .language ul li a {

  font-size: 12px;

  line-height: 15.6px;

  letter-spacing: 1.2px;

  color: #333333;

  position: relative;

  display: inline-block;

  overflow: visible;

}

header.sbfinc #utility .language ul li a:before {

  content: "";

  display: block;

  position: absolute;

  bottom: 0px;

  left: 0px;

  margin-bottom: -0.3em;

  width: 100%;

  height: 1px;

  background: #5bc2dc;

  -webkit-transition: 0.6s;

  transition: 0.6s;

  -webkit-transform: scale(0);

  transform: scale(0);

}

header.sbfinc #utility .language ul li a:hover:before {

  -webkit-transform: scale(1);

  transform: scale(1);

}

header.sbfinc #utility .language ul.open {

  visibility: visible;

  opacity: 1;

  pointer-events: auto;

}

header.sbfinc #utility .language ul.open:before {

  opacity: 1;

  -webkit-transform: scale(1);

  transform: scale(1);

}

header.sbfinc #globalnavi {

  position: absolute;

  max-width: calc(100% - 200px);

  bottom: 0px;

  right: 20px;

}

.sp header.sbfinc #globalnavi {

  display: none;

}

header.sbfinc #globalnavi > ul {

  display: table;

  width: 100%;

  height: 45px;

  font-size: 14px;

  line-height: 18.2px;

  letter-spacing: 1.2px;

}

header.sbfinc #globalnavi > ul > * {

  display: table-cell;

  height: 100%;

  text-align: center;

  vertical-align: middle;

}

.pc header.sbfinc #globalnavi > ul {

  font-size: 13px;

  line-height: 16.9px;

  letter-spacing: 1.1px;

}

header.sbfinc #globalnavi > ul > li {

  position: relative;

}

header.sbfinc #globalnavi > ul > li > a {

  position: relative;

  display: table;

  width: 100%;

  height: 45px;

  color: #ffffff;

}

header.sbfinc #globalnavi > ul > li > a > * {

  display: table-cell;

  height: 100%;

  text-align: center;

  vertical-align: middle;

}

header.sbfinc #globalnavi > ul > li > a:after {

  content: "";

  display: block;

  position: absolute;

  bottom: 0px;

  left: 0px;

  width: 100%;

  height: 1px;

  background: #ffffff;

  z-index: 10;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

  transition: 400ms;

}

header.sbfinc #globalnavi > ul > li ul {

  position: absolute;

  top: 100%;

  left: 50%;

  width: 240px;

  padding: 20px;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  z-index: 20;

  opacity: 0;

  -webkit-transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  pointer-events: none;

}

header.sbfinc #globalnavi > ul > li ul:before {

  content: "";

  display: block;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  background: #ffffff;

  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);

  opacity: 0;

  z-index: -1;

  -webkit-transform: scale(0.9);

  transform: scale(0.9);

  -webkit-transform-origin: top;

  transform-origin: top;

  -webkit-transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

  transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1);

}

header.sbfinc #globalnavi > ul > li ul li {

  display: block;

  padding: 10px 0px;

}

header.sbfinc #globalnavi > ul > li ul li a {

  font-size: 12px;

  line-height: 15.6px;

  letter-spacing: 1.2px;

  color: #333333;

  position: relative;

  display: inline-block;

  overflow: visible;

}

header.sbfinc #globalnavi > ul > li ul li a:before {

  content: "";

  display: block;

  position: absolute;

  bottom: 0px;

  left: 0px;

  margin-bottom: -0.3em;

  width: 100%;

  height: 1px;

  background: #5bc2dc;

  -webkit-transition: 0.6s;

  transition: 0.6s;

  -webkit-transform: scale(0);

  transform: scale(0);

}

header.sbfinc #globalnavi > ul > li ul li a:hover:before {

  -webkit-transform: scale(1);

  transform: scale(1);

}

header.sbfinc #globalnavi > ul > li.open > a:after {

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}

header.sbfinc #globalnavi > ul > li.open ul {

  visibility: visible;

  opacity: 1;

  pointer-events: auto;

}

header.sbfinc #globalnavi > ul > li.open ul:before {

  opacity: 1;

  -webkit-transform: scale(1);

  transform: scale(1);

}

header.sbfinc #globalnavi > ul > li + li {

  padding-left: 20px;

}

.pc header.sbfinc #globalnavi > ul > li + li {

  padding-left: 15px;

}

header.sbfinc #spmenuswitch {

  display: none;

  position: absolute;

  right: 0px;

  top: 0px;

}

.sp header.sbfinc #spmenuswitch {

  display: block;

}

header.sbfinc #spmenuswitch a {

  position: relative;

  display: block;

  width: 55px;

  height: 55px;

  overflow: hidden;

}

header.sbfinc #spmenuswitch a span {

  position: absolute;

  padding-top: 20px;

  top: 50%;

  left: 50%;

  font-size: 11px;

  line-height: 12.1px;

  letter-spacing: 1px;

  font-weight: 700;

  color: #ffffff;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

header.sbfinc #spmenuswitch a span:before {

  content: "";

  display: block;

  position: absolute;

  width: 100%;

  height: 2px;

  top: 0px;

  background: #ffffff;

}

header.sbfinc #spmenuswitch a span:after {

  content: "";

  display: block;

  position: absolute;

  width: 100%;

  height: 2px;

  top: 11px;

  background: #ffffff;

}



#spmenu.sbfinc {

  position: absolute;

  top: 0px;

  width: 100%;

  padding-bottom: 30px;

  background: rgba(255, 255, 255, 0.9);

  box-shadow: 0px 5px 15px 15px rgba(0, 0, 0, 0.2);

  z-index: 1200;

  -webkit-transform: translateY(-150%);

  transform: translateY(-150%);

}

#spmenu.sbfinc.open {

  -webkit-transform: translateY(0);

  transform: translateY(0);

}

#spmenu.sbfinc .close a {

  position: absolute;

  display: block;

  top: 0px;

  right: 0px;

  width: 55px;

  height: 55px;

  text-indent: -10000px;

  overflow: hidden;

}

#spmenu.sbfinc .close a:before {

  content: "";

  display: block;

  position: absolute;

  top: 25px;

  left: 7px;

  width: 40px;

  height: 2px;

  background: #000000;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}

#spmenu.sbfinc .close a:after {

  content: "";

  display: block;

  position: absolute;

  top: 25px;

  left: 7px;

  width: 40px;

  height: 2px;

  background: #000000;

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

#spmenu.sbfinc .menu {

  margin-top: 65px;

}

#spmenu.sbfinc .menu ul ul {

  display: none;

}

#spmenu.sbfinc .menu li {

  position: relative;

  text-align: center;

}

#spmenu.sbfinc .menu li + li {

  margin-top: 38px;

}

#spmenu.sbfinc .menu li + li:after {

  content: "";

  display: block;

  position: absolute;

  top: -19px;

  margin-left: -17.5px;

  left: 50%;

  width: 35px;

  height: 1px;

  background: #000000;

}

#spmenu.sbfinc .menu a {

  font-size: 20px;

  line-height: 22px;

  letter-spacing: 2px;

  color: #000000;

}

#spmenu.sbfinc .utility {

  position: relative;

  margin-top: 32px;

}

#spmenu.sbfinc .utility ul {

  font-size: 0;

  line-height: 0;

  text-align: center;

}

#spmenu.sbfinc .utility li {

  display: inline-block;

  font-size: 15px;

  line-height: 16.5px;

  letter-spacing: 1.5px;

  font-weight: 500;

}

#spmenu.sbfinc .utility li + li {

  margin-left: 35px;

}

#spmenu.sbfinc .utility a {

  position: relative;

  margin-left: 28px;

  color: #5bc2dc;

}

#spmenu.sbfinc .utility a:after {

  content: "";

  display: block;

  position: absolute;

  left: -28px;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}

#spmenu.sbfinc .utility .language {

  display: none;

}

#spmenu.sbfinc .siteutility {

  margin-top: 35px;

}

#spmenu.sbfinc .siteutility ul {

  font-size: 0;

  line-height: 0;

  text-align: center;

}

#spmenu.sbfinc .siteutility li {

  position: relative;

  display: inline-block;

  font-size: 13px;

  line-height: 19.5px;

  letter-spacing: 1px;

  font-weight: 500;

  text-align: left;

  vertical-align: middle;

}

#spmenu.sbfinc .siteutility li span {

  display: block;

}

#spmenu.sbfinc .siteutility li + li {

  margin-left: 30px;

}

#spmenu.sbfinc .siteutility li + li:before {

  content: "";

  display: block;

  position: absolute;

  margin-top: -0.4em;

  top: 50%;

  left: -15px;

  width: 1px;

  height: 0.8em;

  background: #000000;

}

#spmenu.sbfinc .siteutility a {

  color: #333333;

}



#totop.sbfinc {

  width: 100%;

  bottom: 175px;

  z-index: 500;

  -webkit-transition: opacity 400ms;

  transition: opacity 400ms;

  opacity: 0;

}

#totop.sbfinc.fixed {

  position: fixed;

}

#totop.sbfinc.show {

  opacity: 1;

}

.sp #totop.sbfinc {

  bottom: 110px;

}

#totop.sbfinc > div {

  position: relative;

  width: 100%;

  max-width: 1196px;

  margin: auto;

  padding: 0px 20px;

}

.sp #totop.sbfinc > div {

  padding: 0px 10px;

}

#totop.sbfinc > div a {

  position: absolute;

  display: block;

  top: 75px;

  right: 35px;

  width: 50px;

  height: 50px;

  padding-left: 1px;

  color: #ffffff;

  font-size: 10px;

  line-height: 12px;

  letter-spacing: 1px;

  text-align: center;

  background: #5bc2dc;

  border-radius: 50%;

  z-index: 50;

  -webkit-transition: opacity 0.2s, background 0.2s;

  transition: opacity 0.2s, background 0.2s;

  cursor: pointer;

}

#totop.sbfinc > div a:hover {

  opacity: 0.7;

}

.sp #totop.sbfinc > div a {

  top: 30px;

  right: 20px;

}

#totop.sbfinc > div a span {

  position: absolute;

  top: 55%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

#totop.sbfinc > div a span:before {

  content: "";

  display: block;

  width: 10px;

  height: 10px;

  margin: 0px auto -2px;

  border-top: 1px solid #ffffff;

  border-left: 1px solid #ffffff;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}



footer.sbfinc {

  position: relative;

  display: block;

  margin-top: 40px;

  padding-top: 95px;

  background: url(/softdrink/common/rwd/images/footer.jpg) no-repeat center bottom;

  background-size: cover;

}

.sp footer.sbfinc {

  padding-top: 70px;

}

footer.sbfinc:before {

  content: "";

  display: block;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 70px;

  background: url(/softdrink/common/rwd/images/wave.png) repeat-x center bottom;

  -webkit-transform: rotate(180deg);

  transform: rotate(180deg);

}

.pc footer.sbfinc:before {

  background-size: 90%;

}

footer.sbfinc:after {

  content: "";

  display: block;

  position: absolute;

  top: -40px;

  left: 0px;

  width: 100%;

  height: 40px;

  background: #b8e3f0;

}

footer.sbfinc > div {

  position: relative;

  width: 100%;

  max-width: 1196px;

  margin: auto;

  padding: 0px 20px 45px;

}

.sp footer.sbfinc > div {

  padding: 0px 10px 22.5px;

}

footer.sbfinc #sns ul {

  font-size: 0;

  line-height: 0;

  text-align: center;

}

footer.sbfinc #sns li {

  display: inline-block;

}

footer.sbfinc #sns li + li {

  margin-left: 25px;

}

footer.sbfinc #sns a {

  display: block;

  -webkit-transition: opacity 0.2s, background 0.2s;

  transition: opacity 0.2s, background 0.2s;

  cursor: pointer;

}

footer.sbfinc #sns a:hover {

  opacity: 0.7;

}

.sp footer.sbfinc #siteutility {

  display: none;

}

footer.sbfinc #siteutility ul {

  font-size: 0;

  line-height: 0;

  text-align: center;

}

footer.sbfinc #siteutility li {

  display: inline-block;

  font-size: 14px;

  line-height: 16.8px;

  letter-spacing: 1.4px;

}

footer.sbfinc #siteutility li + li {

  position: relative;

  margin-left: 50px;

}

footer.sbfinc #siteutility li + li:before {

  content: "";

  display: block;

  position: absolute;

  width: 1px;

  height: 1em;

  left: -25px;

  top: 50%;

  margin-top: -0.5em;

  background: #ffffff;

}

footer.sbfinc #siteutility a {

  display: block;

  color: #ffffff;

}

footer.sbfinc * + #siteutility {

  margin-top: 35px;

}

footer.sbfinc #footerlogo {

  margin-top: 45px;

  text-align: center;

}

.sp footer.sbfinc #footerlogo {

  margin-top: -25px;

}

footer.sbfinc #footerlogo a {

  display: block;

  width: 160px;

  height: 34px;

  margin: auto;

  text-indent: -10000px;

  background: url(/softdrink/common/rwd/images/logonega.svg) no-repeat center center;

  background-size: 100% auto;

  overflow: hidden;

  -webkit-transition: opacity 0.2s, background 0.2s;

  transition: opacity 0.2s, background 0.2s;

  cursor: pointer;

}

footer.sbfinc #footerlogo a:hover {

  opacity: 0.7;

}

.sp footer.sbfinc #footerlogo a {

  width: 120px;

  height: 26px;

}

footer.sbfinc #footerlogo img {

  display: block;

  width: 160px;

  height: auto;

  margin: auto;

}

.sp footer.sbfinc #footerlogo img {

  width: 120px;

}

footer.sbfinc p {

  margin-top: 20px;

  text-align: center;

  font-size: 10px;

  line-height: 13px;

  letter-spacing: 1px;

}

.sp footer.sbfinc p {

  font-size: 8px;

  line-height: 13.6px;

  letter-spacing: 0px;

}



.sbfmainsite footer.sbfinc:before {

  background-image: url(/softdrink/common/rwd/images/wave2.png);

}



.sbfmainsite footer.sbfinc:after {

  background-color: #ffffff;

}